Ausgang ein N-Modul mit webpack

Erstens möchte ich erklären den Unterschied zwischen den commonJS und commonJS2

CommonJS nicht unterstützen module.exports = function() {} die node.js und viele andere commonJS Implementierungen.

Webpack2 beschäftigt das Konzept der Bündelung der code für die Bibliothek und für die weit verbreitete Nutzung von it und machen es kompatibel mit der Arbeit in verschiedenen Umgebungen verwenden wir --libraryTarget option

Nun das Teil hier beantworten die beiden Ihre Fragen

Den möglichen Optionen Bibliothek unterstützt webpack2 sind

• 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 hat folgende Bedeutung

Zur Förderung der Nutzung von CommonJS und ES6-Module, wird beim exportieren eine default export mit keinem anderen exports module.exports festgelegt werden zusätzlich zu exports["default"] wie im folgenden Beispiel gezeigt

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

Also im Grunde bedeutet es, dass die commonJS-module verwendet werden kann auszusetzen es als module.exports mithilfe der interloping mit ES2015 Modul verpackt in commonJS

Weitere Infos über die interloping finden Sie in diesem Beitrag und stackoverflow link zu.

Die grundlegende Idee ist in ES6 runtime-export und-import Eigenschaften können nicht geändert werden aber in commonJS dies funktioniert gut als erfordern änderungen passieren zur Laufzeit daher hat es ES2015 ist interloped mit der commonJS.

Update

Webpack 2 gibt die Möglichkeit, die Erstellung der Bibliothek, die gebündelt werden können und enthalten.

Wenn Sie wollen, dass Ihr Modul in unterschiedlichen Umgebungen genutzt werden dann bündeln Sie es als eine Bibliothek durch hinzufügen der library-Optionen und die Ausgabe an Ihre spezifischen Umwelt. Verfahren erwähnt, die in der docs.

Ein weiteres einfaches Beispiel zur Verwendung commonjs-Modul

Wichtiger Punkt zu beachten ist hier babel fügt exports.__esModule = true jedem es6 module und auf importieren fordert die _interopRequire zu überprüfen, die Eigenschaft.

__esModule = true müssen nur festgelegt werden, auf Bibliothek exportieren. Es muss festgelegt werden, auf die exports des Eintrag Modul. Inneren Module brauchen nicht __esModule, es ist nur ein hack-babel.

Wie gesagt in den docs

__esModule definiert ist (es Gewinde als ES2015 Modul in interop - Modus)

Nutzung wie bereits in der Testfälle

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

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