尝试在webpack中使用mongoose时遇到大的神秘错误和警告

Question

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

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

     警告在./~/mongoose/lib/drivers/SPEC.md模块解析失败：   /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/mongoose/lib/drivers/SPEC.md   第2行：意外的令牌ILLEGAL您可能需要一个适当的加载器   处理此文件类型。 | | #Driver Spec | |去做 @   ./~/mongoose/lib/drivers ^。/。* $

     警告在./~/express/lib/view.js中严重依赖：78：29-56   依赖的请求是表达式@ ./~/express/lib/view.js   78：29-56

     警告在./~/es6-promise/dist/es6-promise.js中未找到模块：   错误：无法解析模块＆＃39; vertx＆＃39;在   /用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules / ES6-承诺/ DIST   解析模块vertx in   /用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules / ES6-承诺/ DIST   寻找模块   /用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ src目录       / Users / richie / Code / CreativeFlumeProjects / cf-website / src / vertx不存在（模块作为目录）       解决＆＃39;档案＆＃39; / 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   不存在寻找模块   /用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules       /用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules / vertx   不存在（模块作为目录）       解决＆＃39;档案＆＃39; / Users / richie / Code / CreativeFlumeProjects / cf-website / node_modules中的vertx         解析文件           /用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules / vertx   不存在           /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js   不存在   [/用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ SRC / vertx]   [/用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ SRC / vertx]   [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js]   [/用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules / vertx]   [/用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules / vertx]   [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js]   @ ./~/es6-promise/dist/es6-promise.js 132：20-30

     警告在./~/bson/lib/bson/index.js中严重依赖：20：16-29   依赖的请求是表达式44：18-31 a的请求   依赖是表达式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 a的请求   依赖是一个表达式@ ./~/require_optional/index.js 63：18-42   71：20-44 78：35-67

     警告在./~/require_optional/README.md模块解析失败：   /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md   第1行：意外的令牌ILLEGAL您可能需要一个适当的加载器   处理此文件类型。 | #require_optional |解决问题   我们在node.js中没有optionalPeerDependencies概念   使任选包括本机模块麻烦| @   ./~/require_optional ^。/。* $

     警告在./~/require_optional/LICENSE模块解析失败：   /用户/里奇/代码/ CreativeFlumeProjects / CF-网站/ node_modules / require_optional / LICENSE   第1行：意外的标识符您可能需要适当的加载程序   处理此文件类型。 |阿帕奇   许可证| 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（＆＃34;找不到模块   ＆＃39;＆＃34; + req +＆＃34;＆＃39;。＆＃34;）}（））;                                          ^

     

错误：无法找到模块＆＃39; ./ node-mongodb-native＆＃39;。       at /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:42       at webpackContextResolve（/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:90）       at webpackContext（/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235897:30）       在对象。 （/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）       在对象。 （/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）       at 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.negative.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.internal s.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。 exports.response.internals.Router.normalize.internals.parseParams.internals.Router.table.internals.Policy.get.internals.Policy._callGenerateFunc.internals.Policy.set.exports.generateK ey.exports.encrypt.exports.decrypt.exports.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 ../连接   （/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235702:19）

我尝试过通过谷歌找到的一些解决方案。添加＆＃34; .node＆＃34;我的resolve.extensions，添加节点加载器，以及一些其他配置到节点对象，都无济于事。

Answer 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';，它将会。{/ p>

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

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

现在，如果您在浏览器包中收到这些警告/错误，则表示您可能需要/导入仅在浏览器包中的服务器上运行的模块。确保只在服务器上使用的文件中要求它们。或者，有选择地要求它们。您可以在此处找到基于构建类型的选择性需求：Can I detect if my script is being processed by Webpack?