【宝藏】Babel安装与使用指南，JS开发者的巴别塔（1）

本文链接：https://blog.csdn.net/weixin_53961451/article/details/143836025

Babel 是一个广泛使用的 JavaScript 编译器，它可以将现代 JavaScript 代码（ES6+）转换为向后兼容的 JavaScript 代码（ES5）。这使得开发者可以使用最新的 JavaScript 特性，而不必担心浏览器的兼容性问题。

1. Babel 简介

Babel 一词来源于希伯来语，直译为巴别塔。巴别塔象征着统一的国度和统一的语言。而在今天的 JavaScript 世界中，不同版本的浏览器能识别的 ES 标准并不相同，这导致开发者需要面对不同版本的浏览器使用不同的语言，类似于古巴比伦时期的困境。Babel 的出现正是为了解决这样的问题，它将不同标准书写的语言编译为统一的、能被各种浏览器识别的语言。
在这里插入图片描述
由于语言的转换工作灵活多样，babel的做法和postcss、webpack差不多，它本身仅提供一些分析功能，真正的转换需要依托于插件完成

2. Babel 的安装

Babel 可以和构建工具联合使用，也可以独立使用。如果要独立使用 Babel，需要安装以下两个库：

@babel/core：Babel 核心库，提供了编译所需的所有 API。
@babel/cli：提供一个命令行工具，调用核心库的 API 完成编译。

安装命令如下：

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

3. Babel 的使用

@babel/cli 提供了一个命令 babel，用于编译 JavaScript 代码。

3.1 按文件编译

# 按文件编译
npx babel 要编译的文件 -o 编译结果文件

例如，假设你有一个 src/index.js 文件，可以这样编译：

npx babel src/index.js -o dist/index.js

3.2 按目录编译

# 按目录编译
npx babel 要编译的整个目录 -d 编译结果放置的目录

例如，假设你有一个 src 目录，可以这样编译：

npx babel src -d dist

4. Babel 的配置

Babel 本身没有做任何事情，真正的编译要依托于 Babel 插件 和 Babel 预设 来完成。Babel 预设和 PostCSS 预设的含义一样，是多个插件的集合体，用于解决一系列常见的兼容问题。

如何告诉 Babel 要使用哪些插件或预设呢？需要通过一个配置文件 .babelrc。

4.1 创建 `.babelrc` 文件

在项目根目录下创建一个 .babelrc 文件，内容如下：

{
  "presets": [],
  "plugins": []
}

4.2 添加预设

为了使 Babel 能够处理 ES6+ 代码，需要安装并配置 @babel/preset-env 预设。

安装命令如下：

npm install -D @babel/preset-env

然后在 .babelrc 文件中添加预设：

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

4.3 配置 `@babel/preset-env`

@babel/preset-env 可以根据目标浏览器的兼容性要求，智能地转换代码。你可以在 .babelrc 文件中配置 @babel/preset-env 的选项，例如：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "> 1%"]
        }
      }
    ]
  ],
  "plugins": []
}

这里的 targets 配置指定了目标浏览器的范围。你可以使用 .browserslistrc 文件或在 package.json 中配置 browserslist 来简化配置。

5. 示例

假设你有一个简单的项目结构：

project
├── src
│   └── index.js
├── dist
└── .babelrc

src/index.js 文件内容如下：

const message = 'Hello, World!';
console.log(message);

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person('Alice');
person.sayHello();

.babelrc 文件内容如下：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "> 1%"]
        }
      }
    ]
  ],
  "plugins": []
}

运行 Babel 编译命令：

npx babel src -d dist

编译完成后，dist 目录下会生成编译后的 index.js 文件，内容如下：

"use strict";

var message = 'Hello, World!';
console.log(message);

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person(name) {
  _classCallCheck(this, Person);

  this.name = name;
};

Person.prototype.sayHello = function sayHello() {
  console.log('Hello, my name is ' + this.name);
};

var person = new Person('Alice');
person.sayHello();