为什么需要babel?
事实上,在开发中我们很少直接去接触babel,但是babel对于前端开发来说,目前是不可缺少的一部分:
- 开发中,我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的;
- 所以,学习Babel对于我们理解代码从编写到线上的转变过程至关重要。
Babel是什么?
官方给出的解释是,Babel是一个工具链,主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript。
主要包括:语法转换、源代码转换等;
例如:现在有一个数组,数组里有一些数字,将它进行转化,每个元素+1,开发中常用ES6的写法,使用箭头函数,看起来很直观,提高开发效率,但这种代码有些浏览器无法识别,不能解析,会报错。但下面的ES5是比较老的,JS引擎都可以识别,我们不会手动转化,这个时候就用到babel了
Babel命令行使用
babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用。
如果我们希望在命令行尝试使用babel,需要安装如下库:
@babel/core:babel的核心代码,必须安装;
@babel/cli:可以让我们在命令行使用babel;npm install @babel/cli @babel/core-D
使用babel来处理我们的源代码:
src:是源文件的目录;
–out-dir:指定要输出的文件夹名;
–out-file: 指定要输出的文件名。
npxbabel src--out-dirdist
插件的使用
比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件:
npm install @babel/plugin-transform-arrow-functions -D
npxbabel src--out-dirdist--plugins=@babel/plugin-transform-arrow-functions
查看转换后的结果:我们会发现const 并没有转成var
- 这是因为plugin-transform-arrow-functions,并没有提供这样的功能;
- 我们需要使用plugin-transform-block-scoping 来完成这样的功能。
npm install @babel/plugin-transform-block-scoping -D
npxbabel src--out-dirdist--plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions
Babel的预设preset
但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset):
后面我们再具体来讲预设代表的含义;
安装@babel/preset-env预设:
npm install @babel/preset-env -D
执行如下命令:
npxbabel src--out-dirdist--presets=@babel/preset-env
Babel的底层原理
babel是如何做到将我们的一段代码(ES6、TypeScript、React)转成另外一段代码(ES5)的呢?
- 从一种源代码(原生语言)转换成另一种源代码(目标语言),这是什么的工作呢?
- 就是编译器,事实上我们可以将babel看成就是一个编译器。
- Babel编译器的作用就是将我们的源代码,转换成浏览器可以直接识别的另外一段源代码。
Babel也拥有编译器的工作流程:
解析阶段(Parsing)
转换阶段(Transformation)
生成阶段(Code Generation)