如何不使用react-scripts运行create-react-app创建的React.js应用？

首先明确：不能直接改成node index.js。因为React项目需要编译JSX语法、处理模块打包、启动带热更新的开发服务器等核心能力，这些都是react-scripts封装好的工具链提供的，直接用node执行入口文件无法完成这些编译和打包步骤。

要完全替换react-scripts，需要手动配置webpack、Babel、测试工具等，具体改造步骤如下：

1. 卸载react-scripts并安装必要依赖 #

先移除react-scripts，再安装构建、编译、测试所需的工具：

npm uninstall react-scripts
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react @babel/preset-env html-webpack-plugin style-loader css-loader jest @testing-library/react @testing-library/jest-dom babel-jest

2. 添加配置文件 #

创建webpack.config.js（核心构建配置） #

在项目根目录新建该文件，配置开发和生产环境的打包规则：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // React项目入口文件
  output: {
    path: path.resolve(__dirname, 'build'), // 生产打包输出目录
    filename: 'bundle.[contenthash].js', // 带哈希值的打包文件名，方便缓存
    clean: true // 打包前清空build目录
  },
  module: {
    rules: [
      // 编译JS/JSX文件
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      // 处理CSS文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // 省略导入时的后缀名
  },
  plugins: [
    // 自动生成HTML并注入打包后的JS文件
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  // 开发服务器配置
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    hot: true, // 热更新
    open: true, // 启动后自动打开浏览器
    port: 3000 // 默认端口和react-scripts一致
  }
};

创建babel.config.js（Babel编译配置） #

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react']
};

3. 改造package.json中的scripts #

替换原有脚本为以下内容：

"scripts": {
  "start": "NODE_ENV=development webpack serve --mode development",
  "build": "NODE_ENV=production webpack --mode production",
  "test": "jest"
}

各脚本说明： #

• start：启动webpack开发服务器，支持热更新，和原react-scripts start功能一致
• build：执行生产环境打包，输出到build目录，替换原react-scripts build
• test：用jest执行测试用例，替换原react-scripts test（需确保测试文件命名符合jest规则，如xxx.test.js）
• eject：直接删除即可，因为我们已经手动配置了所有工具链，无需再暴露react-scripts的内部配置

内容的提问来源于stack exchange，提问作者John Glabb