Babel介绍

Babel 是一个编译器，主要用于将最新的 JavaScript 代码转化为向后兼容的代码，以便在老版本的浏览器或环境中运行。

例如，你可能在开发时使用了 ES6、ES7 或者更高级的 JavaScript 特性，但是有些浏览器可能并不支持这些新特性，这时就可以用 Babel 来将代码转化为 ES5 或者更早版本的 JavaScript，以确保代码能在多数浏览器中正常运行。

其次，Babel 更像是一个平台，它本身的核心功能就是解析代码到抽象语法树（AST），然后再将 AST 转回 JavaScript 代码。所有的语法转换（例如将 ES6 转化为 ES5）和功能添加（例如 polyfills）都是通过各种插件来实现的。这一点有点类似于前面我们学习 CSS 工具链时介绍的 PostCSS。

Babel 官网：https://babeljs.io/

以下是 Babel 的一些主要功能：

• 语法转换：将新的 JavaScript 语法（如 JSX，TypeScript，ES2015+ 特性等）转换为旧的 ES5 语法。

• 源码映射：在编译后的代码中添加源码映射，以方便调试。

• Polyfills：添加缺失的特性，如 Promise，Symbol 等，这称为 polyfill。Babel 提供了一个 Polyfill 功能，能自动引入所需的 Polyfill。这个功能通过 core-js 模块实现（Babel v7.4.0 之前使用的是 @babel/polyfill），可以模拟整个 ES2015+ 环境。

Array.prototype.includes 这个 API 是 ES2016 的新特性，但是一些旧的浏览器是不支持，像这种情况就需要通过 polyfill 天补充缺失的特性，polyfill 就是一段 JS 代码而已，polyfill 这段代码会去检查当前的浏览器是否支持该 API，如果不支持，polyfill 里面提供了该 API 的实现

if(!Array.prototype.includes){
  Array.prototype.includes = function() {...}
}

• 插件和预设：Babel 提供了大量的插件支持，你可以通过插件来使用特定的 JavaScript 特性。预设是一组插件的集合，例如，@babel/preset-env 会根据你的环境自动决定需要使用哪些插件。

在前端开发中，Babel 被广泛用于现代 JavaScript 项目，它能确保你的代码能在各种环境中运行，而不需要你手动处理各种浏览器和 JavaScript 版本的兼容性问题。

Babel快速入门

新建一个项目 babel-demo，使用 pnpm init 进行一个初始化，之后安装依赖：

pnpm add --save-dev @babel/core @babel/cli @babel/preset-env

• @babel/core: 这个是 Babel 的核心包，提供了核心 API
• @babel/cli：该依赖提供 CLI 命令行工具
• @babel/preset-env：预设环境，Babel 在做代码转换的时候，是需要依赖插件的，但是会有一种情况，就需要的插件很多。所谓预设，指的就是内置了一组插件，这样我们只需要引入一个预设即可，不需要再挨着挨着引入众多的插件

在 src/index.js 中书写我们的测试代码：

const greet = (name) => `Hello, ${name}!`;
console.log(greet("World"));

接下来在项目的根目录下创建 .babelrc 配置文件，书写如下的配置：

{
  "presets": ["@babel/preset-env"]
}

该配置就是指定我们的预设是什么。

之后在 package.json 里面添加 script 脚本命令

"scripts": {
    // ...
    "babel": "babel src --out-dir lib"
},

编译 src 目录下的文件，输出到 lib 目录下面。

编译结果如下：

"use strict";

var greet = function greet(name) {
  return "Hello, ".concat(name, "!");
};
console.log(greet("World"));

之后我们修改配置文件，指定了浏览器范围：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

这一次编译出来的结果如下：

"use strict";

const greet = name => "Hello, ".concat(name, "!");
console.log(greet("World"));

为什么两次不一样呢？原因很简单，第二次我们指定了浏览器版本范围，那么在指定的浏览器版本范围里面的这些浏览器，某一些特性已经支持了，所以就不需要再做转换了。