Вывод модуля ES с помощью webpack

с накопительным пакетом я могу вывести модуль ES, просто установив до 'es'. Как я могу сделать то же самое с webpack? Если сейчас это невозможно, планирует ли webpack добавить его?

единственное, что я нашел в документация output.libraryTarget, который упоминает модули ES, это:

libraryTarget: "commonjs-module" - выставить его с помощью

28
ecmascript-6 es6-modules javascript webpack webpack-2

2 ответов

Webpack2 еще не имеет соответствующего libraryTarget, он не выводит пакеты ES6. С другой стороны, если вы связываете свою библиотеку в CommonJS bundlers, вы не сможете запустить встряхивание дерева, не имея возможности устранить неиспользуемые модули. Это связано с тем, что модули ES все еще развиваются, поэтому никто не отправляет пакеты ES в браузер, а webpack используется в основном для создания пакетов с поддержкой браузера.

С другой стороны, если вы публикуете библиотеку, вы можете предоставить как CommonJS (umd), так и ES цели, благодаря ключ"модуля" в пакете. в JSON. На самом деле вам не нужен webpack для публикации цели ES, все, что вам нужно сделать, это запустить babel на каждом файле, чтобы получить его в стандарт es2015, например, если вы используете react, вы можете запустить babel с помощью предустановки "react". Если ваш источник уже ES 2015 без дополнительных функций, вы можете указать модуль прямо на ваш src / index.js:

//package.json
...
  "module": "src/index.js"
  "main": "dist/your/library/bundle.js
...

Я нашел удобным использовать babel для обработки export v from 'mod' инструкции в моем основном индекс.js, поэтому у меня есть 1 файл модуля, экспортирующий все мои модули. Это достигается с помощью babel-plugin-transform-export-extensions (также входит в предустановку stage-1).

Я замечаю этот подход из библиотеки react-bootstrap, вы можете видеть скрипты в их github (они webpack1). Я немного улучшил свои скрипты в my react-sigma repo, Не стесняйтесь, чтобы скопировать следующие файлы, которые будут делать то, что вам нужно:

config/babel.config.js
scripts/buildBabel.js
scripts/es/build.js
scripts/build.js // this is command line controller, if you need just ES you don't need it

Также посмотрите на цель lib (скрипты / lib / build.Яш и.babelrc), я предоставляю lib транспилированные модули, поэтому пользователи библиотеки могут включать только модули, которые им нужны, даже без явного указания ES require("react-sigma/lib/Sigma/"), особенно полезно, если ваш lib тяжелый и модульный!

10

во-первых, я хотел бы подчеркнуть разницу между commonJS и commonJS2

CommonJS не поддерживает использование module.exports = function() {} используется node.js и многие другие commonJS реализаций.

Webpack2 использует концепцию связывания кода библиотеки и для широкого его использования и для обеспечения совместимости работы в разных средах мы используем --libraryTarget опции

теперь часть здесь ответит на оба ваших вопроса

возможные параметры библиотеки, поддерживаемые в webpack2 are

  • libraryTarget: "umd", // enum
  • libraryTarget: "umd-module", // ES2015 module wrapped in UMD
  • libraryTarget: "commonjs-module", // ES2015 module wrapped in CommonJS
  • libraryTarget: "commonjs2", // exported with module.exports
  • libraryTarget: "commonjs", // exported as properties to exports
  • libraryTarget: "amd", // defined with AMD defined method
  • libraryTarget: "this", // property set on this
  • libraryTarget: "var", // variable defined in root scope

Interlop имеет следующее значение

для того чтобы ободрить пользу CommonJS и модули ES6, при экспорте default export другого exports module.exports будет установлен в дополнение к exports["default"] как показано в следующем примере

export default test;
exports["default"] = test;
module.exports = exports["default"];

так в основном это означает, что commonJS-module можно использовать разоблачение это как module.exports С помощью interloping С модуль ES2015, завернутый в commonJS

подробнее о interloping можно найти в этом blogpost и stackoverflow ссылке к нему.

основная идея в ES6 свойства экспорта и импорта среды выполнения не могут быть изменены а в commonJS это хорошо как требовать изменений во время выполнения поэтому ES2015 и interloped С на CommonJS.

обновление

Webpack 2 дает возможность создания библиотеки, которая может быть в комплекте и включены.

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

еще один простой пример использования commonjs-module

важный момент, чтобы отметить здесь babel добавляет exports.__esModule = true для каждого es6 module и при импорте он вызывает _interopRequire чтобы проверить это свойство.

__esModule = true необходимо установить только на экспортировать библиотека. Его нужно установить на exports на модуль ввода. внутренние модули не нужно __esModule, это просто Вавилон мотыга.

как указано в документации

__esModule определено (оно продето нитку как ES2015 модуль взаимодействия режим)

использование, как указано в тесты

export * from "./a";
export default "default-value";
export var b = "b";

import d from "library";
import { a, b } from "library";
13