Question

我正在尝试在Webpack中加载angular-ui-router作为外部依赖。模块名称是“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"]'
    },
    ...
});

这会产生正确的结果。

有更好的方法吗？

Answer 1

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

FAILED: Build did NOT complete successfully

Answer 2

如果您有带连字符的外部模块名称，请在输出部分中使用 libraryTarget as umd 。所以app.bundle代码会有

require("angular-ui-router") would be used for requireJS and 
root.angularUIRouter = factory(root["angular-ui-router"]) would be used for global variable type.

捆绑代码如下所示：

"object" == typeof exports && "object" == typeof module ? 
module.exports = factory(require("angular-ui-router")) : "function" == 
typeof define && define.amd ? define(["angular-ui-router"], factory) : 
"object" == typeof exports ? exports.temp = factory(require("angular-ui-
router")) : root.temp = factory(root["angular-ui-router"])

Webpack外部模块名称带连字符

2 个答案: