如何在package.json中为create-react-app构建追加链式自定义脚本

分号链式配置失败的核心原因 #

之前尝试用分号;做命令衔接报错，本质是分号的跨平台兼容性问题：

• 分号仅在类Unix系统的Shell（bash/zsh）中是合法的命令分隔符，代表“无论前序命令执行成败，都继续执行下一条命令”
• Windows环境下CRA默认通过cmd.exe执行npm脚本，cmd并不识别分号作为命令分隔的语法，会把带分号的整段字符串当成单个命令解析，最终触发“不是内部或外部命令”的报错

两种可靠的配置方式 #

1. 借助npm内置生命周期钩子（推荐） #

npm原生提供pre/post自动生命周期机制，完全不需要手写命令分隔符，跨平台无兼容问题：
只要在package.json的scripts块中新增postbuild字段，npm执行完build命令后，会自动触发postbuild对应的脚本，原有的CRA构建逻辑完全不需要改动，示例配置：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "node scripts/adjust-build-output.js",
    "test": "react-scripts test"
  }
}

这种方式的优势：

• 不改动CRA原生的build命令逻辑，避免后续升级CRA版本时出现兼容问题
• 天然跨平台，不需要考虑不同操作系统的Shell语法差异
• 脚本职责拆分清晰，可读性更强

补充说明：postbuild钩子会在build命令执行完成后自动触发，无论build命令执行成功或失败；如果需要在构建失败时跳过产物调整逻辑，只需在自定义调整脚本开头加简单判断（比如检查build目录是否存在核心产物文件）即可。

2. 使用逻辑与&&做命令衔接 #

如果更倾向于把后续调整逻辑和build命令写在同一条脚本里，可以使用&&替代之前的分号做衔接，示例配置：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && node scripts/adjust-build-output.js",
    "test": "react-scripts test"
  }
}

这种方式的执行逻辑：只有前序的react-scripts build执行成功（退出码为0，构建无报错）时，才会触发后面的产物调整脚本；如果构建本身失败，后续脚本会直接跳过，避免误操作空的构建目录，且&&是所有平台Shell都识别的语法，不会出现之前分号的报错问题。

注意事项 #

• 不建议直接用单个&作为跨平台命令分隔符，因为&在类Unix Shell中代表后台执行任务，和Windows中“顺序执行命令”的语义不一致，容易出现非预期问题
• 产物调整脚本可以直接读取CRA默认输出的build目录下的文件，不需要额外传递路径参数

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