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
相关推荐
Cosolar1 分钟前
前端如何实现VAD说话检测?
前端
CodeSheep19 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅23 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼11 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架