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
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json