web-dev-qa-db-ja.com

動的System.importとwebpack？

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

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

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

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

srcは外部ES6モジュールであり、依存関係（静的インポート）もある可能性があります。

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

webpackes6-module-loader
5
warpdesign

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

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プラグイン をインストールする必要があることに注意してください。

9
sic1

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

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

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

3
David Burrows

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をカプセル化するload関数を作成することをお勧めします（コールバックを別の方法で管理したい場合があります）。

あなたは例をチェックすることができます ここ

2
topheman

little-loader のようなライブラリを使用してこれを処理することができます。例：

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

load('<src>', function(err) {
    // loaded now, do something
});
1
Juho Vepsäläinen