工具是无穷无尽的,比起学习这些工具本身,更重要的是学习如何学习这些工具——授人以鱼不如授人以渔。
通过前面工具,可以发现这些工具有一些共同的特点:
- API
- CLI
- 配置文件
- 规则
- 插件
- VSCode 扩展
API
API 是每个工具一定会提供的部分,也是一个工具最核心的部分。从本质上来讲,API 就是工具内部对外所暴露的接口,外部可以调用这些接口来完成某项具体的工作。
回顾之前学过的工具,API 基本都是这么来使用的:
// prettier
const prettier = require("prettier");
prettier.format(jsSource, options).then((res) => {
// ...
});
// babel
const babel = require('@babel/core');
const result = babel.transform('code();', options);
作为一个成熟的工具,一般都会有官方文档来描述工具所提供的 API,方便开发者进行查询。
CLI
CLI (Command line interface,命令行接口),作为一个工具,CLI 部分一般来讲也是会提供的。
因为即便上面所提供的 API 部分完全能够满足功能需要,但是使用会比较麻烦,需要开发者自己去编码。因此一般会提供 CLI 命令行工具,开发者只需要通过这些命令就可以实现对应的功能。
如:
prettier --write .
eslint --fix .
这些工具所提供的 CLI,格式基本上都是相似的:
工具名 选项 路径
在学习 CLI 这部分时,一般来讲主要就是学习选项这个部分。一般工具的官网也会有一个专门的页面来介绍该工具的 CLI 命令。
CLI 背后仍然是调用 API,核心原理就是拿到用户在命令行所输入的参数,然后根据不同的参数来调用对应的 API。
有了这些 CLI 后,在使用时,一般是将其配置到 package.json
的 scripts
里:
"scripts": {
"format": "prettier --write .",
"lint": "eslint . --fix"
}
配置文件
一个成熟的工具会有配置文件,配置文件可能存在多种格式。
针对配置文件的学习,主要有以下几个点:
- 支持的配置项有哪些
- 有一些配置项可能没有配置,但是有默认值
- 配置文件的格式
- 很多工具都可能支持多种格式的配置文件
- 多配置文件的权重文件
- 多配置文件的层叠问题
- 如何在 CLI 中临时指定配置
规则
关于这一条,就不是所有的工具都有,具体取决于这个工具是做什么的。
例如前面学习的 Prettier 和 ESLint 就存在规则,因为它俩是做代码格式化和 Lint 检查的,如何格式化以及如何 Lint 检查需要规则的支持。
一般会提供了一套默认的规则标准,一般就是行业的最佳实践,因此没有特殊要求不需要改,而且在写代码的时候,也应该遵循这套规则标准。
当然也可以自定义规则。一般会有一个专门的页面来介绍该工具支持哪些规则配置。
插件
插件的本质是一段遵循特定规则的代码,作用是用来扩展工具的功能,因此插件的表现不仅仅是一个函数,它可能是一组函数、一个对象、一个配置。
插件不是一个工具的必需项,比如像 Babel、PostCSS,这些工具本身做的事情非常简单,就是将代码转为抽象语法树,剩下的功能全靠插件来支持。但是有一些工具本身做的事情比较单一,不需要再扩展功能了(如:Terser)。
VSCode 扩展
VSCode 扩展能够与编辑器结合,提供更方便的使用。它的本质实际上也是在调用这些工具所提供的 API。