尝试在webpack上使用mongoose时,会得到大量的神秘错误和警告

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

警告在./~/mongoose/lib/drivers/index.js关键依赖关系:8:11-74依赖关系的请求是expression式@ ./~/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行:意外的标记非法您可能需要一个合适的加载器来处理这个文件types。 | | #驱动程序规格| | TODO @ ./~/mongoose/lib/drivers ^。/。* $

警告在./~/express/lib/view.js关键依赖:78:29-56依赖的请求是一个expression式@ ./~/express/lib/view.js 78:29-56

警告./~/es6-promise/dist/es6-promise.js模块未find:错误:无法parsing/ Users / richie / Code / CreativeFlumeProjects / cf-website / node_modules / es6-promise / dist中的模块“vertx”在/ Users / richie / Code / CreativeFlumeProjects / cf-website / src / Users / richie / Code / CreativeFlumeProjects中find/ Users / richie / Code / CreativeFlumeProjects / cf-website / node_modules / es6-promise / dist模块vertx /用户/ richie / Code / CreativeFlumeProjects / cf-website / srcparsing文件/ Users / richie / Code / CreativeFlumeProjects / cf-vertex / cf-website / src / vertx不存在website / src / vertx不存在/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js在/ Users / richie / Code / CreativeFlumeProjects / cf-website / node_modules /用户/ richie / Code / CreativeFlumeProjects / cf-website / node_modules / vertx不存在(模块作为目录)在/ Users / richie / Code / CreativeFlumeProjects / cf-website / node_module中parsing'file'vertx sparsing文件/ 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-website /node_modules/vertx.js] @ ./~/es6-promise/dist/es6-promise.js 132:20-30

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

警告in ./~/require_optional/index.js关键依赖:63:18-42依赖请求是expression式71:20-44依赖请求是expression式78:35-67依赖请求是expression式@ ./~/require_optional/index.js 63:18-42 71:20-44 78:35-67

警告在./~/require_optional/README.md模块parsing失败:/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md第1行:意外的标记ILLEGAL您可能需要一个合适的加载器来处理文件types。 | #require_optional | 解决在node.js中没有optionalPeerDependencies概念的问题,使其成为一个麻烦,可以select包含native模块| @ ./~/require_optional ^。/。* $

警告./~/require_optional/LICENSE模块parsing失败:/ Users / richie / Code / CreativeFlumeProjects / cf-website / node_modules / require_optional / LICENSE第一行:意外的标识符您可能需要一个合适的加载器来处理此文件types。 | Apache License | 2.0版,2004年1月|
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(“Can not find module”)+ req +“'。”)}()); ^

错误:找不到模块'./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)。 (/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)在对象。 (/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)在对象。 (/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)在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.le ngth.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.internal s.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 / r ichie /代码/ CreativeFlumeProjects / CF-网站/公/ server.bundle.js:235702:19)

我已经尝试了一些通过谷歌find的解决scheme。 将“.node”添加到我的resolve.extensions,添加node-loader,以及一些额外的configuration到节点对象,都无济于事。

处理服务器代码的webpackconfiguration应该有一些附加function来避免问题。

尝试添加以下内容:

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

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

然后一个重要的事情发生在externals的正则expression式中。 它基本上排除了从捆绑使用非相对path的任何要求。 这样,如果你import 'react'; 它不会被webpack打包,但如果你import './components/MyComponent.js'; , 它会。

这也意味着你必须确保你的node_modules目录包含在你的内置服务器代码中。

为什么要这样做? 因为Node使用了很多不能被捆绑的本地模块。 它们是特定于您在特定操作系统上的确切版本的Node,并且不能只将它们拉入到JavaScript捆绑包中。 你希望你自己的代码通过webpack,并且所有来自node_modules东西就像任何Node项目一样被访问。

现在,如果您的浏览器包中包含这些警告/错误,则意味着您可能需要/导入只能在浏览器包中的服务器上运行的模块。 确保您只需要在服务器上只使用的文件中。 另外,有select地要求他们。 你可以在这里find基于构buildtypes的select性需求: 我可以检测到我的脚本是否正在被Webpack处理?