认识Babel ***

Babel是什么？
用于解析ES6，甚至比ES6更高级的语法，到ES5或ES4级别，满足浏览器的兼容性

环境搭建 & 基本配置

① package.json配置安装：

"devDependencies": {
  "@babel/cli": "^7.7.5",
  "@babel/core": "^7.7.5",
  "@babel/preset-env": "^7.7.5"
  "@babel/plugin-transform-runtime": "^7.7.5",
},
"dependencies": {
  "@babel/polyfill": "^7.7.0",
  "@babel/runtime": "^7.7.5"
}

.babelrc文件 配置:

• plugins 里配置插件负责进行语法的转换
• preset 预设，常用的plugins的集合，可以作为 Babel 插件的组合。

{
	"presets": [
		[
			"@babel/preset-env", //es6+常用语法的解析
		]
	],
	"plugins": [
	]
}

babel-polyfill

前置知识：

polyfill补丁：

polyfill是补丁，例如Array.IndexOf方法，根据浏览器的兼容情况，若不兼容，polyfill做一个补丁，使之兼容。

core-js 标准库：

core.js 是一个标准的库，集成了 ES6 ES7等所有新语法的polyfill（补丁），缺点是不支持regenerator的兼容性。

regenerator 运行时库：

这是 Facebook 提供的 facebook/regenerator 库，用来实现 ES6/ES7 中 generators、yield、async 及 await 等相关的 polyfills。

babel-polyfill是什么？

• babel本身只解析ES6的语法，如箭头函数；对于新的API, 如Promise,includes(),本身符合ES5的语法规范，babel不会进行解析；
• babel-polyfill 通过补丁的方式实现的ES6+新的API解析；
• babel-polyfill 是 core-js 标准库和regenerator库的集合。
• babel 7.4之后弃用 balel-polyfill
• 推荐直接使用core.js 和 regenerator

babel-polyfill 如何按需引入？

修改.babelrc文件的配置按需引入：

{
	"presets": [
		[
			"@babel/preset-env", //es6+常用语法的解析
      {
				"useBuiltIns": "usage",//按需引用
				"corejs": 3 //corejs版本
			}
		]
	],
	"plugins": [
	]
}

babel-polyfill 的问题

污染全局环境

使用ES6的API Promise、includes时：

// 新的 API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)

babel-polyfill兼容处理后：

window.Promise = function() {}
Array.prototype.includes = function () {}

重新定义了window.Promise和Array原型的方法，污染了全局环境.

babel-polyfill 的问题：

• 如果做一个独立的web系统，则无碍；
• 如果做一个第三方的库（lib），则会有问题：

如使用方定义：window.Promise = function() {}，与之前兼容处理 window.Promise = function() {} 出现冲突：

babel-runtime

babel-runtime配置使用：
① package.json 配置安装插件 @babel/plugin-transform-runtime、@babel/runtime ，具体参见上面package.json配置；

② .babelrc文件配置plugins：引用plugin-transform-runtime，并配置选项：

{
	"presets": [
		[
			"@babel/preset-env", //es6+常用语法的解析
		]
	],
	"plugins": [
    [
			"@babel/plugin-transform-runtime",
			{
				"absoluteRuntime": false,
				"corejs": 3,
				"helpers": true,
				"regenerator": true,
				"useESModules": false
			}
		]
	]
}

babel-runtime兼容处理后：
Promise->_Promise,includes->_includes。

所以babel-runtime不会污染全局环境

babel-polyfill VS babel-runtime

babel-polyfill：

• 需要在你自己的代码中手工引入（最好放在 vendor 里）
• 它会以全局变量污染的方式 polyfill 内建类（如 Map、Set、Promise 等），同时也会通过修改 Array、String、Object 等原型的方式添加实例方法（如 Array.prototype.includes()、String.prototype.padStart() 等），内建类的静态方法（如 Array.from() 等）也会被 polyfill
• babel-polyfill 适合于开发独立的业务应用，及时全局污染、prototype 被修改也不会受到太大的影响，babel-polyfill 不适合开发第三方类库。

babel-plugin-transform-runtime：

• 需要你在 .babelrc 或 Babel 编译选项中将该插件添加到 plugins 中
• 插件只会 polyfill 你用到的类或方法，由于采用了沙盒（Sandbox）机制，它不会污染全局变量，同时也不会去修改内建类的原型，带来的坏处是它不会 polyfill 原型上的扩展（例如 Array.prototype.includes() 不会被 polyfill，Array.from() 则会被 polyfill）
• 插件的方式适合于开发第三方类库，不适合开发需要大量使用 Array 等原型链扩展方法的应用。