1

私はes6クラスのチュートリアルに従っていて、素敵な小さなd3ビジュアライゼーションを作成しました. それから私は2番目を作り、それらをライブラリにバンドルすることについて何かをしなければならないと思ったので、最初にモジュールを試して（ブラウザがまだそれらをサポートしていないことを発見しました）、次にwebpack 1.13をインストールして使用しrequire()ました（import動作しませんでした; 2.0 までサポートされていません)。

ただ、export default class Foo(data, args)私の bundle.jsの代わりにvar Foo = function () { function Foo(data, args) ....

インタープリターは、私がしようとすると不平を言うだけFoo.Foo(data, args)ですが、ここでの私の直感は、このようにfrankenclassをふりをしてインスタンス化することは、おそらくwebpackが意図するものではないということです? はい、すべてのモジュール ファイルを独自の bundle.js に連結してから に移動することもできますがnew Foo()、適切なバンドル ツールを使用しようとしています。

ES6で「可能な」ことと、実際にwebpackでそれを実現する方法との間には、オンラインドキュメントにかなりのギャップがあるように感じます。

index.jsスクリプトのバンドルからクラスをインスタンス化できるように、モジュールをwebpackにバンドルする段階的な方法は何ですか?

付録：（これまでに行ったこと）

├── 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
4

1 に答える 1

2

Webpack はバンドラーです。つまり、webpack を実行すると、すべてのファイルが解析され、それらが 1 つにまとめられます (CommonsChunkPlugin などを使用する場合は複数になります)。

バンドル内のすべてがプライベートになるため、クラスやコードなどを共有したい場合は、それらを公開する必要があります。https://github.com/webpack/expose-loader はこれを行うことができますが、本質的にブラウザでは、グローバル名前空間は通常windowオブジェクトです。

他の webpack の使用とコードを共有するためのより良いアプローチは、あなたのコードがそうであることを彼に示すことです。そうすれば、彼は彼の webpack バンドルにコンパイルできます。彼は を使用して自動バンドル分割を行うこともできます require.ensure。これは、クラスがあまり使用されない場合に便利であり、オンデマンドでロードされます。

私が最初に webpack を使い始めたときのことを覚えているので、上記が理にかなっていることを願っています。

于 2016-10-21T09:29:23.477 に答える