以Babel为例，讲述插件的机制

#Babel 是一个 JavaScript 编译器​

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js）
• 源码转换（codemods）

#Babel 和 AST 的关系

• 核心关系：Babel 通过生成和操作 AST 来实现代码的转换和编译。AST 作为 Babel 处理代码的中间表示，是 Babel 工作流程中不可或缺的一部分。
• 插件系统：Babel 的强大之处在于其插件系统，这些插件通过分析和修改 AST 来实现具体的语法转换和优化。开发者可以根据需要选择或创建插件，以支持新的语言特性或实现特定的编译任务。

#AST 抽象语法树定义 

webpack和Vite等很多的工具和库的核心都是通过Abstract Syntax Tree抽象语法树这个概念来实现对代码的检查、分析等操作的，这些工具的原理都是通过JavaScript Parser把代码转化为一颗抽象语法树（AST），这颗树定义了代码的结构，通过操纵这颗树，我们可以精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作

在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

Javascript的语法是为了给开发者更好的编程而设计的，但是不适合程序的理解。所以需要转化为AST来使之更适合程序分析，浏览器编译器一般会把源码转化为AST来进行进一步的分析等其他操作。

#抽象语法树用途 

• 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
  • 如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
  • IDE的错误提示、格式化、高亮、自动补全等等
• 代码混淆压缩
  • UglifyJS2等
• 优化变更代码，改变代码结构使达到想要的结构
  • 代码打包工具webpack、rollup等等
  • CommonJS、AMD、CMD、UMD等代码规范之间的转化
  • CoffeeScript、TypeScript、JSX等转化为原生Javascript

#3.babel插件

• 访问者模式Visitor 对于某个对象或者一组对象，不同的访问者，产生的结果不同，执行操作也不同
• @babel/core Babel 的编译器，核心 API 都在这里面，比如常见的 transform、parse
• [@babel/parser] Babel 的解析器
• babel-types 用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法，对编写处理 AST 逻辑非常有用
• babel-traverse用于对 AST 的遍历，维护了整棵树的状态，并且负责替换、移除和添加节点
• babel-types-api
• Babel 插件手册
• babeljs.io babel可视化编译器

#转换箭头函数 

• babel-plugin-transform-es2015-arrow-functions

#转换前

复制const sum = (a,b)=>a+b

#转换后

复制var sum = function sum(a, b) {
  return a + b;
};

复制let babel = require('@babel/core');
let t = require('babel-types');
const code = `const sum = (a,b)=>a+b`;
let transformArrowFunctions = {
    visitor: {
        ArrowFunctionExpression: (path) => {
            let node = path.node;
            let id = path.parent.id;
            let params = node.params;
            let body=t.blockStatement([
                t.returnStatement(node.body)
            ]);
            let functionExpression = t.functionExpression(id,params,body,false,false);
            path.replaceWith(functionExpression);
        }
    }
}
const result = babel.transform(code, {
    plugins: [transformArrowFunctions]
});
console.log(result.code);

#Babel 在真实项目中遇到的问题有哪些 ？

复制{
  test: /\.js$/, 
  exclude: /node_modules/, 
  use: {
    loader: 'babel-loader', 
    options: {
      cacheDirectory: true, 
      presets: [ 
        '@babel/preset-env', 
        {
          useBuiltIns: 'usage', 
          corejs: 3, 
          targets: { 
            chrome: '49', 
          },
        },
        '@babel/preset-react', 
        '@babel/preset-typescript', 
      ],
      plugins: [ 
        '@babel/plugin-proposal-nullish-coalescing-operator', 
        '@babel/plugin-transform-optional-chaining', 
      ],
    },
  },
}