Webpack kompiliert ES6 in Modul

Question

Ich versuche, ES6 zu einer Datei mit Webpack zu kompilieren und kann nicht herausfinden, warum der Code nicht wie er ist verwendbar ist.

Randbemerkung: Das soll ein Plugin für VueJS

ich mit einer einfachen Datei starten sein, die eine einzelne Funktion wie

exports.install =() => { 
    ... 
} 

Webpack verwendet babel-loader und babel-preset-es2015 exportiert kompilieren Sie es.

Sie können Webpack-Konfiguration, Quelle und kompilierte Dateien in this gist finden.

Mein Problem ist das Ergebnis ist nicht "requirable" in meiner Vue App ... Es hat einige seltsame Sachen rund um den Kern benötigt exports.install Aussage. Wenn ich all diese Sachen entferne und nur exports.install = ... lasse, ist es in Ordnung, sonst bekomme ich einfach nichts heraus.

Ich benutze es in einer anderen App mit Webpack, durch eine import Anweisung gebaut.

Answer 1

Ohne output.libraryTarget Option wird webpack ein Bündel generieren Sie über einen <script>-Tag enthalten kann, aber nicht import. Ich denke, das ist was du siehst.

Wenn Sie import wollen (oder require) das Ergebnis Ihres webpack bauen, sollten Sie libraryTarget zu commonjs2

output: { 
    filename: 'index.js', 
    libraryTarget: "commonjs2" 
    }, 

Mit dieser libraryTarget Konfiguration eingestellt, die webpack Ausgabe wie module.exports = /* ... the "weird stuff" */ aussehen wird, so dass, wenn Sie Import Sie erhalten die exportierte Funktion, die Sie erwarten.

---

Wenn alles, was Sie tun, ist eine einzelne Datei oder einen Satz von Dateien kompilieren, die in einem anderen webpack Build importiert werden, könnten Sie nicht webpack überhaupt, verwenden und stattdessen die Babel CLI direkt verwenden. In Ihrem Gist erhalten Sie nichts anderes als das Wrapping Ihres Moduls in einen zusätzlichen Webpack-Bootstrap-Code.