随着ES6以及后面版本的问世,确实给前端JavaScript增添了不少活力,层出不穷的高级语法不仅提升编码效率,还使得前端的编码风格越来越靠近贴近主流。然而这些高级语法在有些浏览器上却运行不了,是因为浏览器还没法编译js的高级语法导致出现兼容性问题,需要将这些高级语法编译成浏览器能够运行的低版本语法。今天讲解的babel就是来解决这个js兼容问题的。
Babel,又名Babel.js。 是一个用于web 开发,且自由开源的JavaScript 编译器、转译器。 Babel 使软件开发者能够以偏好的编程语言或风格来写作源代码,并将其利用Babel 翻译成JavaScript。 Babel 是一个常用来使用最新的JavaScript 语言特性的工具。——维基百科
前置知识
babel编译流程
babel其实就是将源码转换成目标源码的一个过程,大致分为三步
- parse: 通过parser把源码转成抽象ast语法树
- transform: 循环遍历ast,通过transform的能力对其进行语法转换
- generate: 根据转换后的源码生产目标源码
![](https://i-blog.csdnimg.cn/blog_migrate/6e4b7dcfc69059a4493b2ff37116a04e.webp?x-image-process=image/format,png)
主要依赖库介绍
@babel-core:babel核心编译库,它能够进行语法、语义、词法分析,生成抽象语法树**@babel-cli**:负责命令相关的功能,提供 bebel 命令**@babel/preset-env**:ES6稳定语法transform插件的集合**@babel/runtime**: 运行时,配合transform-runtime**@babel/plugin-transform-runtime**:polyfill垫片防止污染全局变量(第三方库必须得接入)@babel/polyfill:高级语法兼容解决方案依赖
学习babel,你主要掌握一下三个模块就差不多了:
- 1、环境搭建,基本配置
- 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 @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env -D
生产依赖
yarn add @babel/polyfill @