Какова цель каталогов esm в модулях Angular 2?

Я работаю с Angular2 RC4:

"@angular/common": "2.0.0-rc.4",
 "@angular/compiler": "2.0.0-rc.4",
 "@angular/core": "2.0.0-rc.4",
 "@angular/forms": "0.2.0",
 "@angular/http": "2.0.0-rc.4",
 "@angular/platform-browser": "2.0.0-rc.4",
 "@angular/platform-browser-dynamic": "2.0.0-rc.4",
 "@angular/router": "3.0.0-beta.2",
 "@angular/upgrade": "2.0.0-rc.4",

и я использую JetBrains IntelliJ IDEA 2016.2. Когда я ссылаюсь на директивы Angular2, IDE помогает предложить импортировать пакет, в котором определена директива. К сожалению, IDE находит несколько определений директив, что означает, что я должен выбрать правильный из списка, который предоставляется. Иногда я выберу "неправильный", и в итоге у меня будет большое количество ошибок компиляции. Как я понял, неправильный пакет всегда/обычно находится в каталоге распространения Angular2, содержащем подпапку esm.

При проверке любой папки esm это содержимое близко имитирует папку из папки sibling src (например):

@angular
 common
 + esm
 + src
 + directives
 + facade
 + form-deprecated
 + location
 + pipes
 common_directives.d.ts
 common_directives.js
 common_directives.js.map
 common_directives.metadata.json
 directives.d.ts
 ...
 pipes.js
 pipes.js.map
 + src
 + directives
 + facade
 + form-deprecated
 + location
 + pipes
 common_directives.d.ts
 common_directives.js
 common_directives.js.map
 common_directives.metadata.json
 directives.d.ts
 ...
 pipes.js
 pipes.js.map

Вопрос 1: Какова цель каталогов esm и почему они представлены в дистрибутиве?

Вопрос 2: Как разработчик приложения Angular2 мне нужны файлы в этих каталогах?

Вопрос 3: Если "Нет" на вопрос 2 я могу безопасно удалить их из своего проекта и/или есть ли способ сделать IntelliJ IDEA 2016.2 игнорировать эти папки?

1 ответ

Вопрос 1: папка esm содержит библиотеку, написанную в синтаксисе модуля ES2015 (или ES6). Существует два основных сообщества, созданных в модуле JavaScript-land, AMD и CommonJS, но модуль ES2015 - это первый раз, когда синтаксис модуля фактически является частью языка. Код, написанный в модулях ES6, является надежным в будущем: синтаксис более приятный, поддерживаются циклические зависимости, а модули экспортируют привязки, а не значения. Модуль ES2015 более эффективен, чем другие форматы, и может облегчить создание меньшего размера пакета через метод дрожания дерева, т.е. Импортировать только нужные вам биты, а не импортировать Все это. Сообщество уже разработало инструменты, которые используют модуль ES2015. В качестве примера библиотека rollup.js является модулем модуля JavaScript, который использует технологию дрожания дерева для создания меньших пакетов.

Итак, почему команда Angular включила дистрибутив esm? Ну, хотя в настоящее время браузеры не поддерживают полностью синтаксис ES2015, вы можете использовать такие инструменты, как rollup.js, чтобы полностью использовать синтаксис модуля ES2015 для создания супертонкого пакета вашего приложения.

Вопрос 2. Как я уже говорил, вы можете (или должны) использовать каталог esm для создания меньшего пакета вашего приложения, используя, например, библиотеку rollup.js.

Вопрос 3. Вам ничего не нужно удалять. esm - ваш лучший друг, когда вам нужно создать пакет вашего приложения для производства.

Отличной ссылкой для него является страница rollup.js wiki. Посмотрите.

Вы также можете прочитать отличную статью Building и Angular 2 Application for Production, в которой показано, как использовать rollup.js и дрожание деревьев.

** Бонус **: проверка package.json библиотеки, которую вы видите, если она включает версию ES2015. Просто найдите свойство jsnext:main. Подробнее об этом вы можете прочитать rollup - jsnext: основная документация.

licensed under cc by-sa 3.0 with attribution.