Babel解析 - 技术栈

Babel是什么

Babel 是一个 JavaScript 编译器。

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

下面列出了 Babel 的主要功能：

语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性（core-js）
源码转换（codemods）

ini 复制代码

// Babel 输入： ES2015 箭头函数 
[1, 2, 3].map(n => n + 1); 

// Babel 输出： ES5 语法实现的同等功能 
[1, 2, 3].map(function(n){ return n + 1;});

Babel配置

首先安装相关插件：

scss 复制代码

npm install --save-dev @babel/core @babel/cli @babel/preset-env

创建babel.config.js文件：

ini 复制代码

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

preset预设

预设就是一堆插件的集合，如@babel/preset-env这个预设里面就装了不下几十个plugins插件。

@babel/preset-env

智能预设，可以使用最新的 JavaScript 语法，不需要关心目标环境所支持的语法需要设置哪些语法转换插件（以及可选的 polyfills）。这样能让你的工作更轻松，也能让打出来的 JavaScript 包更小！

安装插件：

css 复制代码

npm install --save-dev @babel/preset-env

开启智能预设：

perl 复制代码

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.22"
      }
    ]
  ]
}

配置参数：

targets：编译目标浏览器的版本，默认为{}
modules：是否启用 ES 模块语法到其他模块类型的转换，默认是auto
include：需要编译的目录，默认是[]
exclude：编译排除项目,默认是[]
useBuiltIns：按需加载默认是entry
corejs：需要使用的corejs版本

@babel/preset-typescript

当使用TypeScript时，建议使用此预设。

安装插件：

css 复制代码

npm install --save-dev @babel/preset-typescript

开启智能预设：

perl 复制代码

{
  "presets": [ "@babel/preset-typescript"]
}

配置参数：

isTSX：开启 jsx 解析，默认为false
jsxPragma：替换编译 JSX 表达式时所使用的函数，默认是React
jsxPragmaFrag：替换编译 JSX 片段时使用的函数，默认是React.Fragment

plugins插件

正确转化源码，必须使用对应的 plugins。Babel 推崇功能的单一性，就是每个插件的功能尽可能的单一。比如想使用 ES6 的箭头函数，需要插件@babel/plugin-transform-arrow-functions。

less 复制代码

{  
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]  
}

Babel处理逻辑

Babel编译流程

作为JS编译器，Babel接收输入的JS代码，经过内部处理流程，最终输出修改后的JS代码。

在Babel内部，会执行如下步骤：

将Input Code解析为AST（抽象语法树）,这一步称为parsing
编辑AST，这一步称为transforming
将编辑后的AST输出为Output Code，这一步称为printing

babel-core包含了这三个能力：

@babel/parser将输入代码转化为AST
@babel/traverse通过深度优先 的方式遍历AST树
对于遍历到的每条路径，@babel/types提供用于修改AST节点的节点类型数据
@babel/generator将编辑后的代码转换为Output Code

core-js

core-js是一套模块化的JS标准库，包括：

一直到ES2021的polyfill
promise、symbols、iterators等一些特性的实现
ES提案中的特性实现
跨平台的WHATWG / W3C特性，比如URL