如何避免将React项目的压缩构建文件提交至源代码仓库？

针对你遇到的手动复制projectA构建文件到projectB、被迫提交产物到仓库的问题，以下几种方案可以帮你解决：

方案一：用npm脚本自动复制构建产物 #

这是最直接的方案，通过npm钩子和脚本自动完成projectA的构建+产物复制，无需手动操作，同时排除产物文件的提交。

1. 确认目录结构：确保projectA和projectB处于同级目录，比如：

root/
├─ projectA/
└─ projectB/

2. 添加npm脚本：在projectB的package.json中新增以下脚本（根据操作系统调整复制命令）：

"scripts": {
  // 构建projectB前自动构建projectA
  "prebuild": "cd ../projectA && npm install && npm run build",
  // 复制projectA的构建产物到projectB的指定目录
  "copy:assets": "copyfiles -u 1 ../projectA/build/**/* public/projectA-assets/",
  // 完整构建流程：先复制再构建projectB
  "build": "npm run copy:assets && react-scripts build",
  // 启动项目前同样完成构建和复制
  "prestart": "cd ../projectA && npm install && npm run build && npm run copy:assets"
}

• 如果你用的是Windows系统，建议安装跨平台的copyfiles工具（执行npm install copyfiles --save-dev），避免cp命令不兼容的问题。
• 不用copyfiles的话，Windows可以用xcopy /E /I ../projectA/build/* public/projectA-assets/替换copy:assets里的命令。

3. 排除产物文件：在projectB的.gitignore中添加public/projectA-assets/，确保构建产物不会被提交到仓库。

方案二：将projectA作为本地npm依赖 #

把projectA当作本地包引入projectB，依赖管理更规范，无需手动复制文件。

1. 配置projectA的package.json：在projectA的package.json中添加以下字段，指定包名和要发布的文件：

"name": "@your-namespace/projectA",
"version": "1.0.0",
"files": [
  "build/"
],
"main": "build/index.html" // 根据你的实际引用需求调整

2. 本地链接依赖：

• 在projectA目录下执行npm link，将其链接到全局npm包。
• 在projectB目录下执行npm link @your-namespace/projectA，将projectA作为本地依赖安装到projectB中。

3. 引用projectA资源：在projectB的代码中直接通过包名引用，比如在public/index.html中：

<script src="%PUBLIC_URL%/node_modules/@your-namespace/projectA/build/static/js/main.xxx.js"></script>

由于node_modules本来就在.gitignore中，projectA的构建产物不会被提交到仓库。

方案三：自定义Webpack配置自动复制（适用于eject或自定义Webpack的项目） #

如果projectB使用了自定义Webpack配置，可以用copy-webpack-plugin自动复制产物：

1. 安装插件：

npm install copy-webpack-plugin --save-dev

2. 配置Webpack：在webpack.config.js中添加插件配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: '../projectA/build', // projectA构建产物的路径
          to: 'projectA-assets' // 输出到projectB构建目录下的子目录
        }
      ]
    })
  ]
};

同样可以搭配prebuild钩子，在构建projectB前自动构建projectA。

方案四：开发环境代理（仅用于开发阶段） #

如果只是开发时需要用到projectA的内容，可以通过代理跳过构建步骤，直接复用projectA的开发服务：

在projectB的package.json中添加代理配置：

"proxy": "http://localhost:3000" // 假设projectA的开发服务器运行在3000端口

之后在projectB的代码中用根路径引用projectA的资源（比如/static/js/main.xxx.js），开发时会自动代理到projectA的服务器；生产环境仍需用前面的方案完成构建和复制。

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