Webpack外部模块名称带连字符

Webpack externals module name with hyphen

本文关键字：连字符 外部 模块 Webpack      更新时间：2023-09-26

我试图在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"]'
    },
    ...
});

这将产生正确的结果。

有更好的方法吗?

我也有同样的问题，所以我用这样的东西来解决它

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

当您有带有连字符的外部模块名时，在输出部分使用libraryTarget作为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.

Bundle代码应该是这样的:

"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"])
相关文章：