Sortie d'un module ES en utilisant webpack
avec Rollup je peux sortir un module ES en paramétrant simplement l'option format à 'es' . Comment puis-je faire la même chose avec webpack? Si ce n'est pas possible maintenant, webpack a-t-il des plans pour l'ajouter?
la seule chose que j'ai trouvée dans la documentation pour output.libraryTarget qui mentionne les modules ES est ceci:
libraryTarget: "commonjs-module"- L'exposer en utilisant l'objetmodule.exports(output.libraryest ignoré),__esModuleest défini (il est fileté comme Module ES2015 en mode interop)
cependant, il est assez peu clair pour moi. Est-ce que c'est la même chose que libraryTarget: "commonjs2" avec la seule différence que __esModule est défini? Qu'est-ce que "interop mode"?
2 réponses
Webpack2 n'a pas encore de libraryTarget pertinent, il ne produit pas de paquets ES6. De l'autre côté, si vous empaquetez votre bibliothèque dans des bundlers CommonJS ne sera pas en mesure d'exécuter Tree Shaking, ne pas être en mesure d'éliminer les modules inutilisés. Cela est dû aux modules ES sont en cours de développement, de sorte que personne ne fournit les faisceaux ES au navigateur, tandis que webpack utilisé principalement pour créer des faisceaux compatibles navigateur.
de l'autre côté si vous publiez une bibliothèque, vous pouvez fournir les deux CommonJS (umd) et cibles ES, grâce à la touche "module" du 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 le module directement sur votre src/index.js:
//package.json
...
"module": "src/index.js"
"main": "dist/your/library/bundle.js
...
j'ai trouvé pratique d'utiliser babel pour gérer les instructions export v from 'mod' dans mon index principal.js, j'ai donc 1 fichier module exportant tous mes modules. C'est réalisé avec babel-plugin-transformer-export-extensions (également inclus dans la phase-1 preset).
je détecte cette approche de la bibliothèque react-bootstrap, vous pouvez voir les scripts dans leur github (ils sont webpack1). J'ai un peu amélioré leurs scripts dans mon react-sigma repo , n'hésitez pas à copier les fichiers suivants qui feront 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
regarde aussi la cible lib (scripts/lib/build.js et .babelrc), je fournis des modules transposés lib pour que les utilisateurs de la bibliothèque puissent inclure seulement les modules dont ils ont besoin, même sans que ES spécifie explicitement require("react-sigma/lib/Sigma/"), particulièrement utile si votre lib est lourde et modulaire!
tout D'abord, je voudrais indiquer la différence entre le commonJS et commonJS2
CommonJS ne supporte pas l'utilisation de module.exports = function() {} qui est utilisé par node.js et de nombreuses autres implémentations commonJS .
Webpack2 utilise le concept du groupement du code de bibliothèque et pour l'utilisation généralisée de celui-ci et pour le rendre compatible de travailler dans des environnements différents, nous utilisons le -- libraryTarget option
maintenant la partie ici va répondre à vos deux questions
les options possibles de bibliothèque supportées 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 le sens suivant
afin d'encourager l'utilisation de CommonJS et modules ES6 , lors de l'exportation d'un
default exportsans autreexportsmodule.exportssera mis en plus deexports["default"]comme indiqué dans le suivant exemple
export default test;
exports["default"] = test;
module.exports = exports["default"];
donc fondamentalement, cela signifie que le commonJS-module peut être utilisé par exposition it comme module.exports en utilisant le interloping avec ES2015 module enveloppé dans commonJS
plus d'informations sur le interloping peut être trouvé dans ce blogpost et le flux stackoverflow lien à elle.
le l'idée de base est dans ES6 les propriétés d'exportation et d'importation runtime ne peuvent pas être changées mais dans commonJS cela fonctionne très bien comme le nécessitent des changements se produisent à l'exécution donc il a ES2015 est interlopé avec le CommonJS .
mise à Jour
Webpack 2 donne l'option de créer la bibliothèque qui peut être regroupée et incluse .
si vous voulez que votre module soit utilisé dans différents environnements alors vous pouvez le regrouper comme une bibliothèque en ajoutant les options de bibliothèque et de sortie il à votre environnement spécifique . Procédure mentionnée dans le docs .
un Autre exemple simple sur la façon d'utiliser commonjs-module
point Important à noter ici est babel ajoute exports.__esModule = true à chaque es6 module et sur l'importation il appelle le _interopRequire pour vérifier cette propriété.
__esModule = true ne doit être défini que sur library export . Il doit être réglé sur le exports du module d'entrée . Intérieur des modules n'ont pas besoin de __esModule , c'est juste une babel hack.
comme indiqué dans les documents
__esModuleest défini (il est fileté comme ES2015 Module dans interop mode)
utilisation mentionnée dans les cas d'essai
export * from "./a";
export default "default-value";
export var b = "b";
import d from "library";
import { a, b } from "library";