### 前言

> 前端工程化的快速发展以及 Nodejs 的日常使用，使得前端开发人员在工作中时常会接触到基础脚本的编写来实现一些功能。

> 但是复杂的Shell脚本命令、不好维护的语法都会导致脚本的编写变的比较困难。

> 针对前端人员，有没有可以直接使用Javascript就可以进行脚本命令编写的方式呢？答案是肯定的。


ZX 是由Google于2021年5月份开源的脚本工具，仅用半年时间就在Github获得了26.7K点赞数量。

ZX 提供了一种使用JavaScript编写Shell脚本的思路，它基于 Node.js 的 child_process 模块做了更方便的封装，使得我们可以更高效愉快的编写shell脚本。

官方代码库：[zx](https://github.com/google/zx)

## 对比

使用 JavaScript 的思路编写脚本命令，目前 ShellJs 已经做的很好。

跟 ZX 的思路一致，Shelljs 也是针对 child_process 做的封装，提供了方便的语法使用。

下面看一段代码对比：

> Shelljs 实现文件夹操作 （demo.js ）:


```javascript
var shell = require('shelljs');

if (!shell.which('git')) {
  shell.echo('Sorry, this script requires git');
  shell.exit(1);
}

shell.rm('-rf', 'dist/');
shell.mkdir('dist')
shell.cp('-R', 'index.html', 'dist/');
shell.cd('dist');
```

> ZX 实现文件夹操作（demo.mjs）：


```shell
#!/usr/bin/env zx

let distDir = 'dist'

await $`rm -rf ${distDir}`
await $`mkdir ${distDir}`
await $`cp -R index.html ${distDir}`
await $`cd ${distDir}`
```

通过对比，我们可以看到，ZX同样功能的实现，比 Shelljs 更加整洁且更加符合shell脚本的编写形式。

值得注意的是：

Shelljs 编写的脚本，仍然以 .js 结尾，意味着如果需要执行上述脚本命令，需要：

1.  创建 `package.json` 
2.  工作区内安装 `npm i shelljs` 
3.  以 `node demo.js` 命名执行命名文件 

对于 ZX 编写的脚本，以 .mjs 结尾，全局安装一次 `npm i zx -g` 后，所有的脚本可以按照 shell 脚本的方式直接执行：

1. `chmod +x demo.mjs`
1. `./demo.mjs`

## 基础语法

### `$command`

ZX 会使用 `child_process` 的 `spawn` 执行给定的字符串。

字符串内可以直接使用`${}`的方式进行变量赋值

```shell
#!/usr/bin/env zx

let name = 'foo & bar'
await $`mkdir ${name}`
```

还可以通过数组的方式设置参数

```shell
#!/usr/bin/env zx

let flags = [
  '--oneline',
  '--decorate',
  '--color',
]
await $`git log ${flags}`
```

可以通过 try catch 来处理命令错误

```shell
#!/usr/bin/env zx

try {
  await $`exit 1`
} catch (p) {
  console.log(`Exit code: ${p.exitCode}`)
  console.log(`Error: ${p.stderr}`)
}
```

### `ProcessPromise`

ZX 每个命令的执行，都会返回 `ProcessPromise`类型的数据，如下：

```typescript
class ProcessPromise<T> extends Promise<T> {
  readonly stdin: Writable
  readonly stdout: Readable
  readonly stderr: Readable
  readonly exitCode: Promise<number>
  pipe(dest): ProcessPromise<T>
  kill(signal = 'SIGTERM'): Promise<void>
}
```

可以使用 `pipe()` 函数来进行数据的流式处理。

```shell
#!/usr/bin/env zx

await $`echo "Hello, stdout!"`.pipe(fs.createWriteStream('./output.txt'))
```

## 函数封装

ZX 封装了一些常用的方法，可以快速使用。

#### `cd()`

更改工作目录

```shell
#!/usr/bin/env zx

cd('/tmp')
await $`pwd` // outputs /tmp
```

### `fetch()`

node-fetch 包的封装，请求网络资源

```shell
#!/usr/bin/env zx

let resp = await fetch('http://wttr.in')
if (resp.ok) {
  console.log(await resp.text())
}
```

### `question()`

[readline](https://nodejs.org/api/readline.html) 的封装，可以获取用户输入

```shell
#!/usr/bin/env zx

let bear = await question('What kind of bear is best? ')
let token = await question('Choose env variable: ', {
  choices: Object.keys(process.env)
})
```

### `sleep()`

`setTimeout`的函数封装

```
#!/usr/bin/env zx

await sleep(1000)
```

## 内置包封装

ZX 同时内置了常用的一些包，无需再次引入即可使用

### [chalk](https://www.npmjs.com/package/chalk) 包

可以设置输出字体颜色

```shell
#!/usr/bin/env zx

console.log(chalk.blue('Hello world!'))
```

### `fs` 包

针对 [fs-extra](https://www.npmjs.com/package/fs-extra) 包进行封装，处理文件操作

```shell
#!/usr/bin/env zx

let content = await fs.readFile('./package.json')
```

### 其他可用包

其他还有 `OS` 、`path` 以及``minimist``等包的内置，可参看官方文档

## 案例使用

下面我们使用 ZX 来实现快速初始化 `package.json`的shell脚本操作

```shell
#!/usr/bin/env zx


let {stdin, stdout} = $`npm init`

let put = text => {
  stdin.write(text)
  process.stdout.write(text)
}

for await (let chunk of stdout) {
  if (chunk.includes('package name:')) put('test\n')
  if (chunk.includes('version:')) put('1.0.0\n')
  if (chunk.includes('description:')) put('My test package\n')
  if (chunk.includes('entry point:')) put('index.mjs\n')
  if (chunk.includes('test command:')) put('test.mjs\n')
  if (chunk.includes('git repository:')) put('my-org/repo\n')
  if (chunk.includes('keywords:')) put('foo, bar\n')
  if (chunk.includes('author:')) put('Anton Medvedev\n')
  if (chunk.includes('license:')) put('MIT\n')
  if (chunk.includes('Is this OK?')) put('yes\n')
}
```


ZX 提供了一种使用JavaScript编写Shell脚本的思路，它基于 Node.js 的 child_process 模块做了更方便的封装，使得我们可以更高效愉快的编写shell脚本。

ZX脚本工具介绍