使用webpack和mongoose时出现大量的加密错误和警告

Question

使用webpack和mongoose时出现大量的加密错误和警告

8

我正在使用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模块解析失败： /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模块未找到：错误：无法解析模块'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中解析'file' 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中查找模块 /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx不存在（模块作为目录）在/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules中解析'file' vertx 解析文件 /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

警告：./〜/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模块解析失败： /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md 第1行：意外的标记ILLEGAL，您可能需要一个适当的加载程序来处理此文件类型。 | # require_optional | Work around the problem 我们在node.js中没有optionalPeerDependencies概念使选择性包含本机模块变得麻烦| @ ./〜/require_optional

我已经尝试了通过 Google 找到的许多解决方案，包括将".node"添加到我的 resolve.extensions，添加 node-loader，以及对 node 对象进行一些额外的配置，但都没有成功。

- ThinkingInBits

尝试在js加载器中排除node_modules，并在服务器端配置中设置target: "node"。 - Bob Sponge

能否分享一下你的配置文件？ - John William Domingo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ambroos · Accepted Answer

处理服务器代码的Webpack配置应该有一些额外的设置来避免问题。

尝试添加以下内容：

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

将 target 设置为 node，可以使 webpack 意识到您正在工作于 Node 环境，而不是浏览器。添加 libraryTarget: 'commonjs' 将使 webpack 使用简单的 require 调用从外部库获取函数。

然后在 externals 中的正则表达式中发生了一个重要的事情。它基本上排除了任何使用非相对路径的 require 语句从捆绑包中。这样，如果您执行 import 'react'; 它就不会被 webpack 打包，但如果您执行 import './components/MyComponent.js';，它将会被打包。

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

为什么要这样做？因为 Node 使用许多本地模块，不能正确地打包。它们特定于您特定操作系统上的 Node 版本，您不能只将其整合到 Javascript 捆绑包中。您希望您自己的代码通过 webpack 进行处理，并且所有来自 node_modules 的内容都像任何 Node 项目一样被访问。

现在，如果您在浏览器捆绑包中遇到这些警告/错误，那么这意味着您可能会要求/导入仅在服务器上工作的模块。请确保只在仅用于服务器的文件中要求它们。或者有选择地引入它们。如何根据构建类型进行有选择的 require 可以在此处找到：我可以检测到我的脚本是否正在被 Webpack 处理吗？