你需要掌握的babel知识都在这里

随着ES6以及后面版本的问世&＃xff0c;确实给前端Javascript增添了不少活力&＃xff0c;层出不穷的高级语法不仅提升编码效率&＃xff0c;还使得前端的编码风格越来越靠近贴近主流。然而这些高级语法在有些浏览器上却运行不了&＃xff0c;是因为浏览器还没法编译js的高级语法导致出现兼容性问题&＃xff0c;需要将这些高级语法编译成浏览器能够运行的低版本语法。今天讲解的babel就是来解决这个js兼容问题的。

Babel&＃xff0c;又名Babel.js。 是一个用于web 开发&＃xff0c;且自由开源的Javascript 编译器、转译器。 Babel 使软件开发者能够以偏好的编程语言或风格来写作源代码&＃xff0c;并将其利用Babel 翻译成Javascript。 Babel 是一个常用来使用最新的Javascript 语言特性的工具。——维基百科

babel官网

前置知识

babel编译流程

babel其实就是将源码转换成目标源码的一个过程&＃xff0c;大致分为三步

• parse: 通过parser把源码转成抽象ast语法树
• transform: 循环遍历ast&＃xff0c;通过transform的能力对其进行语法转换
• generate: 根据转换后的源码生产目标源码

主要依赖库介绍

&＃64;babel-core&＃xff1a;babel核心编译库&＃xff0c;它能够进行语法、语义、词法分析&＃xff0c;生成抽象语法树
&＃64;babel-cli&＃xff1a;负责命令相关的功能&＃xff0c;提供 bebel 命令
&＃64;babel/preset-env&＃xff1a;ES6稳定语法transform插件的集合
&＃64;babel/runtime: 运行时&＃xff0c;配合transform-runtime
&＃64;babel/plugin-transform-runtime&＃xff1a;polyfill垫片防止污染全局变量&＃xff08;第三方库必须得接入&＃xff09;
&＃64;babel/polyfill&＃xff1a;高级语法兼容解决方案依赖

学习babel&＃xff0c;你主要掌握一下三个模块就差不多了&＃xff1a;

• 1、环境搭建&＃xff0c;基本配置
• 2、babel-polyfill
• 3、babel-runtime

基本配置

搭建一个简单的项目

┌-- src
┆ └--index.js
├-- .babelrc
└-- package.json

配置scripts命令

# package.json
{..."scripts": {"babel": "babel src/index.js --out-dir dist"},...
}

安装

开发依赖

yarn add &＃64;babel/cli &＃64;babel/core &＃64;babel/plugin-transform-runtime &＃64;babel/preset-env -D

生产依赖

yarn add &＃64;babel/polyfill &＃64;babel/runtime -S

配置.babelrc

{"presets": [["&＃64;babel/preset-env"]],"plugins": []
}

到这里一个最基础版本的babel就配置好了&＃xff0c;运行看看
src/index.js

const sum &＃61; (a, b) &＃61;> a &＃43; b;

输出
dist/index.js

"use strict";var sum &＃61; function sum(a, b) {return a &＃43; b;
};

证明babel已经可以将箭头函数转换为 function 函数了&＃xff0c;大功告成&＃xff01;先别高兴太早&＃xff0c;插播一段解释。。。。。。。

1、解释一下&＃64;babel/preset-env
这个是ES6稳定语法编译插件的集合&＃xff0c;什么意思&＃xff1f;就是除掉一小部分高级语法&＃xff08;无法用js完整表示&＃xff09;以外的ES6语法转换成低版本js的插件的集合。
举例&＃xff1a;如果不用预设&＃xff0c;上面src/inex.js中的箭头函数得单独安装&＃64;babel/plugin-transform-arrow-functions插件来完成转译

{"presets": [], "plugins": ["&＃64;babel/plugin-transform-arrow-functions"],//"targets": "last 2 Chrome versions"
}

也是可以正常转译箭头函数&＃xff0c;也就是说在babel中一种语法就得需要对应一个插件来转译&＃xff0c;这里所说的&＃64;babel/preset-env预设就是很多稳定语法转译成低版本js插件的集合&＃xff0c;目的是方便使用&＃xff0c;减少配置成本。
2、这里再补充一下几个官方的预设
&＃64;babel/preset-react&＃xff1a;用来编译jsx语法
&＃64;babel/preset-typescript&＃xff1a;用来将ts文件转成js文件
&＃64;babel/preset-flow&＃xff1a;用来将使用flow类型约束的文件转成js文件
3、既然babel是将高级语法转成低版本语法来做兼容处理&＃xff0c;那到底要转到多低的版本呢&＃xff1f;&＃xff1f;&＃xff1f;
&＃64;babel/preset-env会根据配置文件中的targets属性来生成插件列表后编译&＃xff0c;在浏览器或electron中&＃xff0c;官方还是推荐用.browserslistrc来配置目标环境。如果babel配置文件没有设置targets或ignoreBrowserslistConfig&＃xff0c;&＃64;babel/preset-env会使用默认的browserslist配置源&＃xff08;**> 0.5%, last 2 versions, Firefox ESR, not dead**&＃xff09;

好了&＃xff0c;来继续&＃xff0c;来试试promise高级语法转译情况
src/index.js

const sum &＃61; (a, b) &＃61;> a &＃43; b;
// 新的 API
Promise.resolve(100).then((data) &＃61;> data);

编译后输出

"use strict";
var sum &＃61; function sum(a, b) {return a &＃43; b;
}; // 新的 API
Promise.resolve(100).then(function (data) {return data;
});

发现Promsie根本就没有转译&＃xff0c;也就是说&＃64;babel/preset-env预设没法转译promsie&＃xff0c;怎么解决&＃xff1f;&＃xff1f;&＃xff1f;
引入下一个知识点&＃xff0c;&＃64;babel/polyfill&＃xff0c;简称 “垫片”&＃xff0c;说白了就是用这个来抹平部分高级语法的兼容问题

&＃64;babel/polyfill 垫片

&＃64;babel/polyfill其实是一个空壳&＃xff0c;他当中包含 core-js 和 regenerate&＃xff0c;真正起作用的是这两个依赖包

使用

在入口文件的顶部引入

import "&＃64;babel/polyfill";

执行编译&＃xff0c;输出&＃xff0c;都正常了

但是&＃64;babel/polyfill89.4kb完全引入了&＃xff0c;而这里只需要promsie对应的垫片就OK了&＃xff0c;造成编译出来的文件内存很大&＃xff0c;又是一个头疼的问题来了&＃xff01;&＃xff01;&＃xff01;

官方出了解决方案&＃xff0c;Babel&＃64;7.4.0版本之前&＃xff0c;还是得用上面这种全量引入的方式&＃xff0c;之后&＃xff0c;可以分开引入

import "core-js/stable";
import "regenerator-runtime/runtime";

这也差不多&＃xff0c;没多大效果&＃xff0c;那有没有一种自动按需引入的解决方案呢&＃xff1f;
要说还得看官方&＃xff0c;这不方案就来了吗

{ "presets": [ [ "&＃64;babel/preset-env", { "useBuiltIns": "usage", "corejs": "3" } ] ]
}

配置完后&＃xff0c;编译&＃xff0c;输出

"use strict";require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.promise.js");
var sum &＃61; function sum(a, b) {return a &＃43; b;
}; // 新的 API
Promise.resolve(100).then(function (data) {return data;
});

完美解决&＃xff01;&＃xff01;&＃xff01;

到这里&＃xff0c;如果自己的业务项目配置到此就结束了
如果是开发第三方依赖包&＃xff0c;还得继续往下看

&＃64;babel/plugin-transform-runtime

咱们不解释为啥&＃xff0c;先看使用了&＃64;babel/plugin-transform-runtime插件和没使用输出的代码。
src/index.js

class Test {}

未使用的输出情况

"use strict";require("core-js/modules/es.object.define-property.js");function _defineProperties(target, props) { for (var i &＃61; 0; i });

使用后的输出情况

"use strict";var _interopRequireDefault &＃61; require("&＃64;babel/runtime-corejs3/helpers/interopRequireDefault");var _createClass2 &＃61; _interopRequireDefault(require("&＃64;babel/runtime-corejs3/helpers/createClass"));var _classCallCheck2 &＃61; _interopRequireDefault(require("&＃64;babel/runtime-corejs3/helpers/classCallCheck"));var Test &＃61; /*#__PURE__*/(0, _createClass2["default"])(function Test() {(0, _classCallCheck2["default"])(this, Test);
});

从两段输出代码可以看出&＃xff0c;后一种是用变量来储存插件的方法&＃xff0c;而且是采用抽离公共代码的helper文件导出方法的形式&＃xff0c;而前一种则是把方法直接编译到了文件内&＃xff0c;试想一下会出什么问题&＃xff1f;

如果一个项目有多个地方用到了class类&＃xff0c;转译时每个文件都要多出这段代码&＃xff0c;造成严重的代码冗余&＃xff0c;还有一点&＃xff0c;直接将方法编译到文件会污染文件的全局环境&＃xff0c;尤其是作为第三方类库提供给别人使用时&＃xff0c;很可能被覆盖掉&＃xff0c;应该避免不必要的冲突

&＃64;babel/runtime 和 &＃64;babel/plugin-transform-runtime这两个插件要配合使用&＃xff0c;得同时安装

{"presets": [["&＃64;babel/preset-env",{"useBuiltIns": "usage","corejs": 3}]],"plugins": [["&＃64;babel/plugin-transform-runtime",{"absoluteRuntime": false,"corejs": 3,"helpers": true,"regenerator": true,"useESModules": false}]]
}

结论&＃xff1a;开发类库用polyfill &＃43; runtime&＃xff0c;公司业务项目用polyfill就行了

完结