6

systemjs + Babelを使用して記述した ES6 コードを移植しようとしています。

ほとんどのコードを移植するのに何の問題もありませんでした。

ただし、次のように、ES6 モジュールを動的にロードする必要があるコードがいくつかあります。

function load(src) {
    System.import(src).then(function() {});
}

src は、依存関係 (静的インポート) を持つ可能性がある外部 ES6 モジュールです。

このコードを Webpack に移植するにはどうすればよいですか? require ステートメントを使用しようとすると、Webpack のドキュメントによると、正常と思われる WARNING が表示されます。

4

4 に答える 4

9

以前の回答は正しかったのですが、現在 webpack 2.2 + babel (執筆時点ではv2.2.0-rc.3が最新バージョンです) でこれを行うことができます。私は自分自身をテストしていませんが、ここでも私を導いた研究を行いました.

webpack ドキュメントからこれを読んでください: es2015 によるコード分割

そのセクションのすぐ下には、この例の動的式があります。

function route(path, query) {
  return import("./routes/" + path + "/route")
    .then(route => new route.Route(query));
}
// This creates a separate chunk for each possible route

ドキュメントに記載されているように、 Syntax Dynamic Import pluginをインストールする必要があることに注意してください。

于 2017-01-06T02:17:11.060 に答える
3

require.ensureWebpack 1 は System.import をサポートしていません。Webpack を使用してモジュールを動的にロードすることで、これを回避できる場合があります。そのアプローチの詳細は、https ://webpack.github.io/docs/code-splitting.html#es6-modules にあります。

やりたいことによっては、Webpack のcontext機能も使用する必要がある場合があります。詳細については、こちらを参照してくださいhttps://webpack.github.io/docs/context.html

Webpack 2 は、ES6 と System.import を直接サポートするため、これらの問題を修正する必要があります。

于 2016-06-15T18:06:15.380 に答える
2

webpack には「動的読み込み」などはありません (バンドラーはすべてのモジュールの依存関係を調べる必要があるため)。あなたが達成したいこと(そしてwebpackでそれを行う正しい方法)に最も近いことは、使用することですrequire.ensure-ドキュメントを参照してください。

SystemJS コードを webpack に変換する 1 つの方法は次のとおりです。

function load(moduleName) {
    switch (moduleName) {
        case 'foo':
            require.ensure([], require) => {
                const foo = require('./foo.js');
                // do something with it
            }
            break;
        case 'bar':
            require.ensure([], require) => {
                const bar = require('./bar.js');
                // do something with it
            }
            break;
    }
}

それぞれをカプセル化するロード関数を作成することをお勧めしますrequire.ensure(コールバックを別の方法で管理したい場合があります)。

ここで例を確認できます

于 2016-03-19T16:07:39.850 に答える
1

これを処理するには、 little-loader のようなライブラリを使用してみてください。例:

var load = require('little-loader');

load('<src>', function(err) {
    // loaded now, do something
});
于 2016-03-20T07:55:06.127 に答える