在尝试使用webpack使用mongoose时会出现大的隐秘错误和警告

Question

我正在使用webpack将es6 isomorphic react应用程序分别编译到客户端和服务器包中.我已经安装了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 | | TODO @ ./~/mongoose/lib/drivers ^./.*$

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

警告在./~/es6-promise/dist/es6-promise.js找不到模块:错误:无法解析/ Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist中的模块'vertx'解决/ Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist中的模块vertx查找/ Users/richie/Code/CreativeFlumeProjects/cf-website/src/Users/richie/Code/CreativeFlumeProjects中的模块/ cf-website/src/vertx不存在(模块作为目录)在/ Users/richie/Code/CreativeFlumeProjects/cf-website/src解析文件/ Users/richie/Code/CreativeFlumeProjects/cf-中解析'file'vertx website/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不存在(模块作为目录)解析/ Users/richie/Code/CreativeFlumeProjects/cf-website/node_module中的'file'vertx s解析文件/ 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依赖的请求是表达式44:18-31依赖的请求是表达式71:19-32依赖的请求是表达式@ ./~/bson/lib/bson/index.js 20:16-29 44:18-31 71:19-32

63:18-42的相关性的所述请求是一个表达式71:20-44的相关性的所述请求是一个表达式78:在./~/require_optional/index.js临界依赖性警告35-67依赖性的请求是表达式@ ./~/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模块解析失败:/ 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("找不到模块'"+ 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)在Object的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)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.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)

我尝试过通过谷歌找到的一些解决方案.将".node"添加到我的resolve.extensions,添加node-loader,以及一些其他配置到节点对象,都无济于事.

Answer 1

处理服务器代码的webpack配置应该有一些附加功能以避免问题.

尝试添加以下内容:

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

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

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

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

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

现在,如果您在浏览器包中收到这些警告/错误,则表示您可能需要/导入仅在浏览器包中的服务器上运行的模块.确保只在服务器上使用的文件中要求它们.或者,有选择地要求它们.如何根据构建类型执行选择性需求可以在这里找到:我可以检测我的脚本是否正由Webpack处理？