node.js - 尝试将 mongoose 与 webpack 结合使用时出现大量神秘错误和警告

Question

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

WARNING in ./~/mongoose/lib/drivers/index.js Critical dependencies: 8:11-74 the request of a dependency is an expression @ ./~/mongoose/lib/drivers/index.js 8:11-74

WARNING in ./~/mongoose/lib/drivers/SPEC.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/mongoose/lib/drivers/SPEC.md Line 2: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | | # Driver Spec | | TODO @ ./~/mongoose/lib/drivers ^./.*$

WARNING in ./~/express/lib/view.js Critical dependencies: 78:29-56 the request of a dependency is an expression @ ./~/express/lib/view.js 78:29-56

WARNING in ./~/es6-promise/dist/es6-promise.js Module not found: Error: Cannot resolve module 'vertx' in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist resolve module vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/src /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/src resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js doesn't exist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js doesn't exist [/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-website/node_modules/vertx.js] @ ./~/es6-promise/dist/es6-promise.js 132:20-30

WARNING in ./~/bson/lib/bson/index.js Critical dependencies: 20:16-29 the request of a dependency is an expression 44:18-31 the request of a dependency is an expression 71:19-32 the request of a dependency is an expression @ ./~/bson/lib/bson/index.js 20:16-29 44:18-31 71:19-32

WARNING in ./~/require_optional/index.js Critical dependencies: 63:18-42 the request of a dependency is an expression 71:20-44 the request of a dependency is an expression 78:35-67 the request of a dependency is an expression @ ./~/require_optional/index.js 63:18-42 71:20-44 78:35-67

WARNING in ./~/require_optional/README.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | # require_optional | Work around the problem that we do not have a optionalPeerDependencies concept in node.js making it a hassle to optionally include native modules | @ ./~/require_optional ^./.*$

WARNING in ./~/require_optional/LICENSE Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/LICENSE Line 1: Unexpected identifier You may need an appropriate loader to handle this file type. | Apache License | Version 2.0, January 2004 |
http://www.apache.org/licenses/ @ ./~/require_optional ^./.*$ /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900 return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }()); ^

Error: Cannot find module './node-mongodb-native'. 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) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:48684:37) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:52685:17) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:236259:15) at 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.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.exports.response.internals.Router.normalize.internals.parseParams.internals.Router.table.internals.Policy.get.internals.Policy._callGenerateFunc.internals.Policy.set.exports.generateKey.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../connection (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235702:19)

我尝试了通过谷歌找到的许多解决方案。在我的resolve.extensions中添加“.node”，添加node-loader，以及向 Node 对象添加一些额外的配置，都没有效果。

Answer 1

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

尝试添加以下内容:

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

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

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

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

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

现在，如果您在浏览器 bundle 中收到这些警告/错误，则意味着您可能需要/导入仅在浏览器 bundle 中的服务器上工作的模块。确保仅在仅在服务器上使用的文件中需要它们。或者，选择性地要求它们。您可以在此处找到如何根据构建类型执行选择性需求:Can I detect if my script is being processed by Webpack?