使用 Webpack 构建 ReactJS 项目导致优雅的 js 报告错误“无法解析 'fs'”答案

【问题标题】：Building ReactJS Project with Webpack causes graceful-js to report error "can't resolve 'fs'"使用 Webpack 构建 ReactJS 项目导致优雅的 js 报告错误“无法解析 'fs'”
【发布时间】：2018-04-15 10:18:24
【问题描述】：

我昨晚正在构建我的项目。这是一个使用 webpack 构建 React 可分发前端代码的 Node 项目。完成后，我关闭了电脑。今天早上我打开了我的电脑，现在，我知道没有代码或配置更改，我收到错误，指出缺少某种依赖项的依赖项。

ERROR in ./~/fsevents/~/graceful-fs/fs.js
Module not found: Error: Can't resolve 'fs' in '/Users/stevenkitzes/Documents/Career Dev/C2 to A1/react-lnl/demo/react-lnl/node_modules/fsevents/node_modules/graceful-fs'
 @ ./~/fsevents/~/graceful-fs/fs.js 3:9-22
 @ ./~/fsevents/~/graceful-fs/graceful-fs.js
 @ ./~/fsevents/~/fstream/lib/reader.js
 @ ./~/fsevents/~/fstream/fstream.js
 @ ./~/fsevents/~/tar-pack/index.js
 @ ./~/fsevents/~/node-pre-gyp/lib/package.js
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/watchpack/lib/DirectoryWatcher.js
 @ ./~/watchpack/lib/watcherManager.js
 @ ./~/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib ^.*$
 @ (webpack)/lib/webpack.js
 @ ./jsx-map/jsx-build.js

这是我的 webpack 配置文件：

var webpack = require('webpack');
var path = require('path');

var APP_DIR = path.resolve(__dirname, '.');

var plugins = [];

var config = {
  entry: APP_DIR + '/jsx.js',
  output: {
    path: APP_DIR,
    filename: 'jsx-out.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        include: APP_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react']
        }
      }
    ]
  },
  plugins: plugins
};

module.exports = config;

【问题讨论】：

fs 是一个节点内置模块。您可以尝试运行node -e "require('fs')"，如果出现错误，您可能是节点安装有问题，您需要重新安装它。
没有错误，在我的其他 Node 项目中也没有问题。这就是为什么我很困惑！ :(
也许可以尝试删除node_modules 并使用npm install 重新安装。
您似乎正试图在您的应用中包含构建脚本。您不能捆绑需要内置节点的文件（至少对于浏览器，webpack 的默认目标）。您的意思是包含./jsx-map/jsx-build.js 吗？如果有，它的内容是什么？

标签： node.js reactjs webpack

【解决方案1】：

听起来您可能正在尝试将服务器端（节点）和客户端（反应的东西）与 webpack 捆绑在一起。如果是这样，您需要单独捆绑它们以创建 2 个不同的捆绑文件。

一个供您执行的节点，例如node bundle-server.js（假设您的服务器端包生成为“bundle-server.js”）
另一个用于包含在您的前端 html 代码中，例如 <script src='./bundle-client.js'></script>（假设您的客户端包生成为“bundle-client.js”）。

具体来说，您需要在 webpack 配置文件中设置选项，使其具有两个“输出”和两个“目标”，一个用于服务器端，另一个用于客户端。

关于用webpack做客户端和服务端捆绑的细节，可以参考https://medium.com/code-oil/webpack-javascript-bundling-for-both-front-end-and-back-end-b95f1b429810

【讨论】：