• 为什么需要babel
• Babel的底层原理
• babel-loader
  • babel-preset
• Babel的配置文件

为什么需要babel

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

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

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

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

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

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

• src：是源文件的目录；

• --out-dir：指定要输出的文件夹dist；

• --out-file : 输出到文件

• --plugins ：使用插件来转换

• • @babel/plugin-transform-arrow-functions 转换箭头函数
  • @babel/plugin-transform-block-scoping 转换块级作用域， const、let转换

• --presets=@babel/preset-env ： 使用预设，里面包括了预设好的插件

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

npx babel demo-src.js --out-file demo.js --presets=@babel/preset-env

Babel 是什么？ · Babel 中文网 (babeljs.cn) (opens new window)

Babel的底层原理

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

• 从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？

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

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

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

• 解析阶段（Parsing）

• 转换阶段（Transformation）

• 生成阶段（Code Generation）

参考：https://github.com/jamiebuilds/the-super-tiny-compiler

babel-loader

webpack只是模块打包工具，js里面写的es6语法，是不会被编译成es5的，所以需要使用babel-loader进行转换。

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

npm install -D @babel/cli @babel/core babel-loader @babel/preset-env  @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoping

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

{
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            // plugins: [
            //   "@babel/plugin-transform-arrow-functions",
            //   "@babel/plugin-transform-block-scoping",
            // ]
            presets: [
              "@babel/preset-env"
            ]
          }
        }
}

babel-preset

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

比如常见的预设有三个：

• env npm install @babel/preset-env -D

• react npm install --save-dev @babel/preset-react

• TypeScript npm install --save-dev @babel/preset-typescript

• flow npm install --save-dev @babel/preset-flow

Babel的配置文件

babel.config.js

module.exports = {
  presets: [
    "@babel/preset-env"
  ]
}