node.js - 使用Webpack构建ReactJS项目导致graceful-js报告错误 "can' t解析 'fs'”

Question

我昨晚正在构建我的项目。这是一个使用 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;

Answer 1

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

• 一个供您执行的 Node ，例如 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