Обзор синтаксиса ES6 для модулей

Модули и загрузчики модулей

Модуль - это просто файл JavaScript, написанный с использованием синтаксиса модуля. Модули экспортируют значения, которые затем могут быть импортированы другими модулями.

Файлы JavaScript CommonJS и AMD являются модулями.

Загрузчик модулей позволяет динамически загружать модули, а также отслеживает все загруженные модули в реестре модулей.

Обычно в производственной среде реестр модулей заполняется исходным скомпилированным набором модулей. Позже в состоянии страницы может потребоваться динамическая загрузка нового модуля. Затем этот модуль может совместно использовать зависимости с исходным пакетом страниц без необходимости перезагружать какие-либо зависимости.

Код модуля обрабатывается иначе, чем скрипты, из-за природы экспорта и импорта. Вот почему тег ‹script type =” module ”› введен, чтобы отличать код сценария от кода модуля.

Имена модулей и baseURL

Имена модулей аналогичны идентификаторам модулей в RequireJS. Неотносительные имена модулей (не начинающиеся с.) Преобразуются в URL по следующему правилу:

URL = absolutePath(baseURL, ModuleName + '.js')

Относительные имена модулей могут быть записаны как «./local-module» для загрузки относительно имени их родительского модуля. .. Синтаксис также поддерживается, что позволяет легко переносить модули.

Синтаксис модуля ES6

Экспорт

Синтаксис модуля ES6 больше всего похож на шаблон exports.method = function () {} в NodeJS для создания нескольких именованных экспортов.

В CommonJS можно написать:

exports.someMethod = function() {
  };
  exports.another = {};

В ES6 такой же код будет написан:

exporter.js:

export function someMethod() {
  }
  export var another = {};

Обратите внимание, что имя функции, класса или переменной используется как имя экспорта.

Импорт

При импорте мы импортируем любые нужные нам объекты экспорта по имени, а также можем переименовать их:

importer.js:

import { someMethod, another as newName } from './exporter';
  someMethod();
  typeof newName == 'object';

Импорт и экспорт по умолчанию

Иногда вообще не хочется писать имя импорта. Для этого мы можем использовать экспорт по умолчанию:

экспорт-default.js:

export default function foo() {
    console.log('foo');
  }

import-default.js:

import customName from './export-default';
  customName(); // -> 'foo'

Весь поддерживаемый синтаксис

Существует несколько других вариантов синтаксиса модуля, полный список поддерживаемых операторов приведен ниже.

import 'jquery';       
// import a module without any import bindings
import $ from 'jquery';    
// import the default export of a module
import { $ } from 'jquery'; 
 // import a named export of a module
import { $ as jQuery } from 'jquery';
// import a named export to a different name
export var x = 42;                      
// export a named variable
export function foo() {};               
// export a named function
export default 42;                      
// export the default export
export default function foo() {};       
// export the default export as a function
export { encrypt };                     
// export an existing variable
export { decrypt as dec };              
// export a variable as a new name
export { encrypt as en } from 'crypto'; 
// export an export from another module
export * from 'crypto';                 
// export all exports from another module
import * as crypto from 'crypto';    
// import an entire module instance object

Обратите внимание, что любое действительное объявление можно экспортировать. В ES6 это включает class (как в примере выше), const и let.