如何通过命令参数实现React自定义构建，仅打包指定子目录？

步骤1：配置命令脚本与环境变量 #

先安装跨环境变量工具cross-env（兼容Windows/macOS/Linux）：

npm install cross-env --save-dev

修改package.json中的scripts字段，添加针对不同目录的构建命令：

"scripts": {
  "start:tree1": "cross-env TARGET_TREE=file-tree-1 react-scripts start",
  "build:tree1": "cross-env TARGET_TREE=file-tree-1 react-scripts build",
  "start:tree2": "cross-env TARGET_TREE=file-tree-2 react-scripts start",
  "build:tree2": "cross-env TARGET_TREE=file-tree-2 react-scripts build"
}

步骤2：调整项目入口逻辑 #

修改项目的主入口文件（通常是src/index.js），根据环境变量动态导入对应目录的根组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

// 获取目标目录，默认值可按需设置
const targetTree = process.env.TARGET_TREE || 'file-tree-1';

// 动态导入对应目录的根组件
let AppComponent;
switch(targetTree) {
  case 'file-tree-1':
    AppComponent = require('./App/file-tree-1').default;
    break;
  case 'file-tree-2':
    AppComponent = require('./App/file-tree-2').default;
    break;
  default:
    throw new Error(`未知目标目录：${targetTree}`);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AppComponent />
  </React.StrictMode>
);

注意：确保file-tree-1和file-tree-2目录下都有自己的入口文件（比如index.js），并导出根组件。

步骤3：精细控制打包范围（可选） #

如果需要严格限制仅打包目标目录的文件（进一步减小体积），用craco覆盖create-react-app的默认webpack配置：

1. 安装craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，根据环境变量修改webpack配置：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const targetTree = process.env.TARGET_TREE;
      if (targetTree) {
        // 修改webpack入口为目标目录的主文件
        webpackConfig.entry = path.resolve(__dirname, `src/App/${targetTree}/index.js`);
        
        // 让webpack优先解析目标目录的模块，避免打包无关代码
        webpackConfig.resolve.modules.unshift(
          path.resolve(__dirname, `src/App/${targetTree}`)
        );

        // 可选：修改打包输出目录，区分不同构建结果
        webpackConfig.output.path = path.resolve(__dirname, `build/${targetTree}`);
      }
      return webpackConfig;
    }
  }
};

3. 更新package.json的脚本，替换react-scripts为craco：

"scripts": {
  "start:tree1": "cross-env TARGET_TREE=file-tree-1 craco start",
  "build:tree1": "cross-env TARGET_TREE=file-tree-1 craco build",
  "start:tree2": "cross-env TARGET_TREE=file-tree-2 craco start",
  "build:tree2": "cross-env TARGET_TREE=file-tree-2 craco build"
}

步骤4：测试使用 #

• 启动file-tree-1的开发服务：npm run start:tree1
• 打包file-tree-1的生产代码：npm run build:tree1
• 启动file-tree-2的开发服务：npm run start:tree2
• 打包file-tree-2的生产代码：npm run build:tree2

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