wie man eine Es6-Klasse instanziiert, nachdem es von Webpack in eine Funktion gebündelt wurde

Question

Ich folgte einem Es6-Klassen-Tutorial und machte eine nette kleine d3-Visualisierung. Dann machte ich eine zweite, und dachte, ich sollte etwas tun, um sie in eine Bibliothek zu bündeln, so zunächst Module versucht (dann entdeckte Browser unterstützen sie noch nicht), und dann installierte ich Webpack 1.13 und require() verwendet (weil, obwohl es schien import sollte funktionieren, hat es nicht, nicht unterstützt bis 2.0).

Nur, jetzt statt export default class Foo(data, args) in meinem Bundle.js Ich habe var Foo = function() { function Foo(data, args) ....

Der Interpreter beklagt sich gerade, wenn ich versuche, Foo.Foo(data, args), aber meine Intuition hier ist, dass vortäuschen eine Frankenklasse auf diese Weise wahrscheinlich ist nicht das, was Webpack beabsichtigt? Und ja, ich könnte einfach alle meine Moduldateien in meine eigene bundle.js verketten und dann new Foo() gehen, aber ich versuche, ein richtiges Bündelungwerkzeug zu benutzen.

Ich habe das Gefühl, dass es eine große Lücke in der Online-Dokumentation gibt zwischen dem, was in ES6 "möglich" ist und wie Sie es tatsächlich im Webpack umsetzen.

Was ist die Schritt-für-Schritt-Methode zur Bündelung von Modulen mit Webpack, sodass Sie Ihre Klassen aus dem Bundle in Ihrem index.js-Skript installieren können?

---

Anhang: (Was ich bisher getan)

├── bundle.js    #supposed to bundle Foo and Bar 
├── bundle.js.map 
├── index.html   #include bundle.js and index.js before </body> 
├── index.js    #want to be able to new Foo() and Bar() 
├── js 
| ├── foo.js   Foo() lives here 
| └── bar.js   Bar() lives here 
├── LICENSE 
├── node_modules 
| └── (stuff) 
├── package.json 
├── README.md 
├── test 
| └── (stuff) 
└── webpack.config.js  # builds without errors 

Answer 1

Webpack ein Bündler ist. Das bedeutet, nachdem Sie Webpack ausgeführt haben, analysiert es alle Ihre Dateien und fügt sie in einen zusammen (oder mehr, wenn Sie etwas wie CommonsChunkPlugin verwenden).

Alles innerhalb des Pakets ist dann privat, also wenn Sie Ihre Klassen, Code etc. teilen möchten, dann müssen Sie sie freilegen, https://github.com/webpack/expose-loader kann dies tun, aber im Wesentlichen alles, was es tut, ist Sachen auf dem globalen Platzieren Namensraum, in Browsern ist der globale Namensraum normalerweise das Objekt window.

Ein besserer Ansatz zum Teilen von Code mit anderen Webpack-Anwendungen ist, dass Sie ihm nur zeigen, wo Ihr Code ist, und dann kann er in sein Webpack-Paket kompilieren. Er kann sogar automatische Bündelungsplitten mit require.ensure machen, das wäre praktisch, wenn man sagt, dass Ihre Klasse nicht sehr oft benutzt wird, also würde sie auf Anforderung laden.

Hoffen Sie, dass das oben genannte sinnvoll ist, da ich mich erinnere, als ich anfing, webpack zu verwenden, schien es manchmal überwältigend, und die Dokumentation ist nicht die größte für Anfänger.