如何在React项目package.json中链式执行css:watch与babel

我来帮你搞定这个问题！你的命令主要有两个问题：语法错误导致babel没被识别，还有监听命令的执行方式不对（串行的话watch-css会卡住后续命令）。

解决方案步骤 #

首先，先安装npm-run-all这个工具，它能帮我们跨平台并行执行多个npm脚本，避免系统差异问题：

npm install --save-dev npm-run-all

然后修改你的package.json里的scripts部分，调整成这样：

"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o ./src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build-js": "babel --source-maps inline -d dist/ src/",
"watch-js": "npm run build-js -- --watch",
"build": "npm run build-css && npm run build-js",
"build:watch": "npm-run-all --parallel watch-css watch-js"

修改原因说明 #

• 你原来的build命令存在语法错误（引号未闭合），而且把watch-css和babel命令直接拼接在一起，系统会把它当成一个不存在的命令执行，自然不会运行babel。
• watch-css是持续运行的监听进程，如果用&&串行执行，它会一直占用终端进程，后面的babel命令永远得不到执行机会。用npm-run-all --parallel可以让两个监听任务同时启动，互不干扰。
• 把JS的构建和监听拆成单独的脚本，结构更清晰，也方便你单独测试CSS或JS的构建流程。

现在运行npm run build:watch，就能同时监听CSS文件变化自动编译，以及JS文件变化自动用babel编译啦！

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