我正在尝试在 windows 上管理 react 项目的配置,它以前在 mac 上运行。我正在使用yarn build
. 里面package.json
scripts>build
被配置为"rm-rf deployment/static;react-scripts build && mv build deployment/static"
. 由于rm-rf
andmv
命令适用于 Linux,我尝试使用rmdir/del
andmove
代替.. 但它似乎不起作用。我收到错误:Parameter format not correct - "static"
。
在 windows 上配置 package.json
Windows 解决方案 (cmd.exe)
在 Windowsbuild
上通过命令提示符或PowerShell运行的脚本的等效项是:
"scripts": {
"build": "rd /s/q \"deployment/static\" 2> nul & react-scripts build && md \"deployment/static\" && move \"build\" \"deployment/static\""
}
解释:
rm-rf
Windows (cmd.exe)的等效项是rd /s/q
mv
Windows (cmd.exe)的等效项是move
所有目录路径都用转义双引号括起来
\"...\"
。例如;deployment/static
已改写为\"deployment/static\"
.虽然在这种情况下转义双引号不是完全必要的,但当路径可能包含空格或标点符号时,这是一种很好的做法并且有必要这样做。
分号
;
已被替换为单个&
运算符,以确保react-script build
无论初始rd /s/q ...
命令是失败还是成功,部件都可以运行。使用
rd
删除可能不存在的文件夹/路径时,以下错误消息将打印到控制台:该系统找不到指定的路径
为了防止此错误消息可能被打印到控制台,我们将错误消息重定向到
NUL
使用2> nul
部件。- 该
md \"deployment/static\"
部分使用 Windowsmd
命令来创建static
目录 - 这与mkdir
bash 中的命令非常相似。
注意:上述语法在基于nix的操作系统(例如 macOS 和 Linux)上将失败。
跨平台解决方案(Windows/Linux/macOS...)
为了实现跨平台解决方案(即在 Windows、Linux 和 macOS 上成功运行的解决方案),我建议编写两个 Nodejs 实用程序脚本来替代rm -rf
和mv
bash 命令。然后可以通过 npm-script 调用这两个 Nodejs 脚本。
以下步骤描述了如何实现这一点。
安装shelljs,它为Nodejs提供可移植的 Unix shell 命令。为此,请
cd
在您的项目目录中运行以下命令:npm i -D shelljs
创建一个新的 Nodejs 脚本,命名
rm.js
为以下内容:rm.js
const shell = require('shelljs'); const args = process.argv.slice(2); const dir = args[0]; shell.rm('-rf', dir);
将此文件保存在项目目录的根目录中,与
package.json
存储项目的位置处于同一级别。创建另一个
mv.js
使用以下内容命名的 Nodejs 脚本:mv.js
const shell = require('shelljs'); const args = process.argv.slice(2); const src = args[0]; const dest = args[1]; // Check src path has been provided and is valid if (!src || !shell.test('-d', src)) { console.log('\x1b[31m\x1b[40mERR!\x1b[0m src path cannot be found: %s', src); process.exit(1); } // Check dest path has been provided. if (!dest) { console.log('\x1b[31m\x1b[40mERR!\x1b[0m dest path must be provided:'); process.exit(1); } // Make dest directory if necessary. shell.mkdir('-p', dest); // Move the file. shell.mv(src, dest);
还要将此文件保存在项目目录的根目录中,与
package.json
存储项目的位置处于同一级别。然后按如下方式配置您的
build
脚本package.json
:"scripts": { "build": "node rm \"deployment/static\" & react-scripts build && node mv \"build\" \"deployment/static\"" }
笔记
这两个实用程序脚本rm.js
和通过部件读取mv.js
在npm-script
命名中调用build
;node rm ...
和node mv ...
分别。
如果您决定将这两个脚本存储在不同的文件夹而不是项目根目录中(如前面第 2 步和第 3 步中所建议的那样),那么您需要更改文件的路径。例如; 如果它们都保存在一个名为的文件夹中,该文件夹scripts
位于项目目录的根目录中,那么您的build
脚本将更改为:
"scripts": {
"build": "node scripts/rm \"deployment/static\" & react-scripts build && node scripts/mv \"build\" \"deployment/static\""
}
编辑/更新:
另一种跨平台解决方案(最初发布此答案时不可用)是利用shx包,其描述为:
shx
是ShellJS Unix 命令的包装器,为 npm 包脚本中简单的类 Unix、跨平台命令提供简单的解决方案
运行以下命令进行安装
shx
:npm i -D shx
然后
package.json
按如下方式更改您的构建脚本:"scripts": { "build": "shx rm -rf deployment/static & react-scripts build && shx mv build deployment/static" }
该SHX包应该很好地工作; 它们甚至显示rm -rf
在最顶层的 package.json 演示中
对于 Windows:
在客户端文件夹中
},
"scripts": {
"build-win": "react-scripts build && move build ..\\server\\public",
},
这会将文件夹移动到服务器文件夹