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作为表达式进行评估，并抛出以下错误：

Uncaught ReferenceError: ui is not defined

我发现解决此问题的唯一方法是：

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

这会得到正确的结果。

有更好的方法吗？

- Joseph238

---

其实没有更好的方法。虽然对于简单的外部布尔选项，window未被暗示是很烦人的，但是当针对其他东西（例如Web Worker脚本，它们没有window）时，这确实很有用。 - Jacob

Answer 1

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

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

- Gaurav Pandvia

---

如果所涉及的模块是ES2015模块（import样式），该怎么办？ - GaryO

Answer 2

当您使用带连字符的外部模块名称时，请在输出部分中使用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"])

- Grandhi Avinash