本文将介绍AST背景，基本语法，然后再从一个全网最小编译器聊起带你理解AST如何转换代码，理解什么是访问者模式，最后再带你手写一个babel插件。


# 何为AST
> AST概念 
> 在计算机科学中，抽象语法树（Abstract Syntax Tree, AST），或简称语法树，**是源代码语法结构的一种抽象表示**。 
> 它**以树状的形式表现编程语言的语法结构**，**树上的每个节点都表示源代码中的一种结构**。 
> **之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节**。 
> 比如，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；而类似 `if-condition-then`这样的条件跳转语句，可以使用带有三个分支节点的语句表示

- AST 技术是现代化前端基建和工程化建设的基石
- 现在的开发框架尤其是构建工具中，离不开AST相关技术
 - 构建工具上 `Webpack` `Babel` `Postcss` `Eslint` `TypeScript`
 - 开发框架上 `Vue`的模版编译，`React`的`jsx`解析

## 为什么会有AST?
首先JS语言在目标浏览器上运行需要降级，将高级的语法特性转换成目标浏览器上可以运行的语法，对语法的解析转换需要AST。

有人可能会问为什么不采用字符串读取或正则替换，这岂不更简单？如果直接对字符串操作，具有很大局限性，代码耦合难懂，不利于迭代维护扩展等。

AST就是提供一种通用的数据结构描述程序， 通过对树结构的修改，达到修改源代码的能力。这种树形结构的语法确实增加了学习成本， 通过AST这种语法树，解决了程序耦合问题，为团队协作插件化机制提供了可能，它是**对复杂问题提供通用化解决方案的必然结果**。

**那么AST是谁定义的？** 
AST也是有标准的, JS parser的AST 大多是 [estree](https://github.com/estree/estree) 标准，Babel的编译也是遵循这个标准来的。

**AST与编译之间的关系** 
首先编译，就是从一种高级语言，转换成另一种低级语言。

- 高级语言： `JavaScript`、`Java`、 `C` 有很多用于描述逻辑的语言特性，比如 分支、循环、函数、OOP、判断，接近人的思维，可以让开发人员快速的掌握。
- 低级语言： `汇编语言`、 `机器语言` 这些是和硬件和执行细节有关的，会操作寄存器、内存。需要开发者理解熟悉计算机的工作原理。

其次前端的编译，通常是指 `ES6+` 到 `ES5` 的转换，`AST` 是中间产物，当让将`TS`转换为`JS`、`JSX`转换到`JS`也是编译.

## AST如何生成的？
以babel为例，

- 读取源代码得到字符串 
- tokenizer解析(词法解析) 
- 得到令牌数组 `[{token}, {token}, {token}]`
- 语法解析 得到AST
- 转换 遍历AST修改结构 得到新的AST
- 将AST转换成字符串（目标代码），写入文件
# AST语法
以babel为例先熟悉下AST的树形结构。 点这里 [ast在线预览](https://astexplorer.net/) 注意使用`@babel/parser`解析器
## 1.Literal
字面量的意思
```js
const a = 'zhangsan'; // StringLiteral
const b = `lisi`; // TemplateLiteral
const c = 123; // NumericLiteral
const reg = /^[a-z]+/; // RegExpLiteral
const d = true; // BooleanLiteral
const e = null; // NullLiteral
```

## 2. Identifier
标识符： 变量名、属性名、参数名等各种声明和引用的名字
```js
const name = 'ww';
function foo(name) {
 console.log(name);
}
```
* 上述代码共有6个标识符 `name` `foo` `name` `console` `log` `name`
 
## 3. Statement
* 语句，它是可以独立执行的单位。
* break continue debugger return if while for
* 每一个可以独立运行的代码都是语句，一般末尾会有分号；
```js
// BreakStatement
// ContinueStatement
// ReturnStatement
// DebuggerStatement
// ThrowStatement
{} // BlockStatement
try{}catch(e){}finally{} // TryStatement
// ForinStatement
// ForStatement
// WhileStatement
// DoWhileStatement
// ...
```
## 4. Declaration
* 声明语句
```js
const a = 1;		// VariableDeclaration
function b() {}	 // FunctionDeclaration
class c {}		// ClassDeclaration
import E from 'e'; // ImportDeclaration
export 
// ExportDefautDeclaration
// ExportDeclaration
// ExportAllDeclaration
```

## 5. Expression
* 表达式与语句的区别是，表达式有返回值
```js
a=1;
1+2
[1, 2, 3]
```
## AST的公共属性
* `start` `end` `loc {line, column}`


# 实现一个mini编译器

> ![image.png](https://blog.warmplace.cn/static/img/dd9c5a2519e5e9885d7c0a6099078044.image.webp)

关于ast这一块，要多动手敲敲代码，多调试调试，推荐 [全网最小编译器](https://github.com/Xing-Chuan/the-super-tiny-compiler-cn) 这个案例多写几遍， 体会一下访问者模式，

这里简单记一下实现思路
- `src/test.ts`
```ts
/**
 * 1. string --> tokens
 * 2. tokens --> ast
 * 3. ast --> newAst
 * 4. newAst --> code
 * // Literal Identifier Statement Expression 
 */
 import { tokenizer, parse, traverser, codeGenerator } from './ast';
 
 const input = `(add 2 (substract 4 2))`;
 // 1. string --> tokens
 /* [
 {type: 'paren', value: '('},
 {type: 'name', value: 'add'},
 {type: 'number', value: '2'},
 {type: 'paren', value: '('},
 {type: 'name', value: 'substract'},
 {type: 'number', value: '4'},
 {type: 'number', value: '2'},
 {type: 'paren', value: ')'},
 {type: 'paren', value: ')'},
 ] */
 const tokens = tokenizer(input);
 
 // 2. tokens --> ast
 /* {
 type: 'Program',
 body: [
 {
 type: 'CallExpression',
 name: 'add',
 params: [
 {type: 'NumberLiteral', value: '2'},
 {
 type: 'CallExpression',
 name: 'substract',
 params: [
 {type: 'NumberLiteral', value: '4'},
 {type: 'NumberLiteral', value: '2'},
 ]
 }
 ]
 }
 ]
 } */
 const ast = parse(tokens);
 
 // 3. ast -> newAst
 /* var myNewAst = {
 type: 'Program',
 body: [
 {
 type: 'ExpressionStatement',
 expression: {
 type: 'CallExpression',
 callee: {
 type: 'Identifier',
 name: 'add',
 },
 arguments:[
 {type: 'NumberLiteral', value: '2'},
 {
 type: 'CallExpression',
 callee: {
 type: 'Identifier',
 name: 'substract',
 },
 arguments: [
 {type: 'NumberLiteral', value: '4'},
 {type: 'NumberLiteral', value: '2'},
 ]
 }
 ]
 }
 }
 ]
 } */
 const newAst = {
 type: 'Program',
 body: []
 }
 ast._context = newAst.body;
 traverser(ast, {
 CallExpression: {
 entry(node: any, parent: any){
 // ...
 }
 },
 NumberLiteral: {
 entry(node: any, parent: any) {
 // ... 同上
 }
 }
 }/* visiter */, );
 
 // 4. newAst --> code
 // add(2, substract(4, 2));
 const output = codeGenerator(newAst);
 console.log('output', output);
```

- `src/ast.ts`
```ts
export function tokenizer(input: string) {
 const tokens: any[] = [];
 // ...
 return tokens;
}

export function parse(tokens: any[]): any {
 const ast = {
 type: 'Program',
 body: []
 }
 // ...
 return ast;
}

export function traverser(ast: any, visitor: any) {
 // ...
 return ast;
}

export function codeGenerator(newAst: any): string {
 let output = '';
 // ...
 return output;
}
```

上述案例采用 ts编写，可以借助 `ts-node`和`typescript`这两个npm包运行

- `npx ts-node src/test.ts --files`
 - `--files` 表示 让ts-node读取`tsconfig.json`
- `ts-node`同样可以在VSCode进行断点调试， 调试方法与js调试完全一致

<img width=200 src='https://blog.warmplace.cn/static/img/9c8864629c246ede94ee1deee088d282.image.webp'>

步骤简要描述

1. 将原代码读取为字符串，转换成token数组
 1. 逐个字符读取，直到结束
2. 将token数组转换成 ast
 1. Array 转 Tree操作
 2. 遇到左括号就开始递归，遇到右括号 结束递归
3. 对AST进行转换（这里是将LISP的AST转换成JS的AST， 额外补充一句：Babel的ast转换是将JS从高版本转译到低版本，本质上都是编译）
 1. 首先我们先了解一下引用类型的背景知识，有两个tree数据 `ast` 和 `newAst`两个对象存在纠葛，表现在 `ast`tree内部有多次newAst内部的结构，这样修改了ast newAst也会发生变更。
 2. 比如对ast操作，原有的节点我们不会进行编辑操作的，但会在对象本身增加属性（这里是`_context`），通过对该属性的增加修改操作，再利用引用类型的纠葛，达到修改`newAst`的效果
 3. 其次 我们在了解一个设计模式： 访问者模式，将数据与对数据的操作进行分离，这里要提供一个访问者对象`vistor` 和 对AST遍历的方法
 1. `visitor` 它根据AST的每个Type类型提供进入节点和离开节点的方法（非必需），进入和离开节点的方法都遵循指责单一原则，即仅用于生成和维护新ast的节点。
 2. `traverser` 方法，它也是指责单一， 只提供遍历ast的run方法（注意：遍历ast的每个节点前后分别调用了`visitor`对象中的进入和退出方法）。深度优先遍历，遍历完成，也就生成了完整的`newAst`


![image.png](https://blog.warmplace.cn/static/img/9ca6404575482738b26622288e310f3b.image.webp)

4. 将新的AST转换成目标代码字符串
 1. 深度优先遍历

完整代码： [点击这里](https://github.com/guojingwen/frontend-project/tree/main/ast)

# Babel插件学习
> 在学习babel插件编写前 建议先上前面的全网最小编译器练习几遍，调试下，否则阅读官方插件文档，云里雾里的，比较晦涩难懂。

[官方插件教程](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md)

## babel的处理过程 

- 解析 
 - 又分两个过程 词法解析、语法解析
- 转换 	
 - 对AST进行增删改
 - 如果转换？ 进行递归的树形遍历
 - 访问者模式： 将对数据操作与遍历进行分离的一种设计模式。
 - 这里的数据 即 `Ast`或`AstNode`
 - 对数据操作 即 `Visitor` 形如 ![image.png](https://blog.warmplace.cn/static/img/9708d9a68c837b53101a78b1bbd4c8e1.image.webp)
 - 遍历即 `traverser(ast: Ast, visitor: Visitor)` 对 `Ast` 进行深度优先遍历，遍历的同时执行`Visitor`对应的钩子方法
 - Paths(路径)
 - AST通常会有许多节点，那么节点之间是如何关联的呢？
 - 可以使用一个可操作和访问的巨大可变对象表示节点之间的关联关系
 - 或者也可以用路径来简化这件事情
 - 路径不仅包含了很多元数据，还包含添加、更新、移动和删除节点有关的其他很多方法
 - 路径是一个节点在树中的位置及关于该节点各种信息的响应式表示，当你调用一个修改树的方法后，路径信息也被更新（Babel为你管理这一切，从而使得节点操作简单。尽可能做到无状态）
 - State（状态）
 - 状态是抽象语法树AST转换的敌人，通过绑定标记递归遍历的方式隔离状态的范围
 - 作用域
 - 当编写一个转换时，必须小心作用域。确保在改变代码的各个部分时不会破坏已经存在的代码。
 - Bindings（绑定）
 - 所有引用属于特定的作用域，引用和作用域的关系称作为：绑定
- 生成
 - 将最终的AST转换成字符串形式的代码同时还会创建源码映射
 - 代码生成其实很简单，深度优先遍历整个AST，然后构建可以转换后代码的字符串
## babel工具库
- [**@babel/parser**](https://github.com/babel/babel/tree/master/packages/babel-parser)
之前称为 babylon，它是Babel的解析器。最初是从Acorn项目fork出来的。Acorn非常快，易于使用，并且针对非标准特性（以及那些未来的标准特性）设计了一个基于插件的架构 
作用 **将源代码转换为AST**


- [**@babel/traverse**](https://github.com/babel/babel/tree/master/packages/babel-traverse) 可以遍历 `ast`，并调用 `visitor` 函数修改 `ast`。对于 `ast`节点的判断、创建、修改等，可以用 `@babel/types` 包，当需要批量创建 `AST` 的时候可以用 `@babel/template` 简化逻辑。
- [**@babel/generate**](https://github.com/babel/babel/tree/master/packages/babel-generator) 会把 ast 打印为目标代码字符串，同时生成 sourcemap
- [**@babel/code-frame**](https://github.com/babel/babel/tree/master/packages/babel-code-frame) 用于中途遇到错误想打印代码位置

经过上述三个工具，就可以完成代码转换的过程，以下是一个精简案例
```javascript
import * as babylon from "babylon";
import traverse from "babel-traverse";
import generate from "babel-generator";

const code = `function square(n) {
 return n * n;
}`;

const ast = babylon.parse(code);

traverse.default(ast, {
 enter(path) {
 if (
 path.node.type === "Identifier" &&
 path.node.name === "n"
 ) {
 path.node.name = "x";
 }
 }
});
console.log(generate.default(ast, {}, code))
```
**其他工具**

- [**babel-types**](https://github.com/babel/babel/tree/master/packages/babel-types)
 - 它是一个用于AST节点的Lodash式的工具库，他包含了构造、验证及变换AST节点的方法。
- **babel-template**
 - 是一个虽然小但很实用的模块。它能让你编写字符串形式且带有占位符的代码，来代替手工编写，尤其是生成的大规模AST的时候。在计算机科学中称之为标准引用


# 写一个babel插件
## console打印日之前输出代码行好列号
`console.log(123)` ---> `console.log('第5行第8列', 123);`
`console.warn(1, 2)` ---> `console.warn('第5行第8列', 1, 2);`
```js
// log.mjs 
// 测试 node log.mjs
import { parse } from "@babel/parser";
import traverse from '@babel/traverse';
import generate from '@babel/generator';
import types from '@babel/types'

const sourceCode = `function add(a, b) {
	console.log(a, b);
	return a+b;
}`;

// https://astexplorer.net/ 查看ast树结构
// 对照着 方便编写Visiter对象方法
const ast = parse(sourceCode, {
	sourceType: 'script'
});

// 要修改的节点
// ast.program.body[0].body.body[0] // CallExpression

traverse.default(ast, {
 CallExpression(path, state) {
 // path.node // 这个就是真实的ast节点， 可以参考 https://astexplorer.net
 const calleeName = generate.default(path.node.callee).code; // console.log
 if (calleeName === 'console.log') {
 const { line, column } = path.node.loc.start;
 path.node.arguments.unshift(
 types.stringLiteral(`第${line}行第${column}列`);
 );
 }
 }
})
// console.log 参数已经改变
// console.log(ast.program.body[0].body.body[0].expression.arguments);

// ast 代码转目标代码
const { code, map } = generate.default(ast);
console.log(code);
```

## 参数path有哪些内容
获取节点信息
- `path.node` 当前节点
- `path.parent` 父节点
- `path.parentPath` 父节点的 path
- `path.scope` javaScript 中的作用域链信息
- `path.hub` 
 - `path.hub.file` 拿到最外层 `File` 对象
 - `path.hub.getScope` 拿到最外层作用域，
 - `path.hub.getCode` 拿到源码字符串

判断 AST 类型
- `path.isFunctionDeclaration()`
- `path.isTemplateLiteral()`
- `...`

增删改 AST 类型
- 插入节点：`path.insertBefore`、`path.insertAfter`
- 替换节点：`path.replaceWith`、`path.replaceWithMultiple`、`replaceWithSourceString`
- 删除节点：`path.remove`

在开发时我们可以通过 `debugger` 或者直接查看 `babel` 源码测试用例了解更多的操作 `api`。

![image.png](https://blog.warmplace.cn/static/img/f25fc897ba16ffe7e56f7155a07e2332.image.webp)

**state（状态）**

可以从 `state` 中获取插件的配置项 `opts` 以及 `file` 对象：

## babel插件Demo console.log增加参数名

![image.png](https://blog.warmplace.cn/static/img/a59d5e18a785d6b3e4fa88d0819a2e35.image.webp)

- 创建文件夹 `npm init -y`
- `pnpm add @babel/cli @babel/core @babel/generator @babel/parser`

```js
// babel.config.js
module.exports = {
 "presets": [],
 plugins: [ 
 "./babel-plugin-log.js",
 ]
}


// babel-plugin-log.js
const generate = require('@babel/generator') ;

module.exports = function ({ types: t }) {
 return {
 visitor: {
 CallExpression (path) {
				const calleeName = generate.default(path.node.callee).code;
 if (calleeName !== 'console.log') return

 path.shouldSkip = true

 const args = path.node.arguments
 const newArgs = []

 args.forEach((arg, index) => {
 const label = getExpressionLiteral(arg, path)
 newArgs.push(t.stringLiteral(label), arg)
 })
 path.node.arguments = newArgs
 }
 }
 }
}

function getExpressionLiteral (expression, path) {
 const {
 start,
 end
 } = expression
 return path.hub.file.code.slice(start, end)
}

// input.js
console.log(a);
console.log(a, b, c);
console.log(a + b);
```
- 测试 `npx babel input.js --out-file output.js`

本段主要参考内容
- [《教你手写一个Babel插件》](https://juejin.cn/post/7129328903692222494)

AST抽象语法树

本文将讲解`Eslint`的基本配置，编辑如何配置，代码规范如何设计以及`Eslint`项目中的一些技巧



# 简介
> 首先贴一下[官网](https://eslint.org/docs/latest/use/getting-started) [中文官网](https://eslint.nodejs.cn/docs/latest/use/getting-started)

`ESLint` 是在 `ECMAScript/JavaScript` 代码中识别和报告模式匹配的工具(代码检查)，它的目标是保证代码的一致性和避免错误。在许多方面，它和 `JSLint`、`JSHint` 相似，除了少数的例外：

- `ESLint` 使用 [Espree](https://github.com/eslint/espree) 解析 `JavaScript`。
- `ESLint` 使用 `AST` 去分析代码中的模式
- `ESLint` 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
> 早期的工具： `JSLint`、`JSHint`、`JSCS`


## 什么是代码检查？
**代码检查主要是用来发现代码错误、统一代码风格。**

## 为什么需要代码检查？
当团队的人员越来越多时，同样的逻辑不同的人写出来可能会有很大的区别：

- 缩进应该是四个空格还是两个空格？
- 是否应该禁用 `var`？
- 接口名是否应该以 `I` 开头？
- 是否应该强制使用 `===` 而不是 `==`？

这些东西会影响到多人协作开发时的效率、代码的可理解性以及可维护性。

# 快速入门
安装 `npm install eslint --save-dev` 
创建配置文件 `npx eslint --init` 
代码检查 `npx eslint 1.js` 
> 通过 `npx eslint --init`创建不同的模版 
> 对比可以发现 集成`ts`，`vue`, `react` ，只是配置不同，增加了`extends`和`plugin`

## 入门配置示例讲解
```javascript
module.exports = {
 root: true, // 避免往上层文件夹查找配置文件
 /* 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量 */
 "env": {
 "browser": true,
 "node": true,
 "es6": true // ES6 API（全局变量及其方法属性）
 },
 /* 一个配置文件可以被基础配置中的已启用的规则继承
 指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
 字符串数组：每个配置继承它前面的配置 */
 "extends": "eslint:recommended",
 "parserOptions": {
 "ecmaVersion": 12, // 支持ES6 句法
 "sourceType": "module"
 },
 
 // parser: 'espree', // ast引擎 espree 是默认值，它只处理js， 
 // 如果是ts则需要更换引擎@typescript-eslint/parser
 
 /* 启用的规则及其各自的错误级别 */
 "rules": {
 // "规则": ["错误级别", 选项]
 /* 错误级别
 "off" or 0 - 关闭规则
 "warn" or 1 - 将规则视为一个警告（不会影响退出码）
 "error" or 2 - 将规则视为一个错误 (退出码为1)
 */
 /* 选项
 每一个规则的选项可能可能不一样
 https://eslint.bootcss.com/docs/rules/#stylistic-issues
 可以从上面的网站找到一个规则，点击进去查看每个规则有哪些选项
 */
 "quotes": ["warn", "double"],
 "semi": ["error", "never"],
 /* 可以简写 */
 // "semi": 2,
 // "semi": "error"
 "no-unused-vars": 2,
 "no-var": "error",
 "no-undef": "error",
 "space-before-function-paren": 2
 },
 /* 脚本在执行期间访问的额外的全局变量
 一般用来解决外部使用第三方库no-undef问题 */
 "globals": {
 "$": true
 }
};
```
这是一个校验配置文件的代码示例
```javascript
// var name = "zhangsan" // 测试 no-var
let age = 12
console.log(age)

// 测试env node
global._test = 123
// 测试env browser
window._test= 456


$("#app").attr("class", "c1") // 测试 globals

var person = { // eslint-disable-line no-var
 name : 'zs'
}
Object.keys(person) // es8 API（全局变量及其方法属性）这个效果测不出来
BigInt(12) // es10 API 这下测出来了

// es8 句法
async function f1 () {
 await 1
}
f1()

/* eslint-disable no-var,space-before-function-paren */ // 必须用多行注释
var f2 = function() {
 return [1, 2, 4]
}
f2().map(i =>i % 2 ===0)

/* eslint-enable no-var,space-before-function-paren */

/* eslint-disable */ // 禁用所有规则
var f3 = function() {}
/* eslint-enable */
```
## webstrom配置
Preference » Languages & Frameworks » JavaScript » Code Quality Tools » ESLint 
勾选开启eslint或者自定义

 配置error的选项有明显的提示
 
![image.png](https://blog.warmplace.cn/static/img/f2deab82fb0e63234f6d3164a9da5c66.image.webp)

warn也有提示

![image.png](https://blog.warmplace.cn/static/img/0e605374f9771000285f0f03090449a9.image.webp)

还可以设置lint格式化快捷键

![image.png](https://blog.warmplace.cn/static/img/ad26115153cef8ed0012af10ef7d5804.image.webp)

## VScode配置
> webstorm收费，vscode免费，因工作原因，笔者已经转VScode党

- 安装 `ESLint` 插件
 - 安装后要重启`vscode`, 书写代码会有`eslint`提示，但不会自动修复
- 安装`Prettier`插件 
 - 配置格式化代码采用`prettier` , `command + ,` 输入`formatter`

# `ESLint`与 `Prettier` 、`EditorConfig`
## `ESLint`

前面说到`ESLint`主要解决了两类问题，**代码质量**&**代码风格**

- 代码质量
 - `no-unused-vars`
 - `no-extra-bind`
 - `no-implicit-globals`
 - `prefer-promise-reject-errors`
 - `...`
- 代码风格
 - `max-len`
 - `no-mixed-spaces-and-tabs`
 - `keyword-spacing`
 - `comma-style`
 - `...`

其实它主要是解决代码质量，对于代码风格这块并没有完完全全做完，这才有了`Prettier`

## `Prettier`
`Prettier`不仅仅解决`js`代码风格文件 它还会处理 `.css` 、 `.html` 等文件（根据文件路径自动推断解析器）

![image.png](https://blog.warmplace.cn/static/img/3f2d98876ee8dcad64939eca6efa98f1.image.webp)

配置文件 `.prettierrc{\.json,\.js,\.toml}`
## `EditorConfig`

- `EditorConfig`就是为了抹平不同IDE内置的代码格式差异的
- 一些编辑器内置了`EditorConfig`插件 如 `Webstorm`、`VisualStudio`，一些编辑器则需要自行安装插件如`VSCode`
- [这里是官网](https://editorconfig.org/) `editorConfig`配置很少且非常简单，配置文件 `.editorconfig`

## 三者之间的关系
**ESLint 是否可替代 Prettier？**
代码风格检查似乎和`Prettier`的功能重叠，但有以下两点无法取代`Prettier`

- `ESLint`中的`Formatting rules`并非都提供了`fixer`, 上面列出几条规则示例里仅有`comma-style`提供了修复功能;
- `ESLint`着重于 `JS/TS` 无法兼容`CSS`/`Markdown`/`Html`

术业有专攻，代码规范方面要交给`Prettier` 
**既然不能替代，那么两者之间怎么解决冲突？**

- 方案1 [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) 关闭`ESLint`中和`Prettier`可能冲突的所有`Rules`,`eslint` 负责代码质量检查，`prettier`做`formatter`;
- 方案2 `eslint-plugin-prettier`插件增加了`prettier/prettier`规则，该规则执行`prettier`并将错误信息上报`eslint`。简言之，**把`prettier`融合到`eslint`中**，担负起代码检查的功能，同时需要配合搭配`eslint-config-prettier`关闭调`ESLint`中代码风格相关的规则。

方案2 具体步骤如下
1. 安装 config 关闭 ESLint 规则 
 - `yarn add eslint-config-prettier -D`
 - `.eslintrc.json` 使用 `prettier` 插件提供的配置
```js
// 一步加入全组配置：config/plugin/rules
{
 "extends": ["plugin:prettier/recommended"]
}
```
2. vscode 设置
```json
{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
 }
}
```

**那么有了prettier还需要EditorConfig吗？ 两者相交且不包含，是否会有冲突？**

我们需要重现一下两者的作用过程： `EditorConfig`作用于预览和输入阶段，`Prettier`在保存和提交阶段（格式化快捷键）重新组织代码
`Prettier 配置 > editorconfig 配置 > Prettier 默认值`。


考虑到`EditorConfig`覆盖所有类型的文件，建议`EditorConfig`管理相交属性，其它属性则有`Prettier`控制

参考资料 [全面梳理代码规范化](https://juejin.cn/post/6952842182252298248)

# 命令行
格式 `eslint [options] [file|dir|glob]*`
- `glob` 一种正则匹配文件及文件夹的方法 参考 `NodeJS` 的 `glob` 语法
- `--fix` 试图修复尽可能多的问题
- `-c`, `--config` 允许指定一个额外的配置文件

更多参数详见[官网命令行](https://eslint.bootcss.com/docs/user-guide/command-line-interface)解析


# 配置eslint
## 配置文件
`ESLint` 支持几种格式的配置文件：

- **JavaScript** - 使用 `.eslintrc.js` 然后输出一个配置对象。
- **YAML** - 使用 `.eslintrc.yaml` 或 `.eslintrc.yml` 去定义配置的结构。
- **JSON** - 使用 `.eslintrc.json` 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
- **(弃用)** - 使用 `.eslintrc`，可以使 JSON 也可以是 YAML。
- **package.json** - 在 `package.json` 里创建一个 `eslintConfig`属性，在那里定义你的配置。

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

1. `.eslintrc.js`
2. `.eslintrc.yaml`
3. `.eslintrc.yml`
4. `.eslintrc.json`
5. `.eslintrc`
6. `package.json`

如果过有文件或文件夹想忽略`eslint`校验 用这个文件 `.eslintignore` 规则编写 参考 `NodeJS` 的 `glob` 语法

`ESlint` 被设计为完全可配置的，这意味着你可以关闭每一个规则而只运行基本语法验证，或混合和匹配 `ESLint` 默认绑定的规则和你的自定义规则，以让 `ESLint` 更适合你的项目。有两种主要的方式来配置 `ESLint`：

1. **Configuration Comments**
 - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
2. **Configuration Files**
 1. 使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。
 2. 可以配置一个独立的 [.eslintrc.*](https://eslint.bootcss.com/docs/user-guide/configuring#configuration-file-formats) 文件，或者直接在 [package.json](https://docs.npmjs.com/files/package.json) 文件里的 `eslintConfig` 字段指定配置，`ESLint` 会查找和自动读取它们，
 3. 再者，你可以在[命令行](https://eslint.bootcss.com/docs/user-guide/command-line-interface)运行时指定一个任意的配置文件。

## 指定解析器
`ESLint` 默认使用[Espree](https://github.com/eslint/espree)作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：

1. 它必须是一个 `Node` 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 `npm` 单独安装解析器包。
2. 它必须符合 [parser interface](https://eslint.bootcss.com/docs/developer-guide/working-with-plugins#working-with-custom-parsers)。

> 注意: 即使满足这些兼容性要求，也不能保证一个外部解析器可以与 `ESLint` 正常配合工作，`ESLint` 也不会修复与其它解析器不兼容的相关 bug。

如我们使用ts开发的话就需要更换解析器
```javascript
module.exports = {
 parser: '@typescript-eslint/parser',
 plugins: ['@typescript-eslint'],
 rules: {}
}
```
以下解析器与 `ESLint` 兼容：
- [Esprima](https://www.npmjs.com/package/esprima)
- [Babel-ESLint](https://www.npmjs.com/package/babel-eslint) - 一个对`Babel`解析器的包装，使其能够与 ESLint 兼容。
- [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser) - 将 `TypeScript` 转换成与 `estree` 兼容的形式，以便在`ESLint`中使用。


## 插件功能
插件可以提供处理器。处理器可以从另一种文件中提取 `JavaScript` 代码，然后让 `ESLint` 检测 `JavaScript` 代码。或者处理器可以在预处理中转换 `JavaScript` 代码。
```javascript
{
 "plugins": ["a-plugin"],
 "overrides": [
 {
 "files": ["*.md"],
 "processor": "a-plugin/markdown"
 }
 ]
}
```


## 配置插件
`ESLint` 支持使用第三方插件。在使用插件之前，你必须使用 `npm` 安装它。 
在配置文件里配置插件时，可以使用 `plugins` 关键字来存放插件名字的列表。插件名称可以省略 `eslint-plugin-` 前缀
```json
{
 "plugins": [
 "plugin1",
 "eslint-plugin-plugin2"
 ]
}
```
## 个性化文件规则的配置
若要禁用一组文件的配置文件中的规则，请使用 `overrides` 和 `files`。例如:
```json
{
 "rules": {...},
 "overrides": [
 {
 "files": ["*-test.js","*.spec.js"],
 "rules": {
 "no-unused-expressions": "off"
 }
 }
 ]
}
```

## 配置文件作用域
有两种方式使用配置文件。

使用配置文件的第一种方式是通过 `.eslintrc.*` 和 `package.json` 文件。`ESLint` 将自动在要检测的文件目录里寻找它们，紧接着是父级目录，一直到文件系统的根目录（除非指定 `root: true`）。当你想对一个项目的不同部分的使用不同配置，或当你希望别人能够直接使用 `ESLint`，而无需记住要在配置文件中传递什么，这种方式就很有用。

第二种方式是使用 `-c` 选项传递命令行将文件保持到你喜欢的地方。
`eslint -c myconfig.json myfiletotest.js`

层级问题
为什么配置文件需要设置 `"root": true`
> 完整的配置层次结构，从最高优先级最低的优先级，如下:
> 1. 行内配置
> 1. `/*eslint-disable*/` 和 `/*eslint-enable*/`
> 2. `/*global*/`
> 3. `/*eslint*/`
> 4. `/*eslint-env*/`
> 2. 命令行选项（或 CLIEngine 等价物）：
> 1. `--global`
> 2. `--rule`
> 3. `--env`
> 4. `-c`、`--config`
> 3. 项目级配置：
> 1. 与要检测的文件在同一目录下的 `.eslintrc.*` 或 `package.json` 文件
> 2. 继续在父级目录寻找 `.eslintrc` 或 `package.json`文件，直到根目录（包括根目录）或直到发现一个有`"root": true`的配置。
> 4. 如果不是（1）到（3）中的任何一种情况，退回到 `~/.eslintrc` 中自定义的默认配置。


## 工程化应用
通过cli命令行`npx eslint --init` 询问，生成的配置文件还是很给力的，推荐读者亲自试一试

- 安装编辑器插件 智能提示
- 为确保万无一失 增加 `pkg.pre-commit: "eslint --ext .js src"` (`npm i -D pre-commit`)
- 通过命令`npx eslint --fix`或者 编辑器插件 自动修复
- 构建工具集成 [`eslint-loader`](https://www.npmjs.com/package/eslint-webpack-plugin)


**其它：JS校验工具 JSLint、JSHint、JSCS、ESLint**

- `JSLint`，古老，不可配置，不可扩展，不可禁用许多特性的校验
- `JSHint`，可配置的JSLint版本
- `JSCS`，代码样式检查，只捕获与代码格式化相关的问题，而不是潜在的bug或错误。已经与 `ESLint` 合并。
- `ESLint`，易于扩展，可自定义规则，可以插件形式安装更多的规则

具体区别参考这里[ javascript检验工具的比较](http://zhenhua-lee.github.io/tools/linter.html)

Eslint深入浅出

本文将系统梳理`Babel`相关知识。包括`Babel`的基本概念，配置文件种类，应用和类库的配置案例讲解，Babel7的主要变更，browserslist配置，编译TS代码适用tsc还是babel等内容。



# Babel是什么
- `Babel`是一个`JavaScript`编译器
- `Babel`是一个工具链，主要用于将`ECMAScript 2015+`版本的代码转换为向后兼容的 `JavaScript` 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

注：`ECMAScript`是规格，JS是其规格的实现，不仅包含`ECMAScript`，还包含浏览器下的JS。如果想给浏览器下的JS打补丁要靠其他工具了（比如`observe-webpack-plugin`）。
- [Babel官网](https://www.babeljs.cn/)

# 配置文件

## 配置文件的种类

- `pkg.babel`字段
- 局部配置 `.babelrc.json`（或者`.babelrc`，`.js`，`.cjs`，`.mjs`）文件
 - `babel6` 可以在`.babelrc`引用 `.babelrc.js`, `babel7`不允许
- 全局配置 `babel.config.json`（或者`.js`，`.cjs`，`.mjs`）文件； `7.x` 新增的

## 配置文件的优先级
1. `.babelrc` 与`.babelrc.json` 及 `.babelrc.js` 不能同时使用，但babel6中可以在`.babelrc`引入`.babelrc.js`
2. 同样`babel.config.json` 与 `babel.config.js` 也不能同时使用
3. `.babelrc.js` 与 `babel.config.js` 可以共存，`.babelrc`会merge到`babel.config.js`的配置
4. merge规则 `merge({babel.config}, {babelrc}, {rullup/gulp/webpack中的配置})`

## plugin与preset的关系及异同
- `plugin` `babel`的插件翻译某一块功能
- `preset` `babel`插件集合的预设，包含某一部分的插件
- `plugins`先于`presets`之前执行，`plugins`从前到后执行，`presets`从后往前执行

# 基本使用
**Babel默认只转换新的JavaScript句法，而不转换API**，比如`Iterator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、`Symbol`、`Promise`等全局对象，以及一些定义在全局对象上的方法（比如`Object.assign`）都不会转码。

## `preset-env`的配置
`useBuiltIns`字段	

- `false` 不引用`polyfill`(默认值)
- `entry` 整体导入补丁
- `usage` 按需导入补丁

`useBuiltIns` 为 `entry` 或 `usage` 的时候，需要安装 `core-js@2` 或者 `core-js@3`

## polyfill
- `babel version < 6` 项目入口引入 `babel-polyfill`
- `>= 7 < 7.4` 项目入口引入 `@babel/polyfill`
- `> 7.4` 	配置`@babel/preset-env`

注： `polyfill` 依赖 `corejs`

## core-js 版本2与3的区别

- 新项目肯定用`core-js@3`, 因为`corejs@2`已经被冻结好几年了，所有新功能仅添加到`corejs@3`，包括提案
- `corejs@3`也删除了一些过时的功能，不再有非标准非提议功能
- `corejs@3` 为浏览器错误/问题添加了许多修复程序。例如，已修复 Safari 12.0 `Array.prototype.reverse` 错误。

corejs组成
- `core-js`，它定义了全局 `polyfill`。 （~500KB，40KB 压缩和压缩）
- `core-js-pure`，提供`polyfills`而不污染全局环境。它相当于 `core-js@2` 中的 `core-js/library`。 (~440KB)
- `core-js-bundle`：定义全局 `polyfill` 的 `core-js` 的捆绑版本。

ecma提案的4个阶段

- `Stage 0` - 稻草人(strawman): 只是一个想法，经过 TC39 成员提出即可。
- `Stage 1` - 提案(proposal): 初步尝试。
- `Stage 2` - 初稿(draft): 完成初步规范。
- `Stage 3` - 候选(candidate): 完成规范和浏览器初步实现。

## 配置示例
```javascript
module.exports = {
 presets: [
 [
 "@babel/preset-env",
 {
 // 推荐使用 .browserslistrc文件，因为该文件已被生态系统中的许多工具所使用，例如postcss-preset-env，stylelint，eslint-plugin-compat等
 // 写在这里(babe配置里)，是为了方便演示
 
 "targets": "> 0.25%, not dead", // 仅包括浏览器市场份额超过0.25％的用户所需的polyfill和代码转换（忽略没有安全更新的浏览器，如IE 10和BlackBerry）
 // "targets": { // 有这么多选项 chrome，opera，edge，firefox，safari，ie，ios，android，node，electron
 // "edge": "17",
 // "firefox": "60",
 // "chrome": "67",
 // "safari": "11.1",
 // },
 // targets 如果未指定目标，则默认转换所有ECMAScript 2015+代码
 
 // 还可以写在package.json文件里面 "browserslist": "> 0.25%, not dead"
 
 
 // useBuiltIns false-不引入polyfill(默认值) entry-入口引入（整体引入） usage-按需引入
 "useBuiltIns": "usage",
 // "corejs": 3 // useBuiltIns为entry或usage的情况下需要配置这个选项
 "corejs": {
 version: "3.24",
 proposals: true
 }
 // useBuiltIns为entry要在入口文件引入 `import "core-js"`
 // 如果corejs@3 @babel/preset-env还会优化，只导入针对目标浏览器所需要的全部补丁
 }
 ],
 // 从 v7.0.0-beta.55 开始废弃了，需要用户自己配置plugins
 // 废弃原因 提案不稳定 理由是 https://segmentfault.com/a/1190000018358854
 // "@babel/preset-stage-1"
 ],
 // babel7 提案句法 转换需要自己手动配置，可在 node_modules/@babel/preset-stage-0 查看一下 内容不多
 plugins: [
 "@babel/plugin-proposal-do-expressions",
 // 编译多个文件时，如果不想这些公共辅助函数在每个文件都注入一遍，就需要这个插件配合。
 "@babel/plugin-transform-runtime"
 ]
}
```

类库的配置
```js
module.exports = {
 presets: ['@babel/preset-env'],
 plugins: [
 [
 '@babel/plugin-transform-runtime',
 {
 corejs: 3 // cnpm i -S @babel/runtime-corejs3
 }
 ]
 ]
};
```
## 为什么类库和应用的babel配置不一样？
`babel`中有个概念， es6+ 分为 `句法`（新语法）和 `API` 两个概念。 
一般对于项目来说， `API` 的转换我们通过配置`@babel/preset-env`的`useBuiltIns`字段为`usage`或`entry`。 
但是该方式不适用于类库，因为会造成污染。（类库的垫片与应用的垫片功能可能存在差异）。 
打包类库，我们通常使用`runtime`方案（为es6 API创建一个沙盒环境）。 
`rumtime`方案如下:

- `@babel/runtime` 抽离公共辅助函数 
 - 一些句法如`async` 、`...` `class`等转成es5需要一些辅助函数，该插件会将辅助函数注入到打包文件中。
- `@babel/runtime-corejs3 ` `core-js`是直接补全浏览器的es6+`API`，会带来环境污染问题，该包提供一种fuction引用的方式来避免es6+ API污染全局环境
- `@babel/plugin-transform-runtime`	编译多个文件，如果不想这些公共辅助函数在每个文件都注入一遍，就需要这个插件配合。（应用也需要这个插件） 该包依赖上述两个包

参考资料：
[一文搞懂 core-js@3、@babel/polyfill、@babel/runtime、@babel/runtime-corejs3 的作用与区别](https://juejin.cn/post/7062621128229355528)

**注意： 因为`babel`并不处理模块化，所以构建后的文件`polyfill`或`runtime`仍需要在特定的环境（node）下运行，想要在其他环境（浏览器）中运行还需要借助模块化工具（如webpack）**

# babel7主要变更
1. 命名空间规范化，防止相关名称被抢注的问题
 1. babel7软件包 `@babel/node` `@babel/core @babel/cli` `@babel/preset-env`
 2. 对应babel6软件包`babel-node` `babel-core` `babel-cli` `babel-preset-env`
2. polyfill变更
 1. `babel6` `babel-polyfill` 对应 babel7的`@babel/polyfill`，但是babel从7.4.0开始，不推荐使用此软件包，而直接包括`core-js`
3. 新增全局配置 `babel.config.js` `babel.config.json`
 1. 全局配置 `babel.config.js` 局部配置 `.babelrc` 用于`monorepo`项目
 2. `babel.config.js`可以定义全局配置的作用范围以及局部配置的开启关闭
4. stage(提案)预设变更， 不在提供`preset`而是手动配置`plugin`
 1. babel6有 `babel-preset-stage-x` babel7废除了这些预设，需要手动引入plugin，预设语法并不多可以在`node_modules/@babel/preset-stage-0`看一下
 2. 提案`plugin`更名
 1. 统一更名为`-proposal`，如`@babel/plugin-transform-function-bind`现在`@babel/plugin-proposal-function-bind`
 2. 从包裹名称中删除年份 如`@babel/plugin-transform-es2015-classes`成了`@babel/plugin-transform-classes`
5. 反应和流程预设的分离
```javascript
{
- "presets": ["@babel/preset-react"]
+ "presets": ["@babel/preset-react", "@babel/preset-flow"] // parse & remove flow types
+ "presets": ["@babel/preset-react", "@babel/preset-typescript"] // parse & remove typescript types
}
```
以上内容个人写了一些案例，如有需要请移步
- [babel_app](https://github.com/guojingwen/frontend-project/tree/main/babel_app) 
- [babel_lib](https://github.com/guojingwen/frontend-project/tree/main/babel_lib)

# 关于browserslist如何配置

- [官网](https://github.com/browserslist/browserslist)
- [中文翻译](https://www.jianshu.com/p/12024a7f4a90)

`browserslist`可以在构建工具(`Webpack`/`babel`/...)、`.browserslist文件`、`pkg.browserslist`中配置
 
## 配置示例
```javascript
// 1. 在构建工具如webpack中配置
// webpack.config.js
module.exports = {
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /(node_modules|bower_components)/,
 // use: 'babel-loader', // 走babel配置
 use: { // babel配置写在这里也可以, 如果项目根目录下还有配置文件如babel.config.js会把这里的配置项merge到配置文件里面
 loader: 'babel-loader',
 options: {
 presets: [['@babel/parset-env', {target: '这里配置'}]],
 }
 },
 }
 ]
 },
}

// 2. 在babel中配置如 babal.config.js
module.exports = {
 presets: [
 ['@babel/env', {
 "useBuiltIns": "usage",
 "corejs": 3,
 }]
 ]
}
// 3. browserslist配置
// 如果 前一步没有配置parset-env的target字段，
// 再会寻找 .browserlists文件 或pkg.browserlists字段
/* pkg.browserlists 移动端配置示例
"browserslist": [
 "Android >= 4.4",
 "ios >= 10",
 "> 0.5%"
]
android 4.4以上browserlist配置参考这篇文章
https://www.yuque.com/guojw/fe-project/rg6nsk#Rd7ho
*/
```
## 如何验证配置是否有效

- `npx browserlists`通过控制变量法，检测是否生效
- `postcss`同样支持`browserlists`，（如`postcss-presets-env`，想要看到flex前缀，要调整到`android 4.0`)

查看各浏览器及各版本市场份额 [点这里](https://caniuse.com/usage-table)

# Babel编译TypeScript
## 编译TS代码用babel还是tsc?
tsc的编译流程

![image.png](https://blog.warmplace.cn/static/img/c525a82c3ff725829675a77f6a955b2a.image.webp)

babel的编译流程

![image.png](https://blog.warmplace.cn/static/img/4b9067550865ed7fe93eb79c51a8fb19.image.webp)

`babel`对比`tsc` 的编译流程，差别并不大

- `Parser` 对应 tsc 的 `Scanner` 和 `Parser`，都是做词法分析和语法分析，只不过 `babel` 没有细分。
- `Transform` 阶段做语义分析和代码转换，对应 tsc 的 `Binder` 和 `Transformer`。只不过 `babel` 不会做类型检查，没有 `Checker`。
- `Generator` 做目标代码和 `sourcemap` 的生成，对应 `tsc` 的 `Emitter`。只不过因为没有类型信息，不会生成 `d.ts`。

## tsc与babel编译TS的异同
1. `babel`的劣势（`@babel/preset-typescript`）
 1. 无法做到类型检查也就是生成 `.d.ts`文件
 1. 解决方案： 单独使用tsc生成声明文件 `npx tsc --declaration -p ./ -t esnext --emitDeclarationOnly --outDir types` 
 2. 部分语法不支持(主要是一些 TypeScript 不推荐的旧的语法，因为类型检查太重要了，所以可以忽略这一点) [babel不支持的ts语法](https://juejin.cn/post/7084882650233569317#heading-5)
2. `babel`的优势
 1. 灵活性：`babel`能根据目标浏览器转译指定语法；而`ts`只能配置指定的`ecma`版本
 2. `polyfill` (es6API) `Babel` 能够根据目标环境自动添加 `polyfill`；`TS` 编译器则**不处理API**需要手动引入`corejs`或`runtime` (致命缺点)
 3. 插件系统：babel有插件机制，有丰富的插件生态，TS编译器没有插件系统
 4. `ts`只支持最新的`es`规范，和部分提案，想要支持新语法就要升级`ts`版本；`babel`通过插件支持`es`句法 `API` 及 提案 

**综上： `babel`支持`ts`是最好的选择，`@babel/preset-typescript`也是`ts`开发团队的人实现的**

参考资料：
- [为什么babel要支持编译TypeScript](https://juejin.cn/post/6844904031643664397)
- [编译ts代码用tsc还是babel](https://juejin.cn/post/7084882650233569317)

# 编写Babel插件
请移步这里 [《抽象语法树AST》](https://www.yuque.com/guojw/fe-project/ts4ed6)

Babel深入浅出

本文介绍结构赋值、运算符的扩展、装饰器新旧版本的基本用法。




# 变量的解构赋值
## 数组的解构赋值
- 模式匹配
- 只要对象具有`Iterator`接口就可以结构 类遍历器对象也可以
- 可以设置默认值 
 - 如果默认值是表达式 与函数参数特性一样， 惰性求值
 - 只有`undefined`才触发默认值

## 对象的解构赋值
- 先找同名属性，然后再赋值给对应的变量
- 对象的解构赋值可以取到继承的属性
- 支持设置默认值、支持别名

注意点：
- 如果要将一个已经声明的变量用于解构赋值，必须非常小心
- 允许等号左边的模式之中无变量
- 数组是特殊的对象

注： 函数参数也是对象， 因此可以使用对象的方式进行解构

## 基本数据类型的解构赋值
`boolean` `string` `number` `BigInt` `Symbol`只要有包装对象（排除了 `null` `undefined`）就可以进行解构，获取原型链上的方法或属性。

## 圆括号问题
1. 不使用圆括号的场景
 2. 变量声明语句
 3. 函数参数
 4. 赋值语句的模式
3. 可以使用圆括号的场景
 - 赋值语句的非模式部分

## 用途
1. 交换变量的值
2. 从函数返回多个值
3. 函数参数的定义
4. 提取 JSON 数据
5. 函数参数的默认值
6. 遍历 Map 结构
7. 输入模块的指定方法

# 运算符的扩展

## 指数运算符
- `**`
- `**=`

## ?. 链判断运算符
- `?.`
- `?.[]`
- `?.()`

注意事项
1. 它是短路机制
2. 一般来说，使用`?.`运算符的场合，不应该使用圆括号。
3. 报错场合
4. 右侧不得为十进制数值

## Null 判断运算符
- `??` 他的行为类似 `||` 但只有`null`或`undefined`，才会返回右侧的值
- 配合`?.`使用
- 与其他逻辑运算在一起 必须表明优先级

## 逻辑赋值运算符
- `||=`
- `&&=`
- `??=`

## !命令
```bash
#!/usr/bin/env node
```

## 扩展运算符
用途
- 解构赋值
- 函数rest参数
- 遍历 可遍历对象（或类遍历器对象）
- copy对象属性 
 - 会自动执行取值函数

# 装饰器
> 其实装饰器从ES6诞生开始就有，一直到现在才进入第三阶段（候选），不过也就差最后一步了，由于很多项目都用到装饰器，这一块不得不认真学。
## 旧版本语法
### 环境准备
1. package.json
```json
{
 // ...
 "dependencies": {
 "@babel/cli": "^7.22.10",
 "@babel/core": "^7.22.10",
 "@babel/plugin-proposal-decorators": "^7.22.10",
 "@babel/preset-env": "^7.22.10",
 "core-js": "3"
 },
 "browserslist": [
 "chrome >= 100"
 ]
}
```
2. babel.config.js
```js
module.exports = {
 presets: [
 [
 "@babel/preset-env",
 {
 useBuiltIns: "usage",
 corejs: {
 version: 3,
 proposals: true, // 默认值是false, 对stage阶段的全局对象上的方法打补丁
 },
 },
 ],
 ],
 plugins: [
 [
 "@babel/plugin-proposal-decorators",
 {
 legacy: true,
 },
 ],
 ],
};
```
3. build.sh
```sh
#!/bin/bash
run() {
 local name=$1
 eval "npx babel $1 --out-file dist/$1"
 eval "node dist/$1"
}
run $1
```
执行命令 `sh build.sh 1.js`

### 基本使用
```js
@decorator
class A {}

// 等价于
A = decorator(A) || A

class MyReactComponent extends React.Component {}
connect(mapStateToProps, mapDispatchToMap)(MyReactComponent);

// 使用装饰器优化React-Reduce代码
@connect(mapStateToProps, mapDispatchToMap);
```
- 类装饰器就一个参数 `target` 值为被修饰的类
- 方法（原型方法）装饰器有三个参数
 - 参数1是类的原型对象
 - 参数2是所要装饰的属性名
 - 参数3是该属性的描述对象 `descriptor`
- 没有属性(实例属性)装饰器 因为装饰器是在编译时执行的
- 静态（方法or属性）装饰器
 - 参数1是类
 - 参数2与3同方法装饰器

注意： 装饰器不能修饰函数， 因为函数声明语句存在提升。应采用高阶函数方式替代

### 装饰器的执行顺序
1. 先执行方法装饰器（后定义的先执行性），再执行类装饰器
2. 从下到上执行
```js
@decorator1
@decorator2
class A {
 @decoratorMethod1
 @decoratorMethod2
 say(text) {
 console.log('A.prototype.say()', text);
 }
}
```
1. `decoratorMethod2`
2. `decoratorMethod1`
3. `decorator2`
4. `decorator1`


装饰器对类的行为的改变，是**代码编译时发生的**，而不是在运行时。
这意味着什么呢？
- 调用方法装饰不管是静态方法还是原型方法，this指向undefined
- 存值器、取值器、access装饰器 也是如此


## 新版本语法
### API

![image.png](https://blog.warmplace.cn/static/img/1770ae16277d49a09788b719df0a39cd.image.webp)

`kind`的值是啥含义
| `kind`枚举值 | 含义 | 对value的影响 |
| --- | --- |--- |
| `class` | 类装饰器 | 对应的类 | |
| `method` | 方法装饰器 包括原型方法和静态方法 | 对应的方法` |
| `field` | 属性装饰器 | `value`为 `undefined` |
| `getter` | 取值器装饰器 | `value`为 取值器 |
| `setter` | 存值器装饰器 | `value`为 存值器 |
| `accesser` | 它是存取器的简写 | `value`为 一个对象，内含取值器和存值器 |


- 类装饰器API
```js
type ClassDecorator = (value: Function, context: {
 kind: "class";
 name: string | undefined; // 如果被装饰的类是一个匿名类时其值为undefined
 addInitializer(initializer: () => void): void;
}) => Function | void;
```
- 方法装饰器API
```ts
type ClassMethodDecorator = (value: Function, context: {
 kind: "method";
 name: string | symbol;
 access: { get(): unknown };
 static: boolean;
 private: boolean;
 addInitializer(initializer: () => void): void;
}) => Function | void;
```
- 存取器装饰器 accessor装饰器 与方法装饰器API类似
- 属性装饰器 与方法装饰器项目没有初始化逻辑`addInitializer()`


### 环境准备
1. `package.json`
```json
{
 "dependencies": {
 "@babel/cli": "^7.22.10",
 "@babel/core": "^7.22.10",
 "@babel/plugin-proposal-decorators": "^7.22.10",
 "@babel/preset-env": "^7.22.10"
 },
 "browserslist": [
 "chrome >= 100"
 ]
}
```
2. babel.config.js
与前面 babel的配置基本相同，只要改一下`@babel/plugin-proposal-decorators`的配置即可。

![image.png](https://blog.warmplace.cn/static/img/db6c392d769d894a22c278d09c8ac68b.image.webp)

3. build.sh同上， 执行命令 `sh build.sh 1.js`

### 基本使用
示例
```js
function logged(value, { kind, name }) {
 if (kind === "class") {
 return class extends value {
 constructor(...args) {
 super(...args);
 console.log(`constructing an instance of ${name} with arguments ${args.join(", ")}`);
 }
 }
 }
}

@logged
class C {}
new C(1);
// constructing an instance of C with arguments 1
```

类装饰器实际上执行的是下面的语法。
```js
class C {}
C = logged(C) ?? C

function trace(value, context) {
 return function(...args) {
 console.log('trace hello ', this.name);
 value.call(this, ...args);
 }
}

class Person {
 constructor(name) {
 this.name = name;
 }
 @trace
 hello() {
 console.log(`Hi ${this.name}!`)
 }
}

const robin = new Person('Robin');
console.log(robin.hello()); 
// trace hello Robin
// Hi Robin!
```

方法装饰器
- 必须返回一个函数 或`undefined`, 否则报错
- 如果返回函数取代原方法，如果返回`undefined`则使用原方法

### addInitializer()

示例1 webComponents
```js
function customElement(name) {
 return function(value, context) {
 context.addInitializer(() => {
 customElements.define(name, this);
 })
 }
}

@customElement('my-element');
class MyElement extends HTMLElement { }
```

示例2: bound
```js
class C {
 message = 'hello';
 @bound
 m() {
 console.log(this.message)
 }
}
function bound(value, {addInitializer, name}) {
 addInitializer(function() {
 this[name] = this[name].bind(this)
 })
}
var c = new C();
const {m} = c;
console.log(m());
```
## core-decorators.js
目前`core-decorators.js`采用的是老的装饰器语法实现的
- `@autobind`
- `@readonly`
- `@override`
- `@deprecate`


# 其他
以下内容挪到了其他文章中讲解
- 属性简写
- 箭头函数 [《Web前端JS知识梳理》](https://blog.warmplace.cn/post/javascript)
- `class语法` `class继承` [《JavaScript面向对象》](https://blog.warmplace.cn/post/34)
- `async函数` `Generator` `for await..of` [《JavaScript异步编程》](https://blog.warmplace.cn/post/async-program)
- `import` `export` [《JavaScript模块化》](https://blog.warmplace.cn/post/modularity)

ES6新增句法

本篇文章将讲述 `npm`包的发展进化史，`npm`与`yarn`及`pnpm`的区别，详解`package.json`内容, `npm`命令, npm实用技巧等内容。



# 语义化版本
npm使用的SemVer版本规范
- 主版本号：不兼容的 API 修改
- 次版本号：向下兼容的功能性新增
- 修订号：向下兼容的问题修正

## 版本范围
在使用第三方依赖时，我们通常会在package.json中指定依赖的版本范围，语义化版本范围规定：
- `~`：只升级修订号
- `^`：升级次版本号和修订号
- `*`：升级到最新版本

## 先行版本号
- 例如`1.0.0-alpha.1`，`1.0.0-beta.4`，`2.0.0-rc.1`等。常用的先行版本一般为`alpha`，`beta`，`rc`，`stable`，`csp`等。
- `Alpha`: 是内部测试版,一般不向外部发布,会有很多Bug.
- `Beta`: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一缺陷，需要经过多次测试来进一步消除。这个阶段的版本会一直加入新的功能。
- `RC`：(Release Candidate) Candidate是候选人的意思，用在软件上就是候选版本。
- `GA`：首次发行稳定的版本，也就是官方开始推荐广泛使用了
- `Release`: 该版本意味“最终版本”


# npm包发展

关于前端包管理器推荐阅读 [《前端包管理器探究》](https://mp.weixin.qq.com/s/HZ2GKmuSv2zPrqxgk2z5BQ)。这篇文章写的很好比较幽默也很全面，这里我做一些个人总结。

## 1. npm v1/v2 依赖嵌套
这种方式非常简单，但最大的问题是**依赖地狱**

## 2. npm v3 扁平化
- 将子依赖项安装到主项目所在的目录中（hoising提升）
- npm的依赖查找算法也要适配--**递归向上查找**(有开发过`Monorepo`项目的同学会深有体会), 在遇到版本冲突时才会在模块下的 node_modules 目录下存放该模块子依赖，

虽然解决了依赖地狱问题，但也引入了新的问题
- **幽灵依赖** 未在`package.json`中定义, 但可以引用。 **幽灵依赖的问题是 依赖不兼容 和 依赖缺失**
- **多重依赖** **破坏单例模式** **types冲突**
- **不确定性问题** 部署时发现与本地node_modules不一致

## 3. npm v5 扁平化+lock
> 在npm v5中新增了`package-lock.json`。当项目有`package.json`文件并首次执行`npm install`安装后，会自动生成一个`package-lock.json`文件，该文件里面记录了`package.json`依赖的模块，以及模块的子依赖。并且给每个依赖标明了版本、获取地址和验证模块完整性哈希值。通过`package-lock.json`，保障了依赖包安装的确定性与兼容性，使得每次安装都会出现相同的结果。

**解决了依赖缺失和不确定性问题**

## 4. yarn
`Yarn` 是在2016年开源的，`yarn` 的出现是为了**解决 `npm v3` 中的存在的一些问题**，那时 `npm v5` 还没发布。`Yarn` 被定义为快速、安全、可靠的依赖管理。

与npm一样，yarn也适用本地缓存，区别是yarn还提供了离线模式

**Yarn v1 lockfile**
`yarn.lock` 与 `package-lock.json` 的大体思路一致，具体区别如下
- 文件格式 `yarn`使用自定义格式 `npm`使用`json`格式
- `package-lock.json` 文件里记录的依赖的版本都是确定的， 不会出现范围符号。 而 `yarn.lock` 文件里仍然会出现语义化版本范围符号
- `package-lock.json` 文件内容更丰富，实现了更密集的锁文件，**包括子依赖的提升信息**
 - `npm v5` 只需要 `package.lock` 文件就可以确定 `node_modules` 目录结构
 - `yarn.lock` 无法确定顶层依赖，需要 `package.json` 和 `yarn.lock` 两个文件才能确定 `node_modules` 目录结构。`node_modules` 目录中 `package` 的位置是在 `yarn` 的内部计算出来的，在使用不同版本的 `yarn` 时可能会引起不确定性。


**Yarn v2 NPN模式**
- Node依赖node_modules查找依赖，有两个问题
 - 1 安装慢， 包含一些系列重IO操作（下载、解压、复制）
 - 2 依赖查找耗时， 递归向上查找
- 所以Yarn反其道而行，
 - 通过全局缓存解决安装慢的问题，
 - 通过映射表确定依赖位置

pnp模式优缺点也非常明显：
- 优：摆脱node_modules，安装、模块速度加载快；所有 npm 模块都会存放在全局的缓存目录下，避免多重依赖；严格模式下子依赖不会提升，也避免了幽灵依赖
- 缺：自建resolver 处理Node require方法，执行Node文件需要通过yarn node解释器执行，脱离Node现存生态，兼容性不太好

## 5. pnpm
> `pnpm1.0`诞生于2017年，它说它也是为了解决`npm`和`yarn`存在的问题😂 ，并声称具有安装速度快、节约磁盘空间、安全性好等优点

因为依赖结构本质上是有向无环图（DAG），但是npm和yarn通过文件目录和node resolve算法模拟的是有向无环图的一个超级（多了许多错误的祖先节点和兄弟节点之间的连接。pnpm也是通过硬链接和软链接结合的方式，更加精准的模拟DAG来解决yarn和npm的问题。

**硬链接与软链接**
- 硬链接 有A、B两个文件，假设B是A的硬链接，它们都指向同一个文件允许同一个文件有多个路径，无论是往A还是B文件中写内容，两者都会同步变化， 一些重要的文件通过该机制防止误删
- 软链接 也叫符号链接 类似windows下面的快捷方式，删除原文件，快捷链接也访问不了了
- `ls source_file link_name` 创建硬链接
- `ln -s source_file link_name` 创建软连接

来看一下官方的一张图

![image.png](https://blog.warmplace.cn/static/img/6ec449c3b9f2d0b12cb1710b17912b20.image.webp)
- 依赖与依赖之间是软链接关系
- 依赖与全局缓存是硬链接关系

这里就很好的解决了幽灵依赖问题

局限性
1. 需要使用自身的锁文件 `pnpm-lock.yaml`
2. 符号链接兼容性 。存在符号链接不能适用的一些场景，比如 Electron 应用、部署在 lambda 上的应用无法使用 pnpm。
3. 不同应用的依赖是硬链接到同一份文件，如果在调试时修改了文件，有可能会无意中影响到其他项目。
4. 子依赖提升到同级的目录结构，虽然由于 Node.js 的父目录上溯寻址逻辑，可以实现兼容。但对于类似 Egg、Webpack 的插件加载逻辑，在用到相对路径的地方，需要去适配。

## cnpm
- `cnpm`是由阿里维护并开源的npm国内镜像源，支持官方npm registry 的镜像同步。
- `tnpm`是在`cnpm`基础之上，专为阿里巴巴经济体的同学服务，提供了私有的 `npm` 仓库，并沉淀了很多 `Node.js` 工程实践方案。


![image.png](https://blog.warmplace.cn/static/img/79d843e427b84997cbac05bf100f4bfa.image.webp)

- cnpm/tnpm的依赖管理是**借鉴了pnpm ，通过符号链接方式创建非扁平化的node_modules结构**，最大限度提高了安装速度。安装的依赖包都是在 node_modules 文件夹以包名命名，然后再做符号链接到 版本号 @包名的目录下。与pnpm不同的是，**cnpm没有使用硬链接，也未把子依赖符号链接到单独目录进行隔离**。

## 命令行
| | npm | yarn | pnpm |
| --- | --- | --- | --- |
| 安装所有依赖 | `npm install` | `yarn` | `pnpm install` |
| 安装依赖 | `npm install <pkg>` | `yarn add <pkg>` | `pnpm install <pkg>` `pnpm add <pkg>`|
| 移除依赖 | `npm uninstall <pkg>` | `yarn remove <pkg>` | `pnpm uninstall <pkg>` `pnpm remove <pkg>` |
| 更新依赖 | `npm update <pkg>` | `yarn update <pkg>` | `pnpm update <pkg>` |
| 运行脚本 | `npm run <script>` | `yarn run <script>` | `pnpm run <script>` |

注： `pnpm` 没有全局依赖的概念（它已经做了全局缓存了）

执行`npm install`安装常用的有两个参数
 - --save   简写  -S   写入dependencies项目运行所依赖的包
 - --save-dev  简写  -D   写入devDependencies开发过程中依赖的包
 - 没有参数 = -S
- 记录该包基本信息(包名版本号其他描述信息)及所依赖的包的信息（最低版本号）
- 依赖包版本号 

| | |
| --- | --- |
| `npm i vue` | `"vue": "^3.3.4"` |
| `npm i vue@latest` | `"vue": "^3.3.4"` |
| `npm i vue@2` | `"vue": "^2.7.14"` |
| `npm i vue@2.1` | `"vue": "^2.1.10"` |
| `npm i vue@2.1.2` | `"vue": "^2.1.2"` |

除了 `^`、`*`、`~` 符号，
还支持 `>` `>=` `<` `<=` `1.2.x`


# nrm
npm的镜像源管理工具 
- `npm install -g nrm`
- `nrm ls` # 查看可选的源
- `nrm use [源名称]` # 切换源
- `nrm add registry [你公司的npm私服地址]` # 增加源
- `nrm del [源名称]` #删除对应的源
- `nrm test [源名称]` #测试相应源的响应时间

# nvm
npm的版本管理

安装 以mac为例 

- [安装 nvm 的脚本](https://github.com/nvm-sh/nvm#install--update-script) 可以不用卸载系统node (注意要翻墙)
- `vi .bash_profile` (在`Users/youname`目录下) 增加插入这端的内容

```bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```

- `nvm list` #查看node版本列表
- `nvm install [版本号]` #安装某个nodejs版本
- `nvm use [版本号]   && npm alias default [版本号]` # 切换到某个版本
- 切回 到系统node `nvm use system && nvm alias default system`

# npm私服&发包
开源私服 [verdaccio](https://github.com/verdaccio/verdaccio)

## 本地调试开发中的npm包
本地开发模块调试  假设你在开发B项目，有个组件你想封装成npm包C
- 在npm包C执行 `npm link` 
- 在B项目根目录下执行 `npm link C` 软链接
- 开发完成在B项目中移除软链接 ` npm unlink B`
- `npm run env` # 查看环境变量

## 发包

- 进入npm包目录，执行 `npm publish` 命令 (可能需要`npm login`)
- package.json
 - `files` 字段决定上传哪些内容
 - `bin` 创建全局命令通常在开发脚手架需要用到这个

# package.json详解
## 导出

- `type` 指定`.js`文件是CJS还是ESM规范，
 - 值有两种`commonjs`、`module` 前者是默认值
 - `.mjs`是 ESM规范，`.cjs`是CJS规范，优先于`type`字段
- `main` 指定包入口文件
- `exports`
 - 优先于`main`字段
 - 有多种用法
 - 子目录别名，main的别名，条件加载
- `module` 字段 指定ESM模块的入口，如果你想开发一个包即支持EMS又支持CommonJS，就需要配置 `module` 和`main` 两个字段

## 辅助信息字段
`description` `respository` `autor` `license` `keywords` `homepage` `bugs` `contributors`

## 开发相关字段
- `devDependencies` 开发依赖 `npm i XXX -D` 
- `dependencies`	 运行依赖 `npm i XXX -S` `npm i XXX`
- `peerDependencies`	如果你安装我，那么你最好也安装X,Y和Z.	[参考](https://www.cnblogs.com/wonyun/p/9692476.html)
- `optionalDependencies` 可选的包
- `bundledDependencies` 你的包依赖一些第三方包，你担心某个或某几个三方包发生变更导致你的包也不能用了，那么就配置这个字段包，将这些第三方包和你的包绑定起来。
- `overrides`
 - 假如你的项目依赖`package A`，`package A`依赖`B@0.1.0`版本，你知道依赖B存在问题，应该使用使用`B@0.1.1` 版本，则配置`overrides:{"A":{"B":"0.1.1"}}`
 - 再或者package C依赖 `B@0.1.1` 你期望任何地方都使用`B@0.1.1`, 则配置`overrides:{"B":"0.1.1"}`
 - 在`yarn`中 使用 `resolutions`字段 具体用法[点这里](https://yarn.bootcss.com/docs/selective-version-resolutions/) 
 - 先有的`resolutions`，再有的 `overrides` (npm8)
- `engines` 配置项目启动所需的node版本npm版本条件
- `script` 构建脚本 `npm run XXX` 执行脚本
 - `precommit` 通常配合`lint-staged`使用，`git commit`前进行检查
 - `prepush` `git push`前进行检查，如执行单元测试
- `lint-staged` 字段 
- `version` 包版本号 `alpha` `beta` `rc` `state`
- `name` 包名称
- `config` 通过 `process.env.XXX`读取	

## 功能字段

- `bin`	非常重要，通常做一些脚手架包会用到如 `vue-cli` `egg-cli`，会在脚本头部插入`#!/usr/bin/env node`表示执行node脚本，作为前端有很多人只会一些shell命令，对shell编程不太熟，可以用node进行编程操纵shell脚本`require('child_process').exec`
- `man`	说明帮助， 值为字符串 或字符串数组
- `private` 不希望上传到npm上，用它
- `publishConfig` 发布相关的配置，非常重要，比如`publishConfig.registry`字段就非常有用，能让你避免把包发不到其他私服（如cnpm私服，无需登录就能发包，比较恶心，不知道是不是故意这样设计的，利用别人的失误，窃取别人公司的代码）

## 非官方字段

- `typing/types` 		TS解析文件入口，为用户提供更好的IDE支持
- `lint-staged`			通常配置eslint校验
- `module`				
- `sideEffects`			声明该模块是否含有副作用，为webpack TreeShake提供更大的压缩空间
- `babel`
- `eslint`
- `style`、`less`
- `flat` `yarn install --flat` 将所有依赖项安装在项目的顶层 node_modules 目录下，而不是嵌套在子目录中。
- `bowerserslist` 目标环境（浏览器及node环境） [参考](https://juejin.cn/post/6844903669524086797)
- `browser` 指定浏览器环境的入口，以便在打包时可以根据目标环境选择不同的文件。

参考资料 
- [package.json非官方字段](https://segmentfault.com/a/1190000016365409)
- [package.json官方文档](https://docs.npmjs.com/cli/v8/configuring-npm/package-json)
- [package.json详解](https://mp.weixin.qq.com/s/SKjEgoHvWXSKgpsRqcza4w)


## package-lock.json
`package-lock.json`就是锁定安装时的包的版本号，以保证其他人在`npm install`时大家的依赖能保持一致。需要将该文件提交至git [官方是这样说的package-lock.json](https://github.com/npm/npm/blob/v5.0.0/doc/files/package-lock.json.md#version-1)。（一开始我网上查到一般不需要将改文件提交，但有些例外情况比如使用了第三方包即将废弃的api。后来朋友提醒应该文件需要提交）

# npm实用技巧

## 模块管理
- `npm list/ls`
- `npm la/ll` // 相当于`npm ls --long`
- `npm list/ls --depth=0` // 只列出父包依赖的模块
- `npm list/ls <packageName>`
- `npm view/info <packageName>`
- `npm outdated`
- `npm prune`  # 整理项目中无关的模块


## 查看模块文档 
- `npm [home | resp | bugs | docs] <packageName>` 
- `npm run dev --prefix /path/to/your/folder`  #在不同的目录下运行脚本
- `npm audit [--json] `  # 安全漏洞检查，加上--json，以 JSON 格式生成漏洞报告
- `npm audit fix` #自动修复安全漏洞

## 依赖锁定
- `npm config set save-prefix="~"`
- `npm`默认安装模块时，会通过脱字符`^`来限定所安装模块的主版本号。
- 可以配置`npm`通过波浪符`~`来限定安装模块版本号：
- 当然还可以配置`npm`仅安装精确版本号的模块：`npm config set save-exact true`
- 项目版本号管理： 尽量使用 [npm version](https://docs.npmjs.com/cli/version) 指令来自动更新`version`

- `npm version xxx -m "upgrade to %s for reasons" # %s` 会自动替换为新版本号

## npx 是什么?
运行的时候，会到`node_modules/.bin`路径和环境变量`$PATH`里面，检查命令是否存在。 
由于 npx 会检查环境变量`$PATH`，所以系统命令也可以调用。
`./node_modules/.bin/babel src --out-dir lib` 
等价于 `npx babel src --out-dir lib`

`npx`可以调用 `./node_modules/.bin/`下面的命令及系统命令

[你所需要的npm知识储备都在这了](https://juejin.im/post/5d08d3d3f265da1b7e103a4d#heading-0)

## npm安装或启动失败问题
由于众所周知的问题，国内安装npm包可能失败，这里简单写一点笔记。

- 首先最好自己有梯子
- 努力看报错信息、
- `node-sass`是个坑，如遇到这方面的报错，请切换node版本或切换`node-sass`版本 它与npm版本有个对应关系
- 尝试使用`cnpm`、`yarn` or `pnpm`试试
- 尝试切换源、切换node版本、切换某个包或某块功能的包的版本试试

## 如果依赖包的依赖存在问题怎么办？
- 参考pkg.resolutions字段 或者 pkg.overrides字段
- 另一个方案是 使用`patch-package`这个包给`node_modules`下面的文件打补丁 具体用法[点这里](https://juejin.cn/post/6962554654643191815)

## npm命令行传参数
```bash
# server.js
# console.log(process.args)
node server --port=3100
# 输出 
#[
# '/Users/XXX/node',
# '/Users/XXX/node/server',
# '--port=3100'
#]

# 或者配置pkg.script字段 `"server": "node server"`
npm run server -- --port=3100
# 可以得到同样的结果
```
参考资料： [npm script中命令行传参数](https://wayou.github.io/2020/08/20/npm-script-%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%8F%82%E6%95%B0/)