babel 简介

作者: 王振州 时间: 2020-12-17

  Babel 是一个 JavaScript 编译器, Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。@babel/core是核心库, @babel/parser转换代码为 ast, @babel/traverse遍历 ast, 还有一系列的 plugin 插件(es6=>es5), babel-polyfill填充运行环境未实现的功能(promise 等) babel 官网 | babel 中文 | babel GitHub

// 转换源代码到ast
const { parse } = require("@babel/parser");
// 遍历ast节点
const traverse = require("@babel/traverse").default;
// babel核心库
const core = require("@babel/core");

const { parse } = require("@babel/parser");
const core = require("@babel/core");
const code = `
  const a = [1,2]
`;
console.log(
  core.transformSync(code, {
    presets: ["@babel/preset-env"], // babel预设 内置了一系列的代码转换插件
  }).code
);
// 输出
// "use strict";

// var a = [1, 2];

    // TransformOptions 配置
    /**
     * Specify the "root" folder that defines the location to search for "babel.config.js", and the default folder to allow `.babelrc` files inside of.
     *
     * Default: `"."`
     */
    // 在哪个文件夹下查找 babel.config.js 配置
    root?: string | null;

    /**
     * The config file to load Babel's config from. Defaults to searching for "babel.config.js" inside the "root" folder. `false` will disable searching for config files.
     *
     * Default: `undefined`
     */
    // 用来加载Babel配置的配置文件。默认搜索“babel.config.js”。在“根”文件夹内。“false”将禁用对配置文件的搜索。
    configFile?: string | boolean | null;
    /**
     * Specify whether or not to use .babelrc and
     * .babelignore files.
     *
     * Default: `true`
     */
    // 指定是否使用.babelrc和babelignore文件。默认为true
    babelrc?: boolean | null;

    /**
     * Filename for use in errors etc
     *
     * Default: `"unknown"`
     */
    // 文件名
    filename?: string | null;

     /**
     * If all patterns fail to match, the current configuration object is considered inactive and is ignored during config processing.
     */
    // 处理哪些文件或代码
    // 如果所有的模式都不能匹配，当前的配置对象将被认为是不活动的，并在配置处理过程中被忽略。
    test?: MatchPattern | MatchPattern[];

    /**
     * This option is a synonym for "test"
     */
    // 同test
    include?: MatchPattern | MatchPattern[];

     /**
     * If any of patterns match, the current configuration object is considered inactive and is ignored during config processing.
     */
    // 排除哪些文件或代码
    // 如果任何一个模式匹配，当前的配置对象将被认为是不活动的，并在配置处理期间被忽略。
    exclude?: MatchPattern | MatchPattern[];

    /**
     * An object containing the options to be passed down to the babel parser, @babel/parser
     *
     * Default: `{}`
     */
    // @babel/parser 的参数
    parserOpts?: ParserOptions | null;

    /**
     * List of plugins to load and use
     *
     * Default: `[]`
     */
    // 插件
    plugins?: PluginItem[] | null;

    /**
     * List of presets (a set of plugins) to load and use
     *
     * Default: `[]`
     */
    // babel预设(插件集合)
    presets?: PluginItem[] | null;

下面我们看下项目中的 babel.config.js 的配置

module.exports = {
  // presets 和 plugins 每个item的写法支持 预设/插件名(如"@babel/preset-env") 或 是一个数组(第一个是预设/插件名, 第二个是预设/插件的options参数)
  presets: [
    [
      "@vue/app", // babel-preset-app 内置了preset-env和一系列别的插件
      {
        useBuiltIns: "entry",
      },
    ],
  ],
  plugins: [
    // babel-plugin不写的话会自动添加
    [
      "import", // 使用 babel-plugin-import 插件 用于按需导入
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true },
    ],
  ],
};