zx.js入门 - nodejs - 前端 - 技术设计

背景

8月5日，谷歌开源了一款工具，受到了大家的欢迎，到目前这个项目已经收获了22.3k的点赞，很多小伙伴都反馈这款工具很好用。

zx 是一个更方便、更友好地帮助开发者写脚本的工具

项目用法

如果你对一些 linux 或者 window 等平台的命令行比较熟悉，并且会一些 JavaScript 的语法，那么使用这个工具就可以得心应手。比如作为一个前端开发者，我想要使用命令行新建一个前端的项目并且运行它，我们可以这么做。

1.安装 node.js

从 node.js 官网下载版本大于等于 14.8.0 版本

2.安装 zx 工具

因为 node.js 自带 npm 包管理工具，可以使用 npm 指令进行 zx 的安装:

// 全局安装 zx
npm install -g zx

4.安装 vue-cli 工具

因为要创建一个前端 vue 项目，我们需要安装 vue-cli 脚手架工具：

npm install -g vue-cli

3.编写 .mjs文件

我们需要书写一个 .mjs 文件。

createVueApp.mjs

#!/usr/bin/env zx
await $`vue create vue-demo`
await $`cd vue-demo`
await $`npm run dev`

4.运行 .mjs 文件

通过 zx 工具运行文件，执行脚本

zx createVueApp.mjs

项目效果

可以看出，它会自动执行文件里面的脚本，对于一些比较固定的指令，我们可以把它写在文件里面，下次要是有类似操作，只需要跑一下脚本即可。

项目功能

项目提供了还多工具

$`指令` 
// 创建一个文件
let name = 'test'
await $`mkdir ${name}`
// 进行一些 git 指令的操作
let flags = [
  '--oneline',
  '--decorate',
  '--color',
]
await $`git log ${flags}`
// 程序要异常退出
try {
  await $`exit 1`
} catch (p) {
  console.log(`Exit code: ${p.exitCode}`)
  console.log(`Error: ${p.stderr}`)
}


// 函数
cd()
//切换到 /tmp
cd('/tmp')
await $`pwd`
fetch()
// 请求资源
let resp = await fetch('https://www.baidu.com')
if (resp.ok) {
  console.log(await resp.text())
}
...

项目地址

https://github.com/google/zx

背景