node.js - npm build 如何通过变量或脚本更改 package.json - 主页值

Question

我使用 create-react-app 创建我的应用程序，并使用 npm run build 构建生产包。

我需要将应用程序放在不同客户的站点上，每个客户都将应用程序放在不同的子文件夹中。

例如
客户端 A:https://clientA.com/myApp
客户端 B:https://clientB.com/UAT/myApp
客户端 C:https://clientC.com/webApps/myApp

每次构建包时，对于不同的子文件夹，我需要修改package.json中的homepage值，构建包并重复此步骤多次次。

我的手动步骤如下:

1. 修改 "homepage": "myApp" > npm run build > 保存构建文件夹以进行部署
2. 修改 "homepage": "/UAT/myApp" > npm run build > 保存构建文件夹用于部署
3. 修改 "homepage": "/webApps/myApp" > npm run build > 保存构建文件夹用于部署
4. 不断重复以上操作......

如何改善这种情况？我怎样才能构建一次以适应所有不同的路径？
例如，我可以在 homepage 值中使用变量并将其设置在环境变量中吗？

或者，我可以写一个脚本来做一些事情吗？我希望简化这个编译步骤，理想情况下只执行一次构建或构建脚本。

感谢任何帮助或建议。

Answer 1

构建时可以使用PUBLIC_URL 环境变量。构建命令如下所示:

PUBLIC_URL=https://clientA.com/myApp npm run build

您可以创建 npm 脚本来简化它，例如:

{
  ...
  "scripts": {
    "build-clientA": "PUBLIC_URL=https://clientA.com/myApp react-scripts build",
    "build-clientB": "PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build",
  }
  ...
}

如果你想执行一个命令来为所有客户端构建，构建和移动 build 文件夹的简单 bash 脚本应该可以正常工作，它看起来像:

PUBLIC_URL=https://clientA.com/myApp react-scripts build && mv build clientA
PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build && mv build clientB