2016-11-20 9 views
2

異なるチャンクでそれらを保つには、(私のWebアプリケーションでLoading known files by variable in webpack using require読み込んでスクリプト変数を使用し、確実に、私は私すでに尋ねた上で、前にフォローアップの質問がある

は、私は現在の午前どの部位に応じて異なるコントローラをロード。。。そして、私はhtmlタグでdata-属性に格納されてロードされるべきコントローラを常にロードされているいくつかの一般的なスクリプトがある

ファイル構造は、このようなものです:

main.js 
controllers/controllerA.js 
controllers/controllerB.js 
controllers/subpath/controllerC.js 

私が使用している場合:

require.ensure([], function(require) { 
    const controller = require('./controllers/'+config.controller); 
    controller() 
}); 

はその後、すべてのコントローラが1つの出力ファイルに保存されているが、私は別のチャンクでそれらを維持したいと思います。

私は現在、これをすべてのコントローラを探して明示的に作成して、それぞれにensureを作成し、どちらをロードするかを決定するためにif句を使用する前処理ステップを使用してこれを解決します。

if(config.controller === 'controllerA') { 
    require.ensure(['./controllers/controllerA'], function(require) { 
    const controller = require('./controllers/controllerA'); 
    controller() 
    }); 
} 

これはうまく動作しますが、間違っているようだ、私は単一ensureに変数を使用してそれを達成することができますどのような方法がありますか?このエラーに

require('bundle-loader!./controllers/'+config.controller) 

結果::

Uncaught TypeError: callbacks[i] is not a function(…)

、バンドルローダーによって生成された部分に発生するようです、私は問題Dynamic require with code-split per fileが、使用を発見したEDIT

var cbs = [], 
data; 
module.exports = function(cb) { 
    if(cbs) cbs.push(cb); 
    else cb(data); 
} 
require.ensure([], function(require) { 
    data = require("!!./controllerA.js"); 
    var callbacks = cbs; 
    cbs = null; 
    for(var i = 0, l = callbacks.length; i < l; i++) { 
    callbacks[i](data); 
    } 
}); 

答えて

0

webpack 2.xとCode Splitting with ES2015では、問題は最終的に解決されました。代わりにrequire.ensureimportを使用しての

を使用することができ、コードはこのように書くことができます。

function getController(controller) { 
    return import(`./controllers/${controller}`) 
    .then(controller => controller()); 
} 

getController('controllerA') 
.then(()=> { 
    console.log('ok'); 
}) 

コントローラは今、個々のファイルに保存され、オンデマンドでロードされます。

関連する問題