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)

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

这种依赖会导致它像这样行为不端有什么问题？还有什么我可以作为导入器来解决这个问题，还是必须在依赖关系端修复它？

编辑：澄清一下，我只是在这里使用节点来清楚地显示错误;我实际上打算在浏览器中使用该捆绑包。此处显示的相同问题也出现在浏览器中。

Answer 1

错误正在发生，因为Webpack无法弄清楚如何处理这个库。此修复程序将要求库作者遵循常见的UMD模式。当前ansi_up 关闭但不太正确。

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

不应该像这样传递require函数。通过传入它，Webpack无法推断模块使用的依赖项。由于Webpack无法弄明白，它会注入代码来触发错误。

可以在https://github.com/umdjs/umd/blob/master/templates/commonjsStrict.js

中找到bettern UMD模式的示例

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

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

1 个答案: