モジュールをBabelとWebpackに動的に読み込む方法は？

Question

ES6でダイナミックモジュールロード機能を使用しようとしていますが、実際にはまだ実装されていないようです。しかし、当分の間はこのトリックを行うべきであると考えられるES6 Module Loader Polyfillのような代用品がある。

私はES6プロジェクトをBabelとWebpackを使用してES5に移植しました。それは単独で問題なく動作します。しかし、私のすべてのコードは1つのbundle.jsファイルにマージされ、私はモジュールに分割したいと思います。そして、私が言及したPolyfillを試してみると、内部から何らかのエラーがスローされ、プロジェクトも開始されません。

index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined 

そしてライン6読み取ります

var filePrefix = 'file:' + (process.platform.match(/^win/) ? '/' : '') + '//'; 

ここに私のpackage.jsファイルです：

{ 
    "dependencies": { 
    "es6-module-loader": "^0.17.11", 
    "events": "^1.1.0", 
    "flux": "^2.1.1", 
    "fs": "0.0.2", 
    "react": "^15.0.2", 
    "react-addons-css-transition-group": "^15.0.2", 
    "react-dom": "^15.0.2", 
    "react-router": "^2.4.0", 
    "react-tap-event-plugin": "^1.0.0", 
    }, 
    "devDependencies": { 
    "babel-core": "^6.8.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "html-webpack-plugin": "^2.16.1", 
    "react-hot-loader": "^1.3.0", 
    "transfer-webpack-plugin": "^0.1.4", 
    "webpack": "^1.13.0", 
    } 
} 

は、誰かがWebPACKのとバベルと動的モジュールのロードの実施例に私を指すしてくださいことはできますか？

Answer 1

ここには3つのものがあります。dynamicimporting、遅延読み込み、コード分割/バンドル。 ES6 Module Loaderでポリ充填方法は、動的な輸入を許可しますSystem.importが、ないダイナミックcode splitting：

しかし、最もtranspilersはrequire.ensureにSystem.load呼び出しを変換するサポートしていませんしたい場合はあなたが直接それをしなければなりません動的コード分割を利用する。

動的なコード分割は、エントリポイント内で子バンドルを作成するときです。動的なコード分割は、動的に遅延ロードできます。このために、私はもう少し優しいrequire.ensure以上であるpromise-loaderを使用することをお勧めします：

import LoadEditor from 'promise?global,[name]!./editor.js'; 

... 

if (page === 'editor') { 
    LoadEditor().then(Editor => { 
    // Use the Editor bundle... 
    }) 
} 

のWebPACKは今editor.jsモジュールを破るだろうと示したように、それのすべてがすぐにまたは動的にロードすることができ、別のバンドル（への依存関係です上記）。最後に、アプリのサイズによっては、splitting the vendor code outも考慮する必要があると思います。

UPDATE

System.importは仕様から削除され、ちょうどimport()によって置き換えられました。新しいwebpackドキュメントには、webpackにpage that discusses dynamic importsとその制限があります。