babel使用记录

babel详解

为什么要使用babel？es6之后的一些语法特性，部分浏览器不支持，所以需要把开发代码翻译成浏览器可理解的运行代码。

作用

1. 语法转换
2. 通过 Polyfill 方式在目标环境中添加缺失的特性
3. 源码转换 (codemods)

babel的工作原理

Code => AST => new AST => new Code

为了转换我们的代码， babel做了三件事：

• Parser：解析我们的代码转换为 AST。(@babel/parser)
• Transformer：利用我们配置好的 plugins/presets把 Parser生成的 AST转变为新的 AST。(@babel/preset-*)
• Generator：把转换后的 AST生成新的代码(@babel/generator)

涉及 @babel/core，@babel/cli，@babel/plugin*，@babel/preset-env，@babel/polyfill，@babel/runtime，@babel/plugin-transform-runtime

@babel/cli

Babel带有内置CLI，可用于从命令行编译文件。

@babel/core

@babel/core 包括了整个babel工作流，也就是说在@babel/core里面我们会使用到@babel/parser、transformer[s]、以及@babel/generator。

所有的transformations都会使用babel.config.js文件

@babel/parser

@babel/parser的作用是将源代码解析成 AST ，方便各个插件分析语法进行相应的处理。

@babel/generator

@babel/generator将修正后的AST解码生成js代码。

@babel/preset-env

@babel/preset-env`是一个智能预设，可让您使用最新的JavaScript，转化最新语法如箭头函数, class, 扩展运算符，想要转换最新的api还需引入`@babel/polyfill

@babel/preset-env接受您指定的任何目标环境，并根据其映射检查它们，以编译插件列表，并将其传递给Babel。

@babel/polyfill

babel只负责语法转换，比如将ES6的语法转换成ES5。但如果有些对象、方法，浏览器本身不支持，比如：

1. 全局对象：Promise、WeakMap 等。
2. 全局静态函数：Array.from、Object.assign 等。
3. 实例方法：比如 Array.prototype.includes 等。

此时，需要引入@babel/polyfill来模拟实现这些对象、方法。需要安装在生产依赖中