在前端开发过程中，JavaScript、CSS 和其他文件通常会被压缩和混淆，以减小文件大小和提高网站加载速度。然而，这会让调试和错误定位变得困难，因为生产环境中的代码难以阅读和理解。

Sourcemap（源代码映射）用于将生产环境中的压缩代码映射回原始的源代码。

## Sourcemap 生产类型

在 webpack中，Sourcemap的生成可以使用如下方式的组合：

|关键字|含义|特点|
|:----:|:----:|:----:|
|source-map|产生.map 文件|定位信息最全，但也.map 文件最大，效率最低|
|eval|使用 eval 包裹模块代码|利用字符串可缓存从而提效|
|cheap|不包含列信息， 也不包含 loader 的 sourcemap|错误信息只会定义到行，而不会定义到列, 精准度降低换取文件内容的缩小|
|module|包含 loader 的 sourcemap,否则无法定义源文件|会保留 loader 处理前后的文件信息映射,解决无法定位到 loader 处理前的源代码问题|
|inline|将.map 作为 DataURI 嵌入，不单独生成.map 文件|不单独生成.map 文件, 减少文件数|

## Sourcemap 具体字段含义

|字段|含义|
|:----:|:----:|
|version|Source map 的版本，目前为 3|
|file|转换后的文件名|
|sourceRoot|转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空|
|sources|转换前的文件,该项是一个数组,表示可能存在多个文件合并|
|names|转换前的所有变量名和属性名|
|mappings|记录位置信息的字符串|

## SourceMap 的具体使用方式

### 开发环境

我们在开发环境对 sourceMap 的要求是：快（eval），信息全（module），且由于此时代码未压缩，我们并不那么在意代码列信息(cheap),

所以开发环境比较推荐配置：`devtool: cheap-module-eval-source-map`

### 生产环境

一般情况下，我们并不希望任何人都可以在浏览器直接看到我们未编译的源码，

所以我们不应该直接提供 sourceMap 给浏览器。但我们又需要 sourceMap 来定位我们的错误信息，

一方面 webpack 会生成 sourcemap 文件以提供给错误收集工具比如 sentry，另一方面又不会为 bundle 添加引用注释，以避免浏览器使用。

这时我们可以设置: `devtool: hidden-source-map`

### 浏览器Sourcemap的关联

在webpack或者vite等工具打包后，生产的压缩后的文件通常还包含一个注释，指向对应的 sourcemap 文件

`//# sourceMappingURL=main.min.js.map`

当浏览器的开发者工具检测到这个注释时，它会自动加载 sourcemap 文件，并在调试时显示原始的未压缩代码。

这样，当你在浏览器的开发者工具中设置断点、查看堆栈跟踪或查看日志时，你将看到原始的、易于阅读的代码，而不是压缩后的代码。

### 自主解析Sourcemap并定位代码位置

如上面所述， 在生产模式下，不会把 `sourcemap` 上传到服务内，此时在报错排查时，就需要自主解析 `sourcemap` 文件并定位原始代码位置。

如编译后的文件报错如下：

```text
index-47f85c64.js:1 ReferenceError: a is not defined
    at ru (index-47f85c64.js:5:22938)
    at n (index-47f85c64.js:5:23048)
    at Ye (index-47f85c64.js:1:12663)
    at Re (index-47f85c64.js:1:12741)
    at HTMLButtonElement.n (index-47f85c64.js:1:49626)
```

此时就可以对相应的 `sourcemap` 文件 `index-47f85c64.js.map` 进行解析，定位原始代码位置：

可以使用 `source-map`库进行 `sourcemap` 文件的解析操作。

```js
// 库的方式使用
import { SourceMapConsumer }  from 'source-map'

await SourceMapConsumer.with(rawSourceMap, null, consumer => {
  
  // 传入编译后的报错行列号，解析出原始文件信息，包括（原始文件名，原始代码行，原始代码列）
  const sourceInfo = consumer.originalPositionFor({
    line: 1,
    column: 9744
  })

  console.log('infos ===>>', sourceInfo);

  // 传入原始代码文件名，可以获取原始代码
  const content = consumer.sourceContentFor(sourceInfo.source)
  console.log('---->>>>', content);
});
```

> 需要注意的是：如果需要在浏览器内使用此库，需要引入对应的wasm文件库进行支持

```html
<script src="https://unpkg.com/source-map@0.7.3/dist/source-map.js"></script>
<script>
    sourceMap.SourceMapConsumer.initialize({
        "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"
    });
</script>
```

### 拓展思考

在公司内部一般都会有相应的日志监控系统进行错误收集，所以除了手动解析对应的map文件外，可以从工程化层面进行错误信息的自动关联：

- 开发 webpack 或者 vite 相应的插件，在生产环境打包时，针对 `sourcemap` 文件进行处理并上传
  - 插件内配置项目信息，用于Sourcemap上传后的项目关联
  - 插件内配置版本信息，项目错误上报也应配置版本信息，用于map的关联
- 日志监控系统内接口上传的Sourcemap文件进行存储
- 用户查看错误日志时，进行Sourcemap的关联，并展示原始代码信息

注：对于错误堆栈的解析，可以使用 `error-stack-parser` 这个库进行解析

### 相关文章

可以继续阅读下面这个文章进行了解更详细的sourcemap相关知识： [SourceMap 与前端异常监控](https://mp.weixin.qq.com/s/BbvJ-OfcS7Sa-e0Zq6iF1w)

在前端开发过程中，JavaScript、CSS 和其他文件通常会被压缩和混淆，以减小文件大小和提高网站加载速度。然而，这会让调试和错误定位变得困难，因为生产环境中的代码难以阅读和理解。

Sourcemap（源代码映射）用于将生产环境中的压缩代码映射回原始的源代码

sourcemap的使用与解析

自主解析Sourcemap并定位代码位置

## 简介

最新 Chrome 浏览器可以在用户主动触发下，基于 `FileSystemHandle` API进行文件的读取和修改操作。

注意：此类API只能在 https 下才可支持

兼容性情况参看：[can i use](https://caniuse.com/?search=FileSystemHandle )

## 打开文件 showDirectoryPicker

使用此方法可以打开目录选择文件夹，如果只选择单个文件，可以使用 `showOpenFilePicker`.

此类方法返回的是个`promise`对象，所以需要使用 `async/await`进行结果处理。

可以使用对应的API进行特定文件的指定

```js
types: [
  {
    description: "Images",
    accept: {
      "image/*": [".png", ".gif", ".jpeg", ".jpg"],
    },
  },
],
```

API使用说明: [showOpenFilePicker](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showOpenFilePicker)

## 文件操作 FileSystemHandle

使用上述API选择文件之后，会返回对应的`FileSystemFileHandle`或者`FileSystemDirectoryHandle`

`FileSystemFileHandle`可以通过 `getFile()` 或者 `createWritable()` 方法进行文件的读取和保存。

```js
// 读取文件
    function readFile(filehandle){
      return new Promise(async (resolve, reject) => {
        try {
          const file = await filehandle.getFile();
          const reader = new FileReader();
          reader.onload = () => {
            resolve(reader.result)
          };
          reader.readAsText(file); 
        } catch (error) {
          reject(error)
        }
      })
    }

    // 保存文件
    async function saveFile(fileHandle, text){
      // 创建一个可写流
      const writable = await fileHandle.createWritable();
      // 写入数据
      await writable.write(text);

      // 关闭流
      await writable.close();
    }
```

`FileSystemDirectoryHandle` 可以通过 `entries()` 获取所有文件（包含dir&file）的名称和handle对象，此时可以递归获取目录

```js
// 递归获取文件目录树
    async function getFilesRecursively(handle) {
      let curData = []
      for await (const [name, fileHandle] of handle.entries()) {
        let curInfo = { label: name, file: null, children: [] }
        if (fileHandle.kind == 'file') {
          // 文件
          curInfo.file = fileHandle
        } else if (fileHandle.kind == 'directory' && !name.startsWith('.')) {
          curInfo.children = await getFilesRecursively(fileHandle)
        }
        curData.push(curInfo)
      }
      return curData
    }
```

## 源码地址
[chrome-file-list](https://github.com/zu1662/generalNote/blob/master/chrome-file-api/chrome-file-list.html)


本文介绍在浏览器环境下，基于 FileSystemHandle API进行文件的读取和修改的方法以及实现代码。

浏览器读取本地文件

日常工作中，我们接触过很多脚手架，例如：vue-cli , create-react-app等。
而在一些大厂的工作流程中，脚手架扮演着非常重要的工具角色，从项目创建到构建的发布都可以使用本地脚手架工具完成。

本文将以一个简单的demo，手把手教你脚手架原理，构建自己的超简单脚手架~~

## 控制台命令原理
为什么我们在控制台输入 `vue create vue-test`之后，会执行对应的命令呢？有没有想过这个问题？
![yuque_mind.jpeg](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/0VlnmgFwZFT7dFsBOwtK/yuque_mind.jpeg)

可以看到，`vue`这个命令实际上是会在环境变量内找到对应的执行文件，执行文件会指向实际链接的文件，然后去执行指定的文件。

### 安装包时，为什么会注册命令
> 使用 `vue`命令前，我们需要先进行全局安装：`npm i -g @vue/cli`


下载完成后，`npm`会根据`package.json`下的`bin`字段设置对应的软链接
文件前面的`l`代表是软连接
也就是执行`vue`命令时，会执行`*/bin/vue.js`文件
![image.png](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/nmkJDoTqWYpTRNFHvoNe/image.png)
![image (1).png](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/CNHmKRUTJRw6P1kPdL1d/image%20%281%29.png)
### 为什么可以执行 js 文件
我们知道`js`文件，是需要`node`执行的，那么`vue.js`是一个文件，为什么可以进行自动运行呢？
可以做一个小实验：

- 创建一个 `test.js`的文件，并写入 `console.log('Hello Test!!')`
- 使用 `node`执行：`node ./test.js`，正常输出 `Hello Test!!`

- 设置 `test.js`文件可执行：`chmod 777 ./test.js`
- 在`test.js`文件顶部加入：`#!/usr/bin/env node`
- 直接执行`test.js`文件，发现会输出：`Hello Test!!`

我们看到，只需要头部设置`#!/usr/bin/env node`就可以直接运行当前文件。
这是因为上述描述会指定运行时，找到 `node`的环境变量地址，然后以`node`运行本文件
即如下方式：`/usr/local/bin/node ./test.js`

## 搭建简单脚手架
原理清楚了，下面我们构建自己脚手架：

1. 创建`zuci-test`项目，目录结构如下：
```latex
├── bin
│   └── index.js 
|——package.json
|
```

2. 我们在`package.json`内增加`bin`配置项：
```json
"bin": {
  "zuci": "bin/index.js"
},
```

3. 修改 `index.js`文件如下
```json
#!/usr/bin/env node

console.log('Welcome zuci-test!!!')
```
OK！大功告成。
你只需要把它发布到 `npm`。全局安装后，既可以使用 `zuci`命令了。
这个脚手架命令相当简单，但是我们所用的所有脚手架核心既是如此。
我们可以在此基础上增加：命令解析，命令提示，日志打印，控制台文字着色，网络请求等

## 附加：本地调试
开发脚手架过程中，不可能随时发布进行测试。如果希望本地开发时调试脚手架命令，如何操作呢？
下面我们了解下`npm link`的使用。

`npm link` 可以将`npm`模块链接到对应的运行项目中去，方便地对模块进行调试和测试。

### 进入 项目目录，执行 `npm link`
会根据package.json上的配置，被链接到全局，路径是`{prefix}/lib/node_modules/<package>`
我们可以使用`npm config get prefix`命令获取到prefix的值。
此时，如果`package.json`内配置了`bin`参数，即可以使用对应的命令
使用 `ll {prefix}/lib/node_modules/`可以看到，路径被软连接到当前项目地址：
![image (2).png](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/LSpmQnL3ckyTN5xlX82q/image%20%282%29.png)
### `npm unlink`接触链接
如果要解除上述软链接，在项目目录下，可以使用 `npm unlink -g`
此时解除全局的软链接

### 依赖模块 `link`
正常开发过程中，我们会对项目进行分包，如何进行调试？

1. 创建模块项目`zuci-test-lib`,结构如下：
```latex
├── lib
│   └── index.js 
|——package.json
|
```
此时，`package.json`内，`main`配置设置为：`lib/index.js`

2. 执行`link`操作

在`zuci-test-lib`下执行`npm link`，将会把本包在全局添加软链接

3. 回到`zuci-test`目录，链接模块

在`zuci-test`下执行链接操作：`npm link zuci-test-lib`
此时就可以链接模块包，按照正常npm包方式引用和使用

4. 在`zuci-test`目录，使用 `npm unlink zuci-test-lib`可以解除包链接

## 源码地址
[https://github.com/zu1662/zuci-demo](https://github.com/zu1662/zuci-demo)


本文将以一个简单的demo，手把手教你脚手架原理，构建自己的超简单脚手架~~

教你构建自己简单脚手架

## 前言

日常在使用JS的正则表达式时，总是有很多方面的参数或者语法记不清楚。现在通过分类整理，来强化自己对其的记忆和理解。

## JS正则的基本语法

### 简单的正则语法
   `/正则表达式主体/修饰符(可选)`

   > `var regex = /xyz/i;`

### 使用`RegExp`对象进行创建正则
   
   `new RegExp('正则表达式主体', '修饰符')`

   > `var regex = new RegExp('xyz', 'i');`

其中，修饰符的列表如下：
|修饰符|作用|
|------|:-----:|
|i|匹配时，大小写不敏感|
|g|执行全局匹配，会查找所有匹配因素|
|m|执行多行匹配|
|u (es6新增)|“Unicode 模式”，用来正确处理大于\uFFFF的，四个字节的 Unicode 字符|
|y (es6新增)|'粘连'修饰符，类似于'g'，不过其下次的匹配必须从前一次匹配的末尾进行|

## 正则表达式规则概述

### 元字符
|元字符|描述|
|------|:-----:|
|.|任意一个字符，除了换行符（\n）以外|
|^| 以某个字符开始|
|$|以某个字符结尾|
| \\ |转义字符|
|\w|匹配一个 0-9、a-z、A-Z、_ 的数字或字符,相当于[0-9a-zA-Z_]. 其反义元字符为：\W|
|\s|匹配空白字符（空格、制表符、换行符...）。 其反义为： \S|
|\t|匹配制表符|
|\n|匹配换行符|
|\d|匹配数字，相当于[0-9]。其反义为：\D|
|\0|匹配NULL字符|
|\||or选项，（x\|y）表示匹配x或者y|
|[]|任一选择，[xyz]表示x,y,z中的任意一个。[^xyz]表示除了x,y,z中的任一字符|
|-|范围标识符，[a-z]表示a-z中的任意一个字符。[^a-z]表示除了a-z之外的任意一个字符|
|()|正则中的分组|

### 量词元字符
|元字符|描述|
|----|:----:|
|?|出现0次或1次|
|+|出现1次或多次|
|*|出现0次到多次|
|{n}|出现n次|
|{n,}|出现n次到多次|
|{n,m}|出现n次到m次|

## JS正则的表达式方法

1. `exec`方法，表示在字符串中查找匹配的 `RegExp`方法，返回一个数组（未匹配到则返回null）。需要注意的式，它每次执行只会返回已找到的匹配，如果想要继续查找，需要继续执行。
   ```javascript
    let myRe = /l\d+l/g
    myRe.exec('lol is very good l1l l2l i3l ll')
    // 结果为 ["l1l", index: 17,....] 的数组
    //再次执行
    myRe.exec('lol is very good l1l l2l i3l ll')
    // 结果为 ["l2l", index: 21,...] 的数组
   ```
2.  `test`方法，表示一个在字符串中测试是否匹配的 **RegExp** 方法，它返回true或false。
   ```javascript
    let myRe = /l\d+l/g
    myRe.test('lol is very good l1l l2l i3l ll')
    // 结果为 true
   ```
3.  `match`一个在字符串中执行查找匹配的 **String** 方法，它返回一个数组或者在未匹配到时返回null。
   ```javascript
    let myRe = /l\d+l/g
    'lol is very good l1l l2l i3l ll'.match(myRe)
    // 结果为 ["l1l", "l2l"]
    'hello world'.match(myRe)
    // 结果为 null
   ```
4.  `search`一个在字符串中测试匹配的 **String** 方法，它返回匹配到的位置索引，或者在失败时返回-1。需要注意的式，search只会寻找到第一个匹配的index值。
   ```javascript
    let myRe = /l\d+l/g
    'lol is very good l1l l2l i3l ll'.search(myRe)
    // 结果为 17
    'hello world'.search(myRe)
    // 结果为 -1
   ```
5.  `replace`一个在字符串中执行查找匹配的 **String** 方法，并且使用替换字符串替换掉匹配到的子字符串。
   ```javascript
    let myRe = /l\d+l/g
    'lol is very good l1l l2l i3l ll'.replace(myRe, '?')
    // 结果为 "lol is very good ? ? i3l ll"
    'hello world'.replace(myRe, '?')
    // 结果为 'hello world'
   ```

6. `split`一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 **String** 方法.

   ```javascript
    let myRe = /l\d+l/g
    'lol is very good l1l l2l i3l ll'.split(myRe)
    // 结果为  ["lol is very good ", " ", " i3l ll"]
   ```

## 正则的分组
1. 使用括号进行简单分组（捕获型分组）

   ```javascript
    var regex = /(\d{4})-(\d{2})-(\d{2})/;
    var string = "2017-06-12";
    let matchArr = string.match(regex) // 此方法等同于 regex.exec(string)
    // matchArr = ["2017-06-12", "2017", "06", "12",...]
    // 此时可以根据 数组的下标进行获取。
   ```
   可以通过RegExp对象的方式进行分组的获取

   ```javascript
    var regex = /(\d{4})-(\d{2})-(\d{2})/;
    var string = "2017-06-12";
    regex.test(string); // 正则操作即可，例如
    //regex.exec(string);
    //string.match(regex);
    console.log(RegExp.$1); // "2017"
    console.log(RegExp.$2); // "06"
    console.log(RegExp.$3); // "12"
   ```

   下面是一个简单的例子,把yyyy-mm-dd格式，替换成mm/dd/yyyy：

   ```javascript
    var regex = /(\d{4})-(\d{2})-(\d{2})/;
    var string = "2017-06-12";
    var result = string.replace(regex, "$2/$3/$1");
    console.log(result); 
    // => "06/12/2017"
    // 以下代码效果相同
    var regex = /(\d{4})-(\d{2})-(\d{2})/;
    var string = "2017-06-12";
    var result = string.replace(regex, function() {
        return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
    });
    console.log(result); 
    // => "06/12/2017"
   ```

2. 非捕获型分组  
   如果我们只是想简单的进行分组，而没有捕获的需求， 使用 `?:` 来表示：

   ```javascript
    let regex = /(?:\d{4}-(\d{2})-(\d{2}))/
    let str = '2019-03-01'
    regex.test(str) // true
    console.log(RegExp.$1) // '03'
    //即，第一个括号内不会进行捕获，所以第一个为 03
   ```
3. 反向引用。  
   
   反向引用是通过`\1`、`\2`、`\3`...等反义+数字的方式，对之前已经分组的信息进行再引用。

   比如，匹配以下日期：
   > 2019-03-01  
   2019.03.01  
   2019/03/01
   正常方法匹配时，可能会使用如下正则进行匹配：
   ```javascript
    let regex = /\d{4}(-|\.|\/)\d{2}(-|\.|\/)d{2}/
    let str1 = '2019-03-01'
    let str2 = '2019.03.01'
    let str3 = '2019/03/01'
    let str4 = '2019-03/01'
    console.log(regex.test(str1)) // true
    console.log(regex.test(str2)) // true
    console.log(regex.test(str3)) // true
    console.log(regex.test(str4)) // true
    //即，虽然可以正确匹配以上时间格式，但是像 2019-03/01 这种格式也会匹配。
   ```
   如果，需要前后一致的进行匹配，可以使用反向引用。

   ```javascript
    let regex = /\d{4}(-|\.|\/)\d{2}\1\d{2}/
    // \1 表示前一个匹配的分组结果
    let str1 = '2019-03-01'
    let str2 = '2019.03.01'
    let str3 = '2019/03/01'
    let str4 = '2019-03/01'
    console.log(regex.test(str1)) // true
    console.log(regex.test(str2)) // true
    console.log(regex.test(str3)) // true
    console.log(regex.test(str4)) // false
   ```

   需要注意的几点：
   > 括号嵌套，以左括号为准。

    ```javascript
    var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
    var string = "1231231233";
    console.log( regex.test(string) ); // true
    console.log( RegExp.$1 ); // 123
    console.log( RegExp.$2 ); // 1
    console.log( RegExp.$3 ); // 23
    console.log( RegExp.$4 ); // 3
    /**
     * 左侧为三个数字，即匹配的为123
     * \1 对应第一个括号，匹配的为 123
     * \2 对应第二个括号，匹配的数字为 1
     * \3 对应第三个括号，匹配数字为 23
     * \4 对应第四个括号，匹配数字为 3
     * 
     * 即，'1231231233'可以匹配成功。
     */
    ```

   > \10 应该匹配为 \10 而不是 \1和0。

    ```javascript
    var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
    var string = "123456789# ######"
    console.log( regex.test(string) );
    // => true
    ```
   > 引用不存在的分组，则 \1 会被匹配为数字的反义引用。即，\1 的转义。

    ```javascript
    var regex = /\1\2\3\4\5\6\7\8\9/;
    console.log( regex.test("\1\2\3\4\5\6\7\8\9") ); 
    console.log( "\1\2\3\4\5\6\7\8\9".split("") );
    ```

4. 命名分组  
   可以通过在括号内加入命名标识的方式，进行分组命名。之后可以通过名称进行分组的获取。

   ```javascript
    let regex = /(?<year>\d{4})(-|\.|\/)(?<month>\d{2})\2(?<day>\d{2})/
    let str = '2019-03-01'
    let matchObj = str.match(regex) 
    // ["2019-03-01", "2019", "-", "03", "01",... groups: {…}]
    const year = matchObj.groups.year // 2019
    const month = matchObj.groups.month // 03
    const day = matchObj.groups.day // 01
   ```

日常在使用JS的正则表达式时，总是有很多方面的参数或者语法记不清楚。现在通过分类整理，来强化自己对其的记忆和理解。

Javascript 正则表达式

### 前言

> 前端工程化的快速发展以及 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脚本。