bable兼容性解决方案

发表于 |

babel兼容js解决方案

为什么需要babel?

在日趋月异的前端的发展中，前端工程化模块化的加快，w3c新的标准和api对于前端来说越来越方便，而对于这些新的语法糖和新的标准，在头疼的前端浏览器面前造成的不能统一兼容的问题也凸显出来，为了能够将这些新的特性和一些语法糖进行兼容处理，babel就应运而生

原理

如何将这些不兼容的代码进行装换，整个过程分为解析，转译的过程，首先我们需要了解@babel/core这个包，这个包是bable的一个核心基础包，该包的作用就是将我们的不兼容的代码进行装换成我们的ast，通过我们的presets（类似于plugins的合集）和plugins进行转义成符合兼容性要求的代码（ps：babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如Proxy、Set等），这些babel是不会转译的。需要用户自行引入polyfill来解决）

plugins

plugins的作用就是来讲babel转义的ast进行plugin的类别再进行一次转义，常见的plguins的名字中基本为@babel/plugin-transform-xxx, 比如@babel/plugin-transform-class等

presets

在项目中需要使用的大量的需要转义的写法事，太多的plugins显得比较繁琐，所以preset就出现了，我认为他就是一个plugins的集合。@babel/preset-env是为了解决早期，preset标准不统一，存在es20xx的各个版本不统一的问题.

polyfill

polyfill作为es6的一个shim，主要的原理就是对于将core.js和regenerator runtime包装了下，这两个包才是真正的实现代码所在。使用babel-polyfill会把ES2015+环境整体引入到你的代码环境中，让你的代码可以直接使用新标准所引入的新原生对象，新API等，一般来说单独的应用和页面都可以这样使用
使用方法的话一般分为两种，主要是：

1
2
3
4
1. 入口文件进行直接引入 
	require('@babel/polyfill')
2. webpack打包入口entry中添加
	entry:['@babel/polyfill', 'xxx.js']

runtime

在编译后，我们会发现，很多兼容的api和方法会被编译成兼用的方法。这样就导致了一个问题，在每个文件里都会重复这样的方法和方式，这就导致了代码的臃肿性，所以我们在这里提到了runtime

1
2
3
4
5
6
{
	presets:['@bable/preset-env'],
	plugins:[
		"@babel/plugin-transform-runtime"
	]
}

@babel/runtime 的作用就是将那些兼容后的模块进行统一处理，即进行模块化的应用，而@babel/plugin-transform-runtime这个插件的作用就是用来自动化引用runtime里面的模块。

1
2
3
4
5
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));