Учебники

ES6 — Модули

Декабрь 28, 2018

Рассмотрим сценарий, в котором части кода JavaScript необходимо использовать повторно. ES6 приходит вам на помощь с концепцией модулей.

Модуль — это не что иное, как кусок кода JavaScript, написанный в файле. Функции или переменные в модуле недоступны для использования, если только файл модуля не экспортирует их.

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

Модули ES6 должны быть перенесены в код ES5, чтобы мы могли запустить и протестировать код. Трансплантация — это процесс преобразования кода с одного языка в аналог. ES6 Module Transpiler — это инструмент, который берет ваш модуль ES6 и компилирует его в ES5-совместимый код в стиле CommonJS или AMD.

Модули ES6 — это очень мощная концепция. Хотя поддержка пока не везде доступна, вы можете поиграть с кодом ES6 сегодня и перейти к ES5. Вы можете использовать Grunt, Gulp, Babel или другой транспортер для компиляции модулей во время процесса сборки. В целях демонстрации на уроке используется Node.js для переноса и выполнения кода, поскольку он основан на консоли и прост для понимания.

Экспорт модуля

Чтобы сделать доступными определенные части модуля, используйте ключевое слово экспорта. Ниже приведен синтаксис для экспорта модуля.

Экспорт одного значения или элемента — использовать экспорт по умолчанию 

export default element_name

Экспорт нескольких значений или элементов 

export {element_name1,element_name2,....}

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

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

Импортировать одно значение или элемент

импортировать имя элемента из имени модуля

Экспорт нескольких значений или элементов 

import {element_name1,element_name2,....} from module_name

Рассмотрим файл JavaScript Message.js с методом printMsg (). Чтобы иметь возможность повторно использовать функциональные возможности, предоставляемые этим методом, включите в файл Message.js следующее: 

exportdefault printMsg

Файл сценария, который намеревается использовать функцию, скажем, User.js, должен будет импортировать функцию из модуля Message, включая следующее: 

import printMsg from './Message.js'

Примечание. Примечание. Несколько элементов в операторе экспорта должны быть разделены запятыми. То же самое относится и к импорту.

Пример: определение и использование модулей ES6

Определение модуля: Message_module.js 

function display_message() { 
   console.log("Hello World") 
} 
export default display_message

Импорт модуля: потребление_модулей.js 

import display_message from './MessageModule.js' 
display_message()

Установите es6-module-transpiler через npm, используя следующую команду — 

npm install -g es6-module-transpiler

Предположим, что структура каталогов данного проекта JS представлена ​​ниже: 

D:/ 
ES6/ 
   scripts/ 
      app.js 
      utility.js 
   out/

где scripts — это каталог, содержащий мои примеры кода ES6. Мы перенесем код ES6 в ES5 и сохраним их в каталог, показанный выше.

Ниже приведены шаги для того же —

Шаг 1 — Перейдите в каталог D: / ES6 / scripts и перенесите код ES6 в формат CommonJS . Вы также можете перейти в формат AMD, а затем использовать браузер для его запуска.

Введите следующее в окне узла, чтобы перевести код в формат CommonJS — 

compile-modules convert -I scripts -o out Message_module.js 
   consume_module.js -format commonjs

Приведенная выше команда перенесет все файлы JS в каталог скриптов и поместит их перенесенные версии в подкаталог out.

Шаг 2 — Выполнить код скрипта. 

cd out 
node consume_module.js

Ниже будет вывод вышеуказанного кода. 

Hello World

Примечание . Модуль также можно реэкспортировать, то есть код, который импортирует модуль, также может экспортировать его.

43
Share: