В ES6 были внесены значительные улучшения в JavaScript, включая концепцию модулей. Если у вас есть существующий код ES5 и вы хотите перейти на модули ES6, эта статья расскажет вам о различных методах преобразования. Мы рассмотрим несколько примеров кода, чтобы проиллюстрировать каждый метод. Давайте погрузимся!

Метод 1: экспорт и импорт по умолчанию
Синтаксис ES5:

// module.js
function foo() {
  // function logic
}
function bar() {
  // function logic
}
module.exports = {
  foo: foo,
  bar: bar
};

Синтаксис ES6:

// module.js
export default function foo() {
  // function logic
}
export function bar() {
  // function logic
}

Импорт модуля:

import myModule, { bar } from './module.js';
myModule(); // invoking foo() function
bar(); // invoking bar() function

Метод 2: именованный экспорт и импорт
Синтаксис ES5:

// module.js
function foo() {
  // function logic
}
function bar() {
  // function logic
}
module.exports.foo = foo;
module.exports.bar = bar;

Синтаксис ES6:

// module.js
export function foo() {
  // function logic
}
export function bar() {
  // function logic
}

Импорт модуля:

import { foo, bar } from './module.js';
foo(); // invoking foo() function
bar(); // invoking bar() function

Метод 3: смешанный экспорт по умолчанию и именованный экспорт
Синтаксис ES5:

// module.js
function foo() {
  // function logic
}
function bar() {
  // function logic
}
module.exports = foo;
module.exports.bar = bar;

Синтаксис ES6:

// module.js
export default function foo() {
  // function logic
}
export function bar() {
  // function logic
}

Импорт модуля:

import myModule, { bar } from './module.js';
myModule(); // invoking foo() function
bar(); // invoking bar() function

Метод 4: реэкспорт
Синтаксис ES5:

// moduleA.js
function foo() {
  // function logic
}
module.exports = {
  foo: foo
};
// moduleB.js
var moduleA = require('./moduleA.js');
module.exports = moduleA;

Синтаксис ES6:

// moduleA.js
export function foo() {
  // function logic
}
// moduleB.js
export * from './moduleA.js';

Импорт модуля:

import { foo } from './moduleB.js';
foo(); // invoking foo() function

В этой статье мы рассмотрели несколько методов преобразования модулей ES5 в ES6. Используя экспорт по умолчанию, именованный экспорт, смешанный экспорт по умолчанию и именованный экспорт, а также реэкспорт, вы можете легко перенести существующую кодовую базу в модули ES6. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните пользоваться преимуществами расширенного синтаксиса и системы модулей ES6.