reactjs - 在 windows 上配置 package.json

Question

我正在尝试在 windows 上管理 react 项目的配置，它以前在 mac 上运行。我正在使用 yarn build .内package.json scripts>build被配置为 "rm-rf deployment/static;react-scripts build && mv build deployment/static" .自 rm-rf和 mv命令适用于 Linux，我尝试使用 rmdir/del和 move相反......但它似乎不起作用。我收到错误:Parameter format not correct - "static" .

Answer 1

Windows 解决方案 (cmd.exe)

相当于 build在 Windows 上通过命令提示符或 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\" .

虽然在这种情况下转义双引号不是完全必要的，但当路径可能包含空格或标点字符时，这是一种很好的做法并且有必要这样做。

分号 ;已替换为单&运算符(operator)确保react-script build无论初始 rd /s/q ... 是否运行，部分都会运行命令失败或成功。

使用 rd 时，控制台会打印以下错误消息删除可能不存在的文件夹/路径:

The system cannot find the path specified

为了防止此错误消息可能被打印到控制台，我们将错误消息重定向到 NUL使用 2> nul 部分。

md \"deployment/static\"部分使用 Windows md 命令使 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

创建一个名为 rm.js 的新 Nodejs 脚本具有以下内容:

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 is a wrapper around ShellJS Unix commands, providing an easy solution for simple Unix-like, cross-platform commands in npm package scripts

运行以下命令安装 shx :

npm i -D shx

然后在 package.json 中更改您的构建脚本如下:

"scripts": {
  "build": "shx rm -rf deployment/static & react-scripts build && shx mv build deployment/static"
}