Javascript Web包：无法要求使用变量自动解析依赖项

在使用Webpack管理JavaScript依赖关系的Web应用程序中，我偶然发现了我将要描述的问题

加载将字符串传递到

require（）

的依赖项效果很好：

// main.js
var jQuery = require('jquery');

在这里，

jquery

安装了Bower，并且正确配置了Webpack以自动解析Bower模块

现在，我正在研究有条件地加载模块的问题，特别是在必须从CDN下载模块的情况下，或者在CDN失败时从本地服务器下载模块的情况下。顺便说一下，我使用

scriptjs

从CDN异步加载。我写的代码是这样的：

var jQuery = undefined;
try {
  jQuery = require('jquery-cdn');
} catch (e) {
  console.log('Unable to load jQuery from CDN. Loading local version...');
  require('script!jquery');
  jQuery = window.jQuery;
}

// jQuery available here

// config.js
'use strict';
module.exports = {
  'lib': {
    'jquery': {
      'object': 'jQuery',
      'dev': function() { require('script!jquery'); },
      'dist': function() { return require('jquery-cdn'); },
      'cdn': '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'
    },
    'handlebars': {
      // ...
    }
  }
};

这段代码也运行得很好

现在，因为我显然有很多依赖项（Handlebar、Ember等），我想先从CDN加载这些依赖项，所以这段代码开始变得有点多余，所以我尝试做的最合乎逻辑的事情是将其重构为一个函数：

function loadModule(module, object) {
  var lib = undefined;
  try {
    lib = require(module + '-cdn');
  } catch (e) {
    console.log('Cannot load ' + object + ' from CDN. Loading local version...');
    require('script!' + module);
    lib = window[object];
  }
  return lib;
}

var jQuery = loadModule('jquery', 'jQuery');
var Handlebars = loadModule('handlebars', 'Handlebars');
// etc...

问题是Webpack在处理

require

语句中的表达式时有一个错误，这阻碍了我尝试以上述方式加载模块。特别是，在

中使用表达式时，需要它

尝试包含表达式中可能包含的所有文件

当我尝试用上面的代码运行Webpack时，净效果是一大堆错误消息

尽管链接的参考资料建议显式声明要包含的JavaScript文件的路径，但我没有得到的是，当我无法或不想将精确路径传递给
require
，而是使用自动解析的模块时，如何执行相同的操作，如图所示

谢谢大家

编辑：
我仍然不知道如何使用表达式来加载这些脚本，但是，我设计了一个变通方法。基本上，其思想是在回调函数中显式地编写
require（'script'）
，然后在需要时以友好方式调用该函数。更准确地说，我准备了如下配置文件：

var jQuery = undefined;
try {
  jQuery = require('jquery-cdn');
} catch (e) {
  console.log('Unable to load jQuery from CDN. Loading local version...');
  require('script!jquery');
  jQuery = window.jQuery;
}

// jQuery available here

// config.js
'use strict';
module.exports = {
  'lib': {
    'jquery': {
      'object': 'jQuery',
      'dev': function() { require('script!jquery'); },
      'dist': function() { return require('jquery-cdn'); },
      'cdn': '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'
    },
    'handlebars': {
      // ...
    }
  }
};

在我的主代码中，我定义了一个要加载的资源数组，如：

var config = require('./config.js');
var resources = [ config.lib.jquery, config.lib.handlebars, ... ];

然后，当我必须加载开发版本或分发版本时，我通常会调用：

// Inside some kind of cycle
// resource = resources[index]
try {
  window[resource.object] = resource.dist();
} catch (e) {
  console.log('Cannot load ' + resource.object + ' from CDN. Loading local version...');
  resource.dev();
}

这方面有一个更完整的例子