Понимание модулей ES6

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

Почти у каждого языка есть понятие модулей — способ включить функциональность, объявленную в одном файле в другой. Как правило, разработчик создает инкапсулированную библиотеку кода, отвечающую за обработку связанных задач. На эту библиотеку могут ссылаться приложения или другие модули.

Выгоды:

1. Код можно разбить на более мелкие файлы с автономной функциональностью.
2. Одни и те же модули можно использовать в любом количестве приложений.
3. В идеале, модули никогда не должны проверяться другим разработчиком, потому что они доказали свою работоспособность.
4. Код, ссылающийся на модуль, понимает, что это зависимость. Если файл модуля изменяется или перемещается, проблема сразу становится очевидной.
5. Код модуля (обычно) помогает устранить конфликты имен. Функция x() в module1 не может конфликтовать с функцией x() в module2. module1.x() такие параметры, как пространство имен, поэтому вызовы становятся module1.x() и module2.x() .

Где находятся модули в JavaScript?

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

Несколько тегов HTML <script>

HTML может загружать любое количество файлов JavaScript, используя несколько тегов <script> :

 <script src="lib1.js"></script> <script src="lib2.js"></script> <script src="core.js"></script> <script> console.log('inline code'); </script> 

Средняя веб-страница в 2018 году использует 25 отдельных сценариев , но это не практичное решение:

• Каждый скрипт инициирует новый HTTP-запрос, который влияет на производительность страницы. HTTP / 2 в некоторой степени облегчает проблему, но не помогает сценариям, на которые ссылаются другие домены, такие как CDN.
• Каждый скрипт останавливает дальнейшую обработку во время работы.
• Управление зависимостями — это ручной процесс. В приведенном выше коде, если lib1.js ссылается на код в lib2.js , код завершится ошибкой, поскольку он не был загружен. Это может нарушить дальнейшую обработку JavaScript.
• Функции могут переопределять другие, если не используются соответствующие шаблоны модулей . Ранние библиотеки JavaScript были известны тем, что использовали глобальные имена функций или переопределяли нативные методы.

Объединение скриптов

Одним из решений проблем нескольких тегов <script> является объединение всех файлов JavaScript в один большой файл. Это решает некоторые проблемы с производительностью и управлением зависимостями, но может привести к этапу ручной сборки и тестирования.

Модульные погрузчики

Такие системы, как RequireJS и SystemJS, предоставляют библиотеку для загрузки и размещения имен других библиотек JavaScript во время выполнения. Модули загружаются с использованием методов Ajax, когда это необходимо. Системы помогают, но могут усложняться для больших баз кода или сайтов, добавляя в смесь стандартные теги <script> .

Комплекты модулей, препроцессоры и транспортеры

Поставщики вводят этап компиляции, поэтому код JavaScript генерируется во время сборки. Код обрабатывается для включения зависимостей и создает один кросс-браузерный совместимый файл ES5. Популярные опции включают Babel , Browserify , webpack и другие общие задачи, такие как Grunt и Gulp .

Процесс сборки JavaScript требует некоторых усилий, но есть и преимущества:

• Обработка автоматизирована, поэтому вероятность человеческой ошибки меньше.
• Дальнейшая обработка может привести к задержке кода, удалению команд отладки, минимизации полученного файла и т. Д.
• Прозрачность позволяет вам использовать альтернативные синтаксисы, такие как TypeScript или CoffeeScript .

ES6 Модули

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

• CommonJS — module.exports и require синтаксиса, используемого в Node.js
• Определение асинхронного модуля (AMD)
• Определение универсального модуля (UMD).

Поэтому в ES6 был предложен единый собственный стандарт модулей (ES2015).

Все внутри модуля ES6 является приватным по умолчанию и работает в строгом режиме (нет необходимости 'use strict' ). Публичные переменные, функции и классы предоставляются с помощью export . Например:

 // lib.js export const PI = 3.1415926; export function sum(...args) { log('sum', args); return args.reduce((num, tot) => tot + num); } export function mult(...args) { log('mult', args); return args.reduce((num, tot) => tot * num); } // private function function log(...msg) { console.log(...msg); } 

В качестве альтернативы можно использовать один оператор export . Например:

 // lib.js const PI = 3.1415926; function sum(...args) { log('sum', args); return args.reduce((num, tot) => tot + num); } function mult(...args) { log('mult', args); return args.reduce((num, tot) => tot * num); } // private function function log(...msg) { console.log(...msg); } export { PI, sum, mult }; 

 // main.js import { sum } from './lib.js'; console.log( sum(1,2,3,4) ); // 10 

 import { sum, mult } from './lib.js'; console.log( sum(1,2,3,4) ); // 10 console.log( mult(1,2,3,4) ); // 24 

 import { sum as addAll, mult as multiplyAll } from './lib.js'; console.log( addAll(1,2,3,4) ); // 10 console.log( multiplyAll(1,2,3,4) ); // 24 

 import * as lib from './lib.js'; console.log( lib.PI ); // 3.1415926 console.log( lib.add(1,2,3,4) ); // 10 console.log( lib.mult(1,2,3,4) ); // 24 

 <script type="module" src="./main.js"></script> 

 <script type="module"> import { something } from './somewhere.js'; // ... </script> 

 <!-- runs SECOND --> <script type="module"> // do something... </script> <!-- runs THIRD --> <script defer src="c.js"></script> <!-- runs FIRST --> <script src="a.js"></script> <!-- runs FOURTH --> <script type="module" src="b.js"></script> 

 <script type="module" src="runs-if-module-supported.js"></script> <script nomodule src="runs-if-module-not-supported.js"></script> 

 // lib.js const PI = 3.1415926; function sum(...args) { log('sum', args); return args.reduce((num, tot) => tot + num); } function mult(...args) { log('mult', args); return args.reduce((num, tot) => tot * num); } // private function function log(...msg) { console.log(...msg); } module.exports = { PI, sum, mult }; 

 const { sum, mult } = require('./lib.js'); console.log( sum(1,2,3,4) ); // 10 console.log( mult(1,2,3,4) ); // 24 

 const lib = require('./lib.js'); console.log( lib.PI ); // 3.1415926 console.log( lib.add(1,2,3,4) ); // 10 console.log( lib.mult(1,2,3,4) ); // 24 

 // ES2015 modules // --------------------------------- // one.js console.log('running one.js'); import { hello } from './two.js'; console.log(hello); // --------------------------------- // two.js console.log('running two.js'); export const hello = 'Hello from two.js'; 

 running two.js running one.js hello from two.js 

 // CommonJS modules // --------------------------------- // one.js console.log('running one.js'); const hello = require('./two.js'); console.log(hello); // --------------------------------- // two.js console.log('running two.js'); module.exports = 'Hello from two.js'; 

 running one.js running two.js hello from two.js