为什么需要 babel?

事实上,在开发中我们很少直接去接触 babel,但是babel 对于前端开发来说,目前是不可缺少的一部分

开发中,我们想要使用 ES6+的语法,想要使用 TypeScript,开发 React 项目,它们都是离不开 Babel 的;

所以,学习 Babel 对于我们理解代码从编写到线上的转变过程至关重要;

那么,Babel 到底是什么呢?

Babel 是一个工具链,主要用于旧浏览器或者环境中将 ECMAScript 2015+代码转换为向后兼容版本的 JavaScript;

包括:语法转换、源代码转换等;

image-20210925152002988

Babel 命令行使用

babel 本身可以作为一个独立的工具(和 postcss 一样),不和 webpack 等构建工具配置来单独使用。

如果我们希望在命令行尝试使用 babel,需要安装如下库:

  • @babel/core:babel 的核心代码,必须安装;
  • @babel/cli:可以让我们在命令行使用 babel;
1
npm install @babel/cli @babel/core -D

使用 babel 来处理我们的源代码:

  • src:是源文件的目录;
  • –out-dir:指定要输出的文件夹 dist;
1
npx babel src --out-dir dist

插件的使用

比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件

1
2
npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看转换后的结果:我们会发现 const 并没有转成 var

这是因为 plugin-transform-arrow-functions,并没有提供这样的功能;

我们需要使用 plugin-transform-block-scoping 来完成这样的功能;

1
2
npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

Babel 的预设 preset

但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset):

后面我们再具体来讲预设代表的含义;

安装@babel/preset-env 预设:

1
npm install @babel/preset-env -D

执行如下命令:

1
npx babel src --out-dir dist --presets=@babel/preset-env

Babel 的底层原理

babel 是如何做到将我们的一段代码(ES6、TypeScript、React)转成另外一段代码(ES5)的呢?

从一种源代码(原生语言)转换成另一种源代码(目标语言),这是什么的工作呢?

就是编译器,事实上我们可以将 babel 看成就是一个编译器。

Babel 编译器的作用就是将我们的源代码,转换成浏览器可以直接识别的另外一段源代码

Babel 也拥有编译器的工作流程:

  • 解析阶段(Parsing)
  • 转换阶段(Transformation)
  • 生成阶段(Code Generation)

github 项目地址:https://github.com/jamiebuilds/the-super-tiny-compiler

Babel 编译器执行原理

Babel 的执行阶段

image-20210925152544011

当然,这只是一个简化版的编译器工具流程,在每个阶段又会有自己具体的工作:

image-20210925152602665

babel-loader

在实际开发中,我们通常会在构建工具中通过配置 babel 来对其进行使用的,比如在 webpack 中。

那么我们就需要去安装相关的依赖:

  • 如果之前已经安装了@babel/core,那么这里不需要再次安装;

    1
    npm install babel-loader @babel/core

我们可以设置一个规则,在加载 js 文件时,使用我们的 babel:

image-20210925152654703

指定使用的插件

我们必须指定使用的插件才会生效

image-20210925152720066

babel-preset

如果我们一个个去安装使用插件,那么需要手动来管理大量的 babel 插件,我们可以直接给 webpack 提供一个 preset,webpack 会根据我们的预设来加载对应的插件列表,并且将其传递给 babel。

比如常见的预设有三个:

  • env
  • react
  • TypeScript

安装 preset-env:

1
npm install @babel/preset-env

image-20210925152821178

Babel 的配置文件

像之前一样,我们可以将 babel 的配置信息放到一个独立的文件中,babel 给我们提供了两种配置文件的编写:

babel.config.json(或者.js,.cjs,.mjs)文件;

.babelrc.json(或者.babelrc,.js,.cjs,.mjs)文件

它们两个有什么区别呢?目前很多的项目都采用了多包管理的方式(babel 本身、element-plus、umi 等);

.babelrc.json:早期使用较多的配置方式,但是对于配置 Monorepos 项目是比较麻烦的;

babel.config.json(babel7):可以直接作用于 Monorepos 项目的子包,更加推荐;

image-20210925152916649

Vue 源码的打包

我们主要是学习 Vue 的,那么我们应该包含 Vue 相关的代码:

image-20210925152950069

界面上是没有效果的:并且我们查看运行的控制台,会发现如下的警告信息;

image-20210925153005773

Vue 打包后不同版本解析

vue(.runtime).global(.prod).js:

通过浏览器中的