Babel 学习笔记

1.Babel是一个工具集，主要用于将ES6版本的JavaScript代码转为ES5等向后兼容的JS代码，从而可以运行在低版本浏览器或其它环境中

2.polyfill提供了全局的ES6对象以及通过修改原型链Array.prototype等实现对实例的实现

3.配置文件总结起来就是配置plugins和presets这两个数组，我们分别称之为插件数组和预设数组。每个插件或预设都是一个npm包。

4.plugins插件数组和presets预设数组是有顺序要求的（如果两个插件或预设都要处理同一个代码片段），规则如下：

• 插件比预设先执行
• 插件执行顺序是插件数组从前向后执行
• 预设执行顺序是预设数组从后向前执行

5.Babel预设与插件的选择

5.1 preset预设的选择

 虽然Babel7官方有90多个插件，不过大半已经整合在@babel/preset-env和@babel/preset-react等预设里了，我们在开发的时候直接使用预设就可以了
 一个普通的vue工程，Babel官方的preset只需要配一个”@babel/preset-env”就可以了

总结起来，Babel官方的preset，我们实际可能会用到的其实就只有4个：

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

5.2 plugin插件的选择

目前比较常用的插件只有@babel/plugin-transform-runtime

小结：
在我们开发的过程中可能用到4个预设和1个插件。分别是@babel/preset-env、@babel/preset-flow、@babel/preset-react、@babel/preset-typescript这4个预设，以及 @babel/plugin-transform-runtime 这1个插件。

6.babel-polyfill

什么是补齐API？ 简单解释就是，通过 Polyfill 的方式在目标环境中添加缺失的特性
通过 polyfill.js 文件来补齐代码运行时环境所缺失的API

Babel官方的polyfill使用的推荐方法

1. 在前端工程的入口文件里引入core-js/stable与regenerator-runtime/runtime；
2. 在前端工程构建工具的配置文件入口项引入core-js/stable与regenerator-runtime/runtime；

7.@babel/preset-env
建立babel.config.js文件，文件内容如下：

	module.exports = {
		presets: ["@babel/env"],
		plugins: []
	}

• (1)可以通过browserslist针对目标环境不支持的语法进行语法转换，推荐使用browserslist的配置而很少单独配置@babel/preset-env的targets
• (2) useBuiltIns:”entry”
• (3) useBuiltIns:”usage”，Babel发现useBuiltIns的值是usage后，会自动进行polyfill的引入
• (4) entry与usage这两个参数值的区别：entry这种方式不会根据我们实际用到的API进行针对性引入polyfill，而usage可以做到。另外，在使用的时候，entry需要我们在项目入口处手动引入polyfill，而usage不需要。
• (5)modules参数，这个参数项的取值可以是”amd”、”umd” 、 “systemjs” 、 “commonjs” 、”cjs” 、”auto” 、false。在不设置的时候，取默认值”auto”。

8.@babel/plugin-transform-runtime

@babel/runtime把所有语法转换会用到的辅助函数都集成在了一起。

@babel/plugin-transform-runtime有三大作用，其中之一就是自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代。这样就减少了我们手动引入的麻烦。

@babel/plugin-transform-runtime有三大作用：

• 1.自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代；
• 2.当代码里使用了core-js的API，自动引入@babel/runtime-corejs3/core-js-stable/，以此来替代全局引入的core-js/stable;
• 3.当代码里使用了Generator/async函数，自动引入@babel/runtime/regenerator，以此来替代全局引入的regenerator-runtime/runtime；

如果我们使用@babel/plugin-transform-runtime来做polyfill的事情，那么就不要再使用之前讲过的polyfill方式了，无论是单独引入还是@babel/preset-env的方式。因为我们用transform-runtime来做api转换的目的是不污染全局作用域。

小结：

• 要使用@babel/plugin-transform-runtime插件，其实只有一个npm包是必须要装的，那就是它自己@babel/plugin-transform-runtime。
• 对于@babel/runtime及其进化版@babel/runtime-corejs2、@babel/runtime-corejs3，我们只需要根据自己的需要安装一个。
• 如果你不需要对core-js做API转换，那就安装@babel/runtime并把corejs配置项设置为false即可
• 如果你需要用core-js2做API转换，那就安装@babel/runtime-corejs2并把corejs配置项设置为2即可。
• 如果你需要用core-js3做API转换，那就安装@babel/runtime-corejs3并把corejs配置项设置为3即可