javascript - 带有连字符的 Webpack 外部模块名称

Question

我正在尝试将 angular-ui-router 作为外部依赖加载到 Webpack 中。模块名称是“angular-ui-router”。这是一个例子:

module.exports = webpackMerge(commonConfig, {
    ...
    externals: {
        'angular': true,
        'angular-ui-router': true
    },
    ...
});

问题是 Webpack 在我的 app.bundle.js 中创建了一个模块，如下所示:

/***/ },
/* 1 */
/***/ function(module, exports) {

    module.exports = angular;

/***/ },
/* 2 */
/***/ function(module, exports) {

    module.exports = angular-ui-router;

/***/ }
/******/ ]);

当浏览器尝试加载模块时，它会将 module.exports = angular-ui-router 计算为表达式，并抛出以下错误:

未捕获的 ReferenceError:未定义 ui

我找到的解决此问题的唯一方法是:

module.exports = webpackMerge(commonConfig, {
    ...
    externals: {
        'angular': true,
        'angular-ui-router': 'window["angular-ui-router"]'
    },
    ...
});

这会产生正确的结果。

有没有更好的办法？

Answer 1

我遇到了同样的问题，所以我用这样的方法解决了

module.exports = webpackMerge(commonConfig, {
    ...
    externals: [
      ....
      'angular-ui-router': {
                   commonjs: 'angular-ui-router' 
          }
        }
        ],
    ...
});