Babel

第一章：初识

一、简介

1. 是什么

Babel 是一个通用的多功能的 JavaScript 编译器。主要用于将采用 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在旧版本的浏览器或其他环境中。

常见的用途有：

• 语法转换

• 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js）

• 源码转换（codemods）

  例如我们在 React 经常使用 JSX 语法，由于这不是 JS 原生语法，所以不能直接被 JS 引擎编译执行。在代码被执行之前，需要使用编译器进行转译，转换成 JS 代码。

2. 原理

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

对于不了解编译原理的前端开发人员，这里推荐一个 github 上面的 mini 级别的项目：jamiebuilds/the-super-tiny-compiler

二、快速入门

1. 基本使用

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

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

• @babel/core：babel 的核心代码，必须安装；

• @babel/cli：可以让我们在命令行使用 babel；

npm install @babel/cli @babel/core

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

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

重点：Babel 本身不做任何处理，只是会解析源代码转为 AST 抽象语法树，如果需要对代码降级等，一切需要插件来完成。

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 来完成这样的功能。

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

问题：一个插件一个功能，让我们自己来一个个配置，好麻烦，怎么办？使用预设。

3. 使用预设 preset

安装 @babel/preset-env 预设：

npm install @babel/preset-env -D

执行如下命令：

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

4. 与 Webpack 结合

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

那么就需要去安装相关的依赖：(如果之前已经安装了 @babel/core，这里就不需要再次安装)

npm install babel-loader @babel/core

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

module: {
  rules: [
    {
      test: /\.m?js$/,
      use: {
        loader: "babel-loader"
      }
    }
  ]
},