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内部,会执行如下步骤:

  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

core-js

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

  • 一直到ES2021polyfill
  • promisesymbolsiterators等一些特性的实现
  • ES提案中的特性实现
  • 跨平台的WHATWG / W3C特性,比如URL
相关推荐
BillKu2 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
面向星辰2 小时前
html中css的四种定位方式
前端·css·html
Async Cipher3 小时前
CSS 权重(优先级规则)
前端·css
大怪v3 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
Liquad Li3 小时前
Angular 面试题及详细答案
前端·angular·angular.js
用户21411832636024 小时前
首发!即梦 4.0 接口开发全攻略:AI 辅助零代码实现,开源 + Docker 部署,小白也能上手
前端
gnip5 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart6 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.6 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu6 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架