[Babel] Intro Babel - 01 Introduction

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"));

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