在 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-rfandmv命令适用于 Linux，我尝试使用rmdir/delandmove代替.. 但它似乎不起作用。我收到错误：Parameter format not correct - "static"。

Answer 1

Windows 解决方案 (cmd.exe)

在 Windowsbuild上通过命令提示符或PowerShell运行的该脚本的等效项是：

"scripts": {
  "build": "rd /s/q \"deployment/static\" 2> nul & react-scripts build && md \"deployment/static\" && move \"build\" \"deployment/static\""
}

解释：

1. rm-rfWindows (cmd.exe)的等效项是rd /s/q
2. mvWindows (cmd.exe)的等效项是move

3. 所有目录路径都用转义双引号括起来\"...\"。例如;

   deployment/static已改写为\"deployment/static\".

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

4. 分号;已被替换为单个&运算符，以确保react-script build无论初始rd /s/q ...命令是失败还是成功，部件都能运行。

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

   该系统找不到指定的路径

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

6. 该md \"deployment/static\"部分使用 Windowsmd命令来创建static目录 - 这与mkdirbash 中的命令非常相似。

注意：上述语法在基于nix的操作系统（例如 macOS 和 Linux）上将失败。

跨平台解决方案（Windows/Linux/macOS...）

为了实现跨平台解决方案（即在 Windows、Linux 和 macOS 上成功运行的解决方案），我建议编写两个 Nodejs 实用程序脚本来替代rm -rf和mvbash 命令。然后可以通过 npm-script 调用这两个 Nodejs 脚本。

以下步骤描述了如何实现这一点。

1. 安装shelljs，它为Nodejs提供可移植的 Unix shell 命令。为此，请cd在您的项目目录中运行以下命令：

   npm i -D shelljs
   

2. 创建一个名为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存储项目的位置处于同一级别。

3. 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存储项目的位置处于同一级别。

4. 然后按如下方式配置您的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、跨平台命令提供简单的解决方案

1. 运行以下命令进行安装shx：

   npm i -D shx
   

2. 然后package.json按如下方式更改您的构建脚本：

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

Answer 2

正是因为这个原因，我使用rimraf 。全局安装

    npm i -g rimraf

并按如下方式更新您的脚本

    "rimraf deployment/static;react-scripts build && mv build deployment/static"