Produire un module ES en utilisant webpack

Question

Avec le correctif Cumulatif je peux de sortie d'un module ES par simple réglage de l' format option d' 'es'. Comment puis-je faire de même avec webpack? Si il n'est pas possible maintenant, ne webpack avez-vous des plans pour l'ajouter?

La seule chose que j'ai trouvé dans la documentation pour l' output.libraryTarget qui mentionne ES modules est ceci:

libraryTarget: "commonjs-module" - L'exposent à l'aide de l' module.exports objet (output.library est ignoré), __esModule est défini (c'est filetée comme ES2015 Module d'interopérabilité de mode)

Cependant, il est assez clair pour moi. Est-il le même que libraryTarget: "commonjs2" avec la seule différence qu' __esModule est-elle définie? Qu'est-ce que "l'interopérabilité mode"?

Answer 1

Je voudrais tout d'abord l'état de la différence entre le commonJS et commonJS2

CommonJS ne prend pas en charge l'utilisation de l' module.exports = function() {} qui est utilisée par node.js et de nombreux autres commonJS des implémentations.

Webpack2 utilise le concept de regroupement le code de la bibliothèque et pour la généralisation de l'utilisation de l'informatique et de la rendre compatible de travailler dans des environnements différents, nous utilisons l' --libraryTarget option

Maintenant, la partie permettra de répondre à la fois à vos questions

La possible bibliothèque d'options de prise en charge dans webpack2 sont

• 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 a la signification suivante

Afin d'encourager l'utilisation de CommonJS et ES6 modules, lors de l'exportation d'un default export avec aucune autre exports module.exports sera mis en plus d' exports["default"] comme indiqué dans l'exemple suivant

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

Donc, fondamentalement, cela signifie que l' commonJS-module peut être utilisé par les exposant comme module.exports par l'aide de la interloping avec ES2015 module enveloppé dans commonJS

Plus d'infos sur l' interloping peut être trouvé dans cet article sur le blog et le stackoverflow lien vers elle.

L'idée de base est de ES6 d'exécution à l'exportation et à l'importation les propriétés ne peuvent pas être modifiés , mais, en commonJS cela fonctionne bien comme l' exigent les changements surviennent au moment de l'exécution , il a donc ES2015 est interloped avec le commonJS.

Mise à jour

Webpack 2 donne la possibilité de créer de la bibliothèque, qui peuvent être fournis et inclus.

Si vous voulez que votre module pour être utilisé dans des environnements différents, alors vous pouvez regrouper comme une bibliothèque en ajoutant les options de bibliothèque et de sortie à votre environnement spécifique. Procédure mentionnée dans les docs.

Un autre exemple simple sur la façon d'utiliser commonjs-module

Point Important à noter ici, c'est - babel ajoute exports.__esModule = true chaque es6 module et sur l'importation d'elle en appelle à l' _interopRequire pour vérifier cette propriété.

__esModule = true besoin d'être réglé uniquement sur l'export de la bibliothèque. Il doivent être définies dans l' exports du module d'entrée. Intérieure modules n'avez pas besoin d' __esModule, c'est juste une babel hack.

Comme indiqué dans les docs

__esModule est défini (c'est filetée comme ES2015 Module d'interopérabilité de mode)

Utilisation comme mentionné dans le cas de test

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

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

Answer 2

Webpack2 ne pas avoir de libraryTarget pourtant, il n'a pas de sortie ES6 faisceaux. De l'autre côté Si vous le bundle de votre bibliothèque dans CommonJS bundlers ne sera pas en mesure d'exécuter Arbre de Secouer, de ne pas être en mesure d'éliminer les modules inutilisés. C'est en raison de ES modules sont encore en développement, donc personne ne les navires ES faisceaux de navigateur, tandis que webpack utilisé principalement pour créer navigateur faisceaux.

De l'autre côté si vous êtes à la publication de bibliothèque, vous pouvez fournir à la fois CommonJS (umd) et ES objectifs, grâce à "module" de la clé dans le paquet. json. En fait, vous n'avez pas besoin webpack de publier ES, tout ce que vous devez faire est d'exécuter babel sur chaque fichier es2015 standart, par exemple, si vous utilisez réagir vous pouvez exécuter babel avec juste de "réagir" preset. Si votre source est déjà ES 2015 sans fonctionnalités supplémentaires, vous pouvez pointer module directement à votre src/index.js:

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

Je trouve qu'il est pratique à utiliser babel à manipuler export v from 'mod' instructions de mon principal index.js, donc j'ai 1 fichier de module d'exportation de toutes mes modules. C'est réalisé avec babel-plugin-transformer-export-extensions (également inclus dans la phase-1 preset).

Je place cette démarche de réagir-bootstrap de la bibliothèque, vous pouvez voir les scripts dans leur github (ils sont webpack1). J'ai amélioré leurs scripts un peu dans ma réagir-sigma repo, n'hésitez pas à copier les fichiers suivants qui va faire ce dont vous avez besoin:

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

Aussi regarder lib cible (scripts/lib/build.js et .babelrc), j'ai lib transpiled modules afin de les usagers de la bibliothèque peuvent inclure uniquement les modules dont ils ont besoin, même sans ES spécifiant explicitement exiger("réagir-sigma/lib/Sigma/"), particulièrement utile si votre bibliothèque est lourd et modulaire!