如何使用 Babel 将 TypeScript 转成 ES5 代码

在前端开发中，TypeScript 是常用的静态类型检查工具，而 ES5 是很多浏览器和旧版 Node.js 的标准 JavaScript 版本。因此，在开发过程中需要将 TypeScript 转成 ES5 代码。本文将介绍如何使用 Babel 将 TypeScript 转成 ES5 代码，并提供具体步骤和示例代码。

Babel 和 TypeScript

Babel 是一个广受欢迎的 JavaScript 编译器，它可以将 ECMAScript 2015+ 代码转成向后兼容的 JavaScript 代码。当需要将 TypeScript 转成 ES5 代码时，可以使用 Babel 来完成这个任务。Babel 可以使用插件来解析 TypeScript，并将其转成 ES5 代码。下面介绍如何配置 Babel 完成这个过程。

配置 Babel

首先，需要安装 Babel 和相关插件，可以使用 npm 安装。打开终端输入以下命令：

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

安装完成后，创建一个名为 .babelrc 的文件，用于配置 Babel。在该文件中编写以下代码：

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

这个配置文件包含两个部分，分别是 presets 和 plugins。presets 是指的是一组预设选项，可以让 Babel 自动转换代码。@babel/preset-env 是包含所有 ES6 转码规则的预设，而 plugins 是指需要使用的插件。在这里只需要使用 @babel/plugin-transform-typescript 进行 TypeScript 转码。

完成配置后，就可以使用 Babel 将 TypeScript 转成 ES5 代码了。

使用 Babel 将 TypeScript 转成 ES5 代码

下面提供一个示例，其中包含一个 TypeScript 文件和一个转码后的 ES5 文件。示例代码如下：

//src/index.ts
const add = (x: number, y: number): number => {
  return x + y;
}

console.log(add(1, 2));

在终端输入以下命令，即可使用 Babel 将 TypeScript 转成 ES5 代码：

npx babel src/index.ts --out-dir lib

以上命令中，src/index.ts 是要转换的 TypeScript 文件，lib 是转换后输出的文件夹。

执行完该命令后，将会在 lib 文件夹下生成一个 index.js 文件，内容如下：

// lib/index.js
"use strict";

var add = function add(x, y) {
  return x + y;
};

console.log(add(1, 2));

可以看到，TypeScript 代码已经成功转成 ES5 代码。

总结

使用 Babel 将 TypeScript 转成 ES5 代码可以帮助我们在开发过程中更好地使用 TypeScript，并将其应用在大量浏览器和服务端场景中。Babel 的配置相对简单，只需要安装相关插件和编写配置文件即可。本文介绍了详细的配置和使用步骤，并提供了具体示例代码，希望可以帮助读者更好的理解和应用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2f0dfb5eee0b525a534cb