Question

我已经问了一个关于我之前的问题（Loading known files by variable in webpack using require

在我的网络应用程序中，我根据我当前所在的网站加载不同的控制器。我有一些常用的脚本。应加载的控制器存储在data-标记中的html属性中。

文件结构如下：

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

如果我使用：

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

然后所有控制器都存储在一个输出文件中，但我想将它们保存在不同的块中。

正如我在另一个问题中所提到的，我现在使用预处理步骤查找所有控制器并为每个控制器创建一个显式ensure并使用if子句来决定应该是哪一个加载。

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

这很好用，但似乎是错的，有没有办法在单ensure个变量上实现这个目标？

修改

我发现了问题Dynamic require with code-split per file，但使用了：

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

导致此错误的结果：

未捕获的TypeError：callbacks [i]不是函数（...）

似乎发生在捆绑加载器生成的部分中：

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);
  }
});

Answer 1

使用webpack 2.x和Code Splitting with ES2015，问题现在终于解决了。

可以使用require.ensure而不是import，而代码可以这样编写：

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

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

控制器现在存储在单个文件中并按需加载。

使用变量加载脚本并确保，但将它们保存在不同的块中

1 个答案: