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

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

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

babel官网

前置知识

babel编译流程

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

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

主要依赖库介绍

@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 &