更多工具学习方法

通过学习前面的三个工具，我们发现这些工具有一些共同的特点：

• API
• CLI
• 配置文件
• 规则
• 插件
• VSCode 扩展

API

这个 API 是每个工具一定会提供的部分，也是一个工具 最最核心 的部分。从本质上来讲，API 就是工具内部对外所暴露的接口，外部可以调用这些接口来完成某项具体的工作。

假设有一个名为 A 的工具：

function doSomethingA(){}
function doSomethingB(){}

module.exports = {
  doSomethingA,
  doSomethingB
}

在上面的代码中，doSomethingA 以及 doSomethingB 就是 A 这个工具对外部所提供的接口。

外界就可以利用这些接口来做一些事情：

const A = require("A");
A.doSomethingA();
A.doSomethingB();

回顾我们之前所学习的工具，API 部分基本上都是这么来使用的：

// prettier
const prettier = require("prettier");
// ...
prettier.format(jsSource, options).then((res) => {
  // ...
});


// babel
var babel = require('@babel/core');
var result = babel.transform('code();', options);

作为一个成熟的工具，一般来讲会有一个专门的页面来描述工具所提供的 API，方便开发者进行查询。

CLI

CLI 英语全称为 Command line interface，翻译成中文叫做命令行接口，作为一个前端的工具，CLI 部分一般来讲也是会提供。

因为即便上面所提供的 API 部分完全能够满足功能需要，但是作为开发者会比较麻烦，有些时候开发者只是想要简单的使用你的工具，但是你只有 API 的话，开发者还会涉及到自己去编码。因此一般会提供 CLI 命令行工具，开发者只需要通过这些命令就可以实现对应的功能。

prettier --write .
eslint --fix .

工具学习多了之后，你会发现这些工具所提供的 CLI 命令行工具，格式基本上都是相同的

工具名 选项 路径

在学习 CLI 这部分的时候，一般来讲主要就是学习 选项 这个部分，看这个工具提供了哪些选项。一般工具的官网也会有一个专门的页面来介绍该工具的 CLI 命令。

CLI 背后仍然是调用的该工具的 API，核心原理就是拿到用户在命令行所输入的参数，然后根据不同的参数来调用对应的 API。

有了这些 CLI 命令行工具后，我们在使用时，一般是将其配置到 package.json 里面：

"scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --fix"
}

配置文件

一个成熟的工具，是一定会有配置文件的，配置文件可能存在多种格式，但是一定是会有的。原因很简单，因为再完美的工具都没办法预判开发者在使用时所有的场景。

针对配置文件的学习，主要有以下几个点：

• 支持的配置项有哪些
  • 有一些配置项可能你没有配置，但是有默认值
• 配置文件的格式
  • 很多工具都可能支持多种格式的配置文件
  • 多配置文件的权重文件
  • 多配置文件的层叠问题
  • 如何在 CLI 中临时指定配置

规则

关于这一条，就不是所有的工具都有，具体取决于你的这个工具是做什么的。

例如前面我们所学习的 Prettier 以及 ESLint 就存在规则，因为他俩是做代码格式化和 lint 检查的，如何格式化以及如何 lint 检查需要规则的支持。

无论是 Prettier 还是 ESLint 都提供了一套默认的规则标准，一般来讲，这套默认的规则标准就已经是行业的最佳实践了，因此如果没有什么意外的时候，不要去瞎改，不仅不要去瞎改，而且你自己在写代码的时候，也应该遵循这套规则标准。

// 你写的代码
hello().then(() => {
  something()
}).catch(console.error)

// Prettier 格式化的代码
hello()
  .then(() => {
    something()
  })
  .catch(console.error)

因为有些时候我们不是规则的制定者，可能在公司内部会有统一的规则要求，所以我们还需要知道如何自定义规则。关于规则，一般数量会比较多，但是一般都比较简单，不需要去背，一般用一条就会记住一条。

规则一般也是有一个专门的页面来介绍该工具支持哪些规则配置。

插件

插件的本质是一段遵循特定规则的代码，它的作用是用来扩展工具的功能，因此插件的表现不仅仅是一个函数，它可能是一组函数、一个对象、一个配置。

举一个例子，下面是一个 ESLint 里面的插件：

module.exports = {
  rules: {
    "my-custom-rule": {
      create: function (context) {
        return {
          Identifier(node) {
            if (node.name === "badIdentifier") {
              context.report({
                node,
                message: "Don't use 'badIdentifier' as a name!",
              });
            }
          },
        };
      },
    },
  },
};

另外需要说一下的是，插件不是一个工具的必需项，有的工具支持插件，有的工具不支持插件，取决于你这个工具是做什么的。

比如像 Babel 或者 PostCSS，这些工具本身做的事情非常简单，就是将代码转为抽象语法树，剩下的功能全靠插件来支持。但是有一些工具本身做的事情比较单一，不需要再扩展功能了（terser），你会发现这个工具就不支持插件来扩展功能。

VSCode 扩展

VSCode 扩展的本质实际上也是在调用这些工具所提供的 API，这就意味着它是在 JS 代码中直接引用和使用工具。

const prettier = require("prettier");

const sourceCode = "function hello ( ) { return 'world'; }";
const formattedCode = prettier.format(sourceCode, { parser: "babel" });

console.log(formattedCode);

VSCode 里面关于 Prettier 的扩展，底层做的事情就是类似于上面的事情，只不过会只用更加复杂的配置，并且会将格式化后的结果插入到编辑器的文件里面，而非打印到控制台。

总结

前端的工具是无穷无尽的，比起学习这些工具本身，更重要的是学会如何学习这些工具的正确姿势，授人以鱼不如授人以渔。

一般来讲一款工具会包含如下的东西：

✅ 一定会有 ⭕️ 可能会有

• 这个工具是做什么的（这个你首先肯定需要知道）
• API ✅
• CLI ✅
• 配置文件 ✅
• 规则 ⭕️
• 插件 ⭕️
• VSCode 扩展 ⭕️