一. Babel

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

  • 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
  • 所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；

那么，Babel到底是什么呢？

  • Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的
  • JavaScript；
  • 包括：语法转换、源代码转换等；

1.Babel命令行使用

  1. babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。

  2. 如果我们希望在命令行尝试使用babel，需要安装如下库：

  • @babel/core：babel的核心代码，必须安装；
  • @babel/cli：可以让我们在命令行使用babel

npm install @babel/cli @babel/core -D

  1. 使用babel来处理我们的源代码：
  • src：是源文件的目录；
  • --out-dir：指定要输出的文件夹dist；

npx bable text.js --out-dir dist

2.插件使用

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

npm install @babel/plugin-transform-arrow-functions -D

npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

2. 查看转换后的结果：我们会发现 let 并没有转成 var

  • 这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
  • 我们需要使用 plugin-transform-block-scoping 来完成这样的功能；

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

webpack-Babel_编译器

3.Babel的预设preset

但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：

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

安装@babel/preset-env预设：

执行如下命令：

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

4.Babel的底层原理

1.babel是如何做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的呢？

  • 从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
  • 就是编译器，事实上我们可以将babel看成就是一个编译器。
  • Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；

2.Babel也拥有编译器的工作流程：

  • 解析阶段（Parsing）
  • 转换阶段（Transformation）
  • 生成阶段（Code Generation）

5.Babel编译器执行原理

webpack-Babel_编译器_02

二.babel-loader

1.在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。
2.那么我们就需要去安装相关的依赖：

npm install babel-loader @babel/core -D

3.我们可以设置一个规则，在加载js文件时，使用我们的babel：

webpack-Babel_json_03

4.指定使用的插件
这里的插件 在上面命令行使用babel的时候已经下过了

webpack-Babel_加载_04

三.babel-preset

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

  • env
  • react
  • TypeScript
  • 安装preset-env：

npm install @babel/preset-env -D

webpack-Babel_命令行_05

四.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项目的子包，更加推荐；

webpack-Babel_配置文件_06

配置单独文件后，可以直接使用loader

webpack-Babel_配置文件_07

五.完整配置babel-loader

1.下载babel-loader

  • @babel/core：babel的核心代码，必须安装
  • babel-loader：
  • babel-preset-env： 预设来加载对应的插件列表，并且将其传递给babel。

npm install babel-loader @babel/core @babel/preset-env -D

2.配置 Babel的配置文件

webpack-Babel_配置文件_06

3.使用babel-loader

webpack-Babel_加载_09