使用webpack导入某些依赖项时，出现“错误：找不到模块“。””

Question

使用最少的babel + webpack设置，仅包含一个外部依赖项（ansi_up）。

编译时，出现警告：

$ webpack
Hash: f9bff237cfd206599eed
Version: webpack 3.0.0
Time: 119ms
    Asset     Size  Chunks             Chunk Names
bundle.js  17.6 kB       0  [emitted]  main
   [0] ./main.js 80 bytes {0} [built]
   [2] ./node_modules/ansi_up 160 bytes {0} [built]
    + 1 hidden module

WARNING in ./node_modules/ansi_up/ansi_up.js
9:20-27 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

然后在运行时出现此错误：

$ node bundle.js
/Users/chris/src/webpack-ansi-up/bundle.js:93
        v = factory(!(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()), exports);
                                                                                                                                    ^

Error: Cannot find module "."
    at webpackMissingModule (/Users/chris/src/webpack-ansi-up/bundle.js:93:65)
    at subst (/Users/chris/src/webpack-ansi-up/bundle.js:93:143)
    at Object.webpackEmptyContext.keys (/Users/chris/src/webpack-ansi-up/bundle.js:107:3)
    at __webpack_require__ (/Users/chris/src/webpack-ansi-up/bundle.js:20:30)
    at Object.<anonymous> (/Users/chris/src/webpack-ansi-up/bundle.js:72:66)
    at __webpack_require__ (/Users/chris/src/webpack-ansi-up/bundle.js:20:30)
    at Object.defineProperty.value (/Users/chris/src/webpack-ansi-up/bundle.js:63:18)
    at Object.<anonymous> (/Users/chris/src/webpack-ansi-up/bundle.js:66:10)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)

示例存储库在这里： https : //github.com/doughsay/webpack-question

这种依赖关系有什么问题会导致其行为异常？ 作为导入程序，我可以做些什么来解决此问题，还是必须在依赖项的一端进行修复？

编辑：澄清一下，我只是在这里使用node来清楚地显示错误； 我实际上正在计划在浏览器中使用捆绑软件。 浏览器中也会发生此处显示的相同问题。

Answer 1

发生错误是因为Webpack无法弄清楚该库的用途。 此修复方法是要求库作者遵循通用的UMD模式。 当前的ansi_up 接近，但不太正确。

https://github.com/drudru/ansi_up/blob/29ce78cf55cc87e8f221fc0f28150fa293a9c3e3/ansi_up.js#L20

不应传递那样的require函数。 通过将其传递，Webpack变得无法推理模块使用的依赖项。 由于Webpack无法解决问题，因此它注入代码来触发错误。

更好的UMD模式的示例可以在https://github.com/umdjs/umd/blob/master/templates/commonjsStrict.js中找到

请注意， require 称为 ，但是函数本身永远不会在任何地方作为参数传递。