尝试将 mongoose 与 webpack 一起使用时出现大的神秘错误和警告

IT技术 node.js reactjs mongoose webpack
2021-04-21 02:46:43

我正在使用 webpack 将我的 es6 同构 React 应用程序分别编译为客户端和服务器包。我已经安装了 mongoose 并试图在我的应用程序的服务器部分使用它，但是当我尝试构建时，我在控制台中遇到了一些可怕的错误：

./~/mongoose/lib/drivers/index.js 中的警告关键依赖项：8:11-74 依赖项的请求是一个表达式 @ ./~/mongoose/lib/drivers/index.js 8:11-74

警告在 ./~/mongoose/lib/drivers/SPEC.md module解析失败：/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/mongoose/lib/drivers/SPEC.md Line 2: Unexpected token ILLEGAL You可能需要一个合适的加载器来处理这种文件类型。| | # 驱动程序规范 | | 待办事项@ ./~/mongoose/lib/drivers ^./.*$

./~/express/lib/view.js 中的警告关键依赖项：78:29-56 依赖项的请求是一个表达式 @ ./~/express/lib/view.js 78:29-56

./~/es6-promise/dist/es6-promise.js 中的警告未找到module：错误：无法解析 /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist 中的module“vertx”解析 /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist 中的module vertx 在 /Users/richie/Code/CreativeFlumeProjects/cf-website/src /Users/richie/Code/CreativeFlumeProjects 中寻找module/cf-website/src/vertx 不存在（module作为目录）在 /Users/richie/Code/CreativeFlumeProjects/cf-website/src 解析文件 /Users/richie/Code/CreativeFlumeProjects/cf-网站/src/vertx 不存在 /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js 不存在在 /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx 中寻找module不存在（module作为目录）解析“文件”顶点在 /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules 解析文件 /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx 不存在 /Users/richie/Code/CreativeFlumeProjects/cf-website/ node_modules/vertx.js 不存在 [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie /Code/CreativeFlumeProjects/cf-website/src/vertx.js] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-网站/node_modules/vertx.js]@./~/es6-promise/dist/es6-promise.js 132:20-30

./~/bson/lib/bson/index.js 中的警告关键依赖项：20:16-29 依赖项的请求是一个表达式 44:18-31 依赖项的请求是一个表达式 71:19-32依赖请求是一个表达式@./~/bson/lib/bson/index.js 20:16-29 44:18-31 71:19-32

./~/require_optional/index.js 中的警告关键依赖项：63:18-42 依赖项请求是一个表达式 71:20-44 依赖项请求是一个表达式 78:35-67 依赖项请求是一个表达式@ ./~/require_optional/index.js 63:18-42 71:20-44 78:35-67

警告 ./~/require_optional/README.md module解析失败：/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md 第 1 行：意外令牌非法您可能需要适当的加载程序来处理此问题文件类型。| # require_optional | 解决我们在 node.js 中没有 optionalPeerDependencies 概念的问题，这使得可选地包含本机module变得很麻烦 | @ ./~/require_optional ^./.*$

./~/require_optional/LICENSE module解析失败中的警告：/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/LICENSE 第 1 行：意外标识符您可能需要适当的加载程序来处理此文件类型。| Apache 许可证 | 2.0 版，2004 年 1 月 |
http://www.apache.org/licenses/@./~/require_optional ^./.*$ /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900 返回地图[req ] || (function() { throw new Error("Cannot find module '" + req + "'.") }()); ^

错误：找不到module“./node-mongodb-native”。在 /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:42 在 webpackContextResolve (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900 :90) 在 webpackContext (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235897:30) 在 Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:48684:37) 在webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js: 20:30）在对象。(/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:52685:17) 在webpack_require(/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) 在 Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:236259:15) 在webpack_require(/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) 在 Object.exports.contain.exports.reachTemplate.internals.Any.applyFunctionToChildren.internals.Err.toString.internals .getPath.internals.serializer.internals.annotate.internals.Response._prepare.internals.Response._processPrepare.internals.Auth.test.internals.Auth.payload.internals.Auth.response.internals.Authenticator.exports.wrap.internals .isIsoDate.internals.compare.internals.Date.min.internals.Date.max.internals.Connection._init.internals.Connection._start.internals.Connection._stop.internals.Connection._dispatch.internals.Methods._add.internals .state.internals.payload.internals.compare.internals.Number.min.internals.Number.max.internals.Number.greater.internals.Number.less.internals.Number.multiple.internals.Number.integer.internals.Number 。消极的。internals.Number.positive.internals.Object.length.internals.Object.min.internals.Object.max.internals.Object.assert.internals.compare.internals.String.min.internals.String.max.internals.String。 creditCard.internals.String.length.internals.String.regex.internals.String.alphanum.internals.String.token.internals.String.email.internals.String.ip.internals.String.uri.internals.String.isoDate。 internals.String.guid.internals.String.hex.internals.String.hostname.internals.String.lowercase.internals.String.uppercase.internals.Request.internals.Response.writeHead.internals.Topo.add.exports.execute。 internals.prerequisites.internals.handler.internals.fromString.internals.pre.module.exports.internals.Plugin.internals.Plugin.register.internals.Protect.run.internals.Request.internals.Request._execute.internals.Request。 _lifecycle.internals.Request._invoke。internals.Server.start.internals.Server.initialize.internals.Server._start.internals.Server.stop._invoke.exports.send.internals.marshal.internals.fail.internals.transmit.internals.state.internals.input。 export.response.internals.Router.normalize.internals.parseParams.internals.Router.table.internals.Policy.get.internals.Policy._callGenerateFunc.internals.Policy.set.exports.generateKey.exports.encrypt.exports.decrypt. export.hmacWithPassword.exports.seal.exports.unseal.internals.Array.items.internals.Array.ordered.internals.Array.min.internals.Array.max.internals.Array.length.internals.Binary.min.internals。 Binary.max.internals.checkIpV6.exports.validate.internals.validate.internals.Definitions.parse.Items.serial.internals.unsign.Items.serial.internals.unsign.internals.decode.internals.Definitions.format.Items。 serial.exports.prepareValue.internals。encode.internals.sign.internals.Parser.internals.Parser.parse.decoder.once.writeFile.internals.Parser.raw.decoder.once.internals.Parser.multipart.onPart.writeFile.exports.Dispenser.internals.Dispenser。 internals.Client.request.internals.Client.read.internals.Client.parseCacheControl.internals.Client._shortcut.map../connection (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js :235702:19)

我已经尝试了许多通过谷歌找到的解决方案。将“.node”添加到我的resolve.extensions，添加node-loader，以及node对象的一些额外配置，都无济于事。

1个回答

处理服务器代码的 webpack 配置应该有一些额外的东西以避免出现问题。

尝试添加以下内容：

    target: 'node',
    output: {
        ...,
        libraryTarget: 'commonjs',
    },
    externals: [
        /^(?!\.|\/).+/i,
    ],

将 设置target为node使 webpack 知道您正在 Node 上下文中工作，而不是在浏览器中。添加libraryTarget: 'commonjs'将使 webpack 使用简单的require调用从外部库中获取函数。

然后一个重要的事情发生在externals. 它基本上排除了使用包中的非相对路径的任何要求。这样，如果你这样做，import 'react';它不会被 webpack 打包，但如果你这样做import './components/MyComponent.js';，它会。

这也意味着您必须确保您的node_modules目录包含在您构建的服务器代码中。

为什么要做这一切？因为 Node 使用了很多无法正确捆绑的原生module。它们特定于您在特定操作系统上的确切 Node 版本，您不能将它们放入 Javascript 包中。您希望自己的代码通过 webpack，并且node_modules可以像任何 Node 项目一样访问来自 的所有内容。

现在，如果您在浏览器包中收到这些警告/错误，则意味着您可能需要/导入仅在浏览器包中的服务器上工作的module。确保您只在仅在服务器上使用的文件中需要它们。或者，有选择地要求它们。您可以在此处找到如何根据构建类型执行选择性要求：我可以检测 Webpack 是否正在处理我的脚本？

很好的答案。解决了很多毛病。谢谢
2021-06-06 02:46:43
如果您将内容添加到解析根目录中以简化要求，您需要调整外部正则表达式以与您的内部module不匹配，或者使用替代策略。一个常见的方法是扫描 node_modules 目录中的包并将它们标记为外部，你可以使用这个包来代替：npmjs.com/package/webpack-node-externals
2021-06-12 02:46:43
它有效，但破坏了解析根路径。我该如何处理解析根路径？
2021-06-13 02:46:43
将“mongoose”添加为外部就足够了吗？
2021-06-15 02:46:43
@JuanJeGarcía，是的，但是您必须为您使用的每个依赖项都这样做。某些依赖项似乎捆绑得很好，但在运行时可能会失败。如果您使用 webpack 来捆绑 Node 代码，我强烈建议您在我的答案中使用正则表达式。
2021-06-21 02:46:43
其它你可能感兴趣的问题
上一篇推荐的方法来调整抽屉大小？ 下一篇ES2015 类“不自动绑定”吗？