BabelJs - 使用 Babel 6 进行项目设置

BabelJS - 现代项目设置 (Babel 7+)

本章将指导您使用 Babel（版本 7 及更高版本）设置一个现代 JavaScript 项目。我们将创建一个简单的 Node.js 项目，并使用本地开发服务器来测试我们转译后的 JavaScript 代码。重点是当前的 Babel 配置最佳实践。

1. 创建并初始化您的项目

首先，为您的项目创建一个新目录并进入其中。然后，使用 npm 初始化它作为一个 Node.js 项目，这将创建一个 package.json 文件。

mkdir my-babel-project
cd my-babel-project
npm init -y

-y 参数表示接受 npm init 的所有默认选项。

您的 package.json 文件最初看起来会像这样：

{
  "name": "my-babel-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2. 安装 Babel 依赖

我们需要安装 Babel 的核心包作为开发依赖。对于典型的设置，这些包包括：

@babel/core：Babel 的核心引擎。
@babel/cli：用于运行 Babel 的命令行接口。
@babel/preset-env：一个智能预设，允许您使用最新的 JavaScript，而无需微观管理语法转换。它根据您指定的目标环境自动确定所需的 Babel 插件和 polyfill。

npm install --save-dev @babel/core @babel/cli @babel/preset-env

安装完成后，您的 package.json 的 devDependencies 部分将更新：

"devDependencies": {
  "@babel/cli": "^7.x.x",
  "@babel/core": "^7.x.x",
  "@babel/preset-env": "^7.x.x"
  // Exact versions will depend on the latest releases // 具体版本将取决于最新发布版本
}

3. 配置 Babel

在项目根目录中创建一个 Babel 配置文件。最常见的文件名是 babel.config.json（或用于更复杂配置的 babel.config.js）。

babel.config.json：

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

此配置告诉 Babel 使用 @babel/preset-env 预设。默认情况下，此预设将所有 ECMAScript 2015+ 语法转译为 ES5 兼容的代码。

4. 添加构建脚本到 `package.json`

为了简化转译过程，让我们在 package.json 中添加一个脚本。这个脚本将从 src 目录中获取文件，转译它们，并将输出文件放置到 dist（发布）目录中。

修改 package.json 中的 scripts 部分：

"scripts": {
  "build": "babel src -d dist",
  "test": "echo \"Error: no test specified\" && exit 1"
}

babel src -d dist 命令告诉 Babel CLI 获取 src 目录中的所有 JavaScript 文件，根据 babel.config.json 进行转译，并将输出文件放置到 dist 目录中，同时保持原始文件结构。

5. 创建源代码

在项目根目录中创建一个 src 目录。在 src 内部，创建一个 JavaScript 文件，例如 main.js，并包含一些现代 JavaScript 语法。

src/main.js：

class Student {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

    displayInfo() {
        console.log(`Student: ${this.fullName}, Age: ${this.age}`);
    }
}

const student1 = new Student("Jane", "Doe", 22);
student1.displayInfo();

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log('Doubled numbers:', doubled);

6. 运行构建脚本

现在，您可以从终端运行构建脚本：

npm run build

这将执行 babel src -d dist 命令。完成后，您会在项目根目录找到一个 dist 目录，其中包含转译后的 main.js 文件。

dist/main.js 文件将包含 ES5 兼容的代码。例如，class 语法将被转换为构造函数和原型，箭头函数将转换为常规函数。

dist/main.js 的内容（简化版）：

"use strict";

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

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

var Student = /*#__PURE__*/function () {
  function Student(firstName, lastName, age) {
    _classCallCheck(this, Student);

    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  _createClass(Student, [{
    key: "fullName",
    get: function get() {
      return "".concat(this.firstName, " ").concat(this.lastName);
    }
  }, {
    key: "displayInfo",
    value: function displayInfo() {
      console.log("Student: ".concat(this.fullName, ", Age: ").concat(this.age));
    }
  }]);

  return Student;
}();

var student1 = new Student("Jane", "Doe", 22);
student1.displayInfo();
var numbers = [1, 2, 3];
var doubled = numbers.map(function (num) {
  return num * 2;
});
console.log('Doubled numbers:', doubled);

7. 使用简单的 HTML 文件和开发服务器进行测试（可选）

要在浏览器中测试转译后的代码，您可以在 dist 目录中创建一个简单的 index.html 文件（或从那里提供服务），并安装一个简单的开发服务器，例如 lite-server。

npm install --save-dev lite-server

在 package.json 中添加一个 start 脚本：

"scripts": {
  "build": "babel src -d dist",
  "start": "lite-server --baseDir dist",
  "test": "echo \"Error: no test specified\" && exit 1"
}

创建 dist/index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Babel Test</title> // Babel 测试
</head>
<body>
    <h1>Check the console for output!</h1> // 查看控制台输出！
    <script src="main.js"></script>
</body>
</html>

现在，首先构建您的代码，然后启动服务器：

npm run build
npm start

lite-server 将在您的默认浏览器中打开 dist/index.html。打开开发者控制台，查看 main.js 的输出：

Student: Jane Doe, Age: 22
Doubled numbers: [ 2, 4, 6 ]

这个设置提供了一种基本但有效的方法来在您的项目中使用 Babel。对于更复杂的应用程序，您通常会将 Babel 与模块打包工具 (module bundler) 集成，例如 Webpack 或 Rollup，这将在另一章中介绍。

进一步考虑：@babel/preset-env 可以进一步配置，以针对特定的浏览器或 Node.js 版本，从而优化输出和 polyfill 的使用。有关 targets 和 useBuiltIns 选项的更多信息，请参阅 Babel 文档。