10分钟快速了解Babel

Babel

babel主要是做代码降级，代码转换等工作

1. 核心包

• @babel/core 核心包，里面有parse tranform等转换方法
• @babel/cli 命令行执行工具
• @babel/plugin-transform-runtime 代码提取工具，将一些内部方法进行公共提取，优化包体积
• @babel/preset-env 预设包，基本包含了所需转换的全部，使用预设后不需要单独再加载plugin

2. 包安装

pnpm install @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env -D

3. 创建配置文件

根目录下创建babel.config.js文件

module.exports = {
  //   plugins: ["@babel/plugin-transform-arrow-functions"],
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        modules: false,
      },
    ],
​
    ["@babel/preset-typescript"],
  ],
  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        corejs: 2,
        useESModules: true,
      },
    ],
  ],
};

babel从7.4.0版本之后就不需要@babel/polyfill 去降级api了 核心包已经包含

4. 试运行

创建文件b.js
export const a = 1;
export const b = () => {};
​
运行 babel src/b.js --out-dir dist
将b.js文件进行转换到dist目录
​
生成如下
export var a = 1;
export var b = function b() {};
​
已经将const转换为var 将箭头函数转换为标准函数
​

5. 工具包

• @babel/parser 将代码字符串转换为ast语法树

  const { parse } = require("@babel/parser");
  const code = `function square(n) {
      return n * n;
    }`;
  const ast = parse(code);
  

• @babel/generator 将ast语法树转成代码

  const generator = require("@babel/generator").default;
  const generatorcode = generator(ast);
  console.log(generatorcode.code);
  

• @babel/template 用于模版占位符替换

  import template from "@babel/template";
  import { generate } from "@babel/generator";
  ​
  const buildRequire = template(`
    var IMPORT_NAME = require(SOURCE);
  `);
  ​
  const ast = buildRequire({
    IMPORT_NAME: '_lodash',
    SOURCE: 'lodash',
  });
  console.log(generate(ast).code);
  

• @babel/traverse 用于ast遍历

  import * as parser from "@babel/parser";
  import traverse from "@babel/traverse";
  ​
  const code = `function square(n) {
    return n * n;
  }`;
  ​
  const ast = parser.parse(code);
  ​
  traverse(ast, {
    enter(path) {
      if (path.isIdentifier({ name: "n" })) {
        path.node.name = "x";
      }
    },
  });
  

  也可根据节点类型进行遍历

  traverse(ast, {
    FunctionDeclaration: function(path) {
      path.node.id.name = "x";
    },
  });