为什么需要babel?
事实上,在开发中,我们很少直接去接触babel。但是babel对于前端开发者来说,目前是不可缺少的一部分:比如,我们想要使用ES6+的语法、想要使用TypeScript、开发React项目等,这些都需要借助babel最终转化成JS的
开发React项目,我们需要写jsx语法,这些jsx语法需要通过babel转化成 js 语法
babel到底是什么?
babel是一个工具链(与postcss很像),主要用于旧浏览器或者缓解将ECMAScript 2015+代码转换为向后兼容版本的JS。包括:语法转换、源代码转换、polyfill等
babel、postcss 很像“工具集成的场所” babel和postcss里有很多插件可以实现很多功能
// 用到了箭头函数(ES6的语法),有的浏览器可能无法识别
[1,2,3].map(n => n+1);
// 需要借助babel转换成普通函数写法,这样,所有浏览器就都可以识别了
[1,2,3].map(function(n) {
return n + 1;
})
babel命令行使用
babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置也可以单独使用。
如果我们希望单独使用babel的话,在命令行尝试使用babel。
1)安装
npm i -D @babel/core @babel/cli
- @babel/core:babel的核心代码,必须安装;
- @babel/cli :可以让我们在命令行中使用babel
如果你在命令行中使用babel的话,我们需要安装@babel/cli(这个的作用就是能让你在命令行中使用babel); 如果你在webpack中使用babel,不需要在命令行中使用的话,是不需要安装@babel/cli的
2)使用babel
注意!!!必须搭配插件才可产生作用(同postcss使用)(以转换ES6中的箭头函数为例)
① 安装插件
npm i -D @babel/plugin-transform-arrow-functions
② 转换箭头函数
npx babel src —out-dir dist —plugins=@babel/plugin-transform-arrow-functions
补充 - 多个插件的写法(用“,”分开) npx babel src —out-dir dist —plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
babel的preset(预设)
但是如果要转换的内容过多,一个个设置是比较麻烦的(需要安装使用好多插件),我们可以使用预设(preset)
preset相当于一系列插件的组合,它会默认查找所需要的插件。(查找的方法同browerslist)
1)安装 @babel/preset-env
npm i -D @babel/preset-env
2)使用
npx babel src —out-dir dist —presets=@babel/preset-env
babel的底层原理
Q:babel是如何做到将我们的一段代码(ES6、TypeScript、React)转成另外一段代码(ES5)的呢?从一种源代码(原生语言)转换成另一种源代码(目标语言),这是什么的工作呢?
就是编译器,事实上我们可以将babel看成就是一个编译器。Babel编译器的作用就是将我们的源代码,转换成浏览器可以直接识别的另外一段源代码。
babel编译器执行原理
https://github.com/jamiebuilds/the-super-tiny-compiler 用js写的编译器 代码写得也很好 所以有空多去阅读别人的源代码 学习学习!!!
1)babel的执行阶段(简化版)
babel 也拥有编译器的工作流程(主要有以下3个阶段):
- 解析阶段(Parsing);
- 转换阶段(Transformation);
- 代码生成阶段(Code Generation)
ES6源代码 = 解析=》 原AST树 = 转换=》 新AST树 =通过代码生成技术=》ES5代码
当然,这只是一个简化版的编译器工具流程。
2)babel的执行阶段(真正版本)
①原生源代码
词法分析
②tokens数组
babel通过词法分析,将原生源代码生成tokens数组,生成结构如下所示。
语法分析
③ AST(抽象语法树)
babel通过语法分析,将tokens数组转化为 AST ,如下图所示。
遍历、访问、应用插件
④ 转成新的AST
babel遍历AST后进行访问操作,并通过相应的插件转成新的AST,如下图所示。