Babel解析

二二四一
286 阅读4分钟

Babel是什么

Babel 是一个 JavaScript 编译器。

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

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

  • 语法转换
  • 通过 Polyfill 方式在目标环境中添加缺失的特性（core-js）
  • 源码转换（codemods）
// Babel 输入： ES2015 箭头函数 
[1, 2, 3].map(n => n + 1); 

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

Babel配置

首先安装相关插件：

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

创建babel.config.js文件：

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 包更小！

安装插件：

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

开启智能预设：

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

配置参数：

  • targets：编译目标浏览器的版本，默认为{}
  • modules：是否启用 ES 模块语法到其他模块类型的转换，默认是auto
  • include：需要编译的目录，默认是[]
  • exclude：编译排除项目,默认是[]
  • useBuiltIns：按需加载 默认是entry
    • false：不注入垫片
    • entry：入口处导入所有垫片，文件体积过大
    • usage：按需导入垫片，文件体积小
  • corejs：需要使用的corejs版本

@babel/preset-typescript

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

安装插件：

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

开启智能预设：

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

配置参数：

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

plugins插件

Babel 本身不具备转化功能，而是将转化功能分解到插件中，如果不配置任何插件，经过babel的代码和输入是相同的。

Babel 推崇功能的单一性，就是每个插件的功能尽可能的单一。比如想使用 ES6 的箭头函数，需要插件@babel/plugin-transform-arrow-functions。

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

Babel插件分为语法插件和转译插件两种。

  • 语法插件：仅允许 babel 解析语法，不做转换操作；当添加语法插件后，使得babel能够解析更多的语法
  • 转译插件：当添加转译插件后，会将源代码进行转译输出

Babel处理逻辑

Babel编译流程

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

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

  1. 将Input Code解析为AST（抽象语法树）,这一步称为parsing

  2. 编辑AST，这一步称为transforming

  3. 将编辑后的AST输出为Output Code，这一步称为printing

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

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

解析

通过 @babel/parser 把源代码字符串转成抽象语法树(AST)，在解析过程中主要是两个阶段：词法分析和语法分析。

词法分析阶段把字符串形式的代码解析成一个个具有实际意义的语法单元组成的数据，这种数据被称之为令牌（tokens）流。

被解析语法当中具备实际意义的最小单元，举个例子：'2008年奥运会在北京举行'，这句话不论词性主谓等关系，会把这句话拆分成： 2018年、奥运会、在、北京、举行，这就是分词，把整句话拆分成有意义的最小颗粒，这些最小颗粒不能再继续拆分，否则会失去表达意义。

语法解析器把 Tokens 转换为抽象语法树 AST。

转换

通过@babel/traverse遍历抽象语法树(AST),并调用Babel配置文件中的插件,对抽象语法树(AST)进行增删改

生成

通过@babel/generator把转换后的抽象语法书(AST)生成目标代码。

core-js

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

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

Babel将ES6标准分为syntax（语法）和built-in，Babel默认转译语法类型，对于built-in类型需要通过babel-polyfill来完成转译，polyfill的实现原理就是覆盖。

polyfill的功能可以由core-js实现。

  • syntax：const、箭头函数等会被转译
  • built-in：includes、promise等会被改写覆盖

这有一篇优秀的babel文章可以参考

blog.51cto.com/u_14291117/…

avatar
文章
阅读
粉丝