我试图将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
作为表达式进行评估,并抛出以下错误:
Uncaught ReferenceError: ui is not defined
我发现解决此问题的唯一方法是:
module.exports = webpackMerge(commonConfig, {
...
externals: {
'angular': true,
'angular-ui-router': 'window["angular-ui-router"]'
},
...
});
这会得到正确的结果。
有更好的方法吗?
window
未被暗示是很烦人的,但是当针对其他东西(例如Web Worker脚本,它们没有window
)时,这确实很有用。 - Jacob