如何在npm scripts中正确嵌入Shell命令并解决转义错误？

问题场景 #

原本用于复制src目录下所有HTML文件到dist目录并保留目录结构的Shell命令如下：

find ./src -name '*.html' -exec sh -c 'mkdir -p "./dist/$(dirname "{}")" && cp "{}" "./dist/{}"' \;

将该命令写入package.json的scripts时，因转义方式错误，执行npm run copy-html会报错：find: missing argument to '-exec'。

正确转义方案 #

修正后的package.json配置如下：

"scripts": {
  "copy-html": "find ./src -name '*.html' -exec sh -c 'mkdir -p \"./dist/$(dirname \"{}\")\" && cp \"{}\" \"./dist/{}\"' \\;"
}

关键修正点 #

1. 路径修正：将原尝试中的../dist改为./dist（假设dist与src、package.json处于同一根目录层级，避免指向错误的上级目录）。
2. 双引号转义：在npm scripts的双引号包裹字符串中，内部所有双引号需用\"转义，确保Shell能正确识别命令中的路径和变量。
3. 分号转义：-exec参数的结束分号;需转义为\\;——npm会先解析一次转义，将\\转换为\，最终Shell接收到的是\;，符合find命令的语法要求。

验证 #

执行npm run copy-html后，检查dist目录，应能看到与src完全一致的HTML文件目录结构。

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