随着前端技术的不断发展，Angular 6 和 TypeScript 已经成为了前端开发的主流技术。但是，由于一些浏览器不支持 ES6，所以我们需要将 TypeScript 代码转换为 ES5 或 ES6。这就需要使用到 Babel。
什么是 Babel
Babel 是一个 JavaScript 编译器，用于将最新的 JavaScript 代码转换为浏览器可以理解的 JavaScript 代码。它不仅支持将 ES6 转换为 ES5，还支持将 TypeScript 转换为 ES5 或 ES6。
为什么要使用 Babel
如上所述，由于一些浏览器不支持 ES6，我们需要将 TypeScript 代码转换为 ES5 或 ES6。而 Babel 可以帮助我们完成这个任务。除此之外，Babel 还具有以下优点：
- 支持最新的 JavaScript 标准，如 ES6、ES7 等。
- 支持插件机制，可以根据需要添加或删除插件。
- 可以将 JavaScript 代码转换为任意目标版本，如 ES5、ES6、ES2016 等。
- 支持多种插件，如转换 JSX、Flow 等。
使用 Babel 将 TypeScript 转换为 ES5 或 ES6
下面我们来看一下如何使用 Babel 将 TypeScript 转换为 ES5 或 ES6。
安装 Babel
首先，我们需要安装 Babel。可以使用 npm 或 yarn 安装 Babel：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript
或者
yarn add --dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript
配置 Babel
安装完成后，我们需要配置 Babel。在项目根目录下创建一个名为 .babelrc 的文件，并添加以下代码：
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
]
}这里使用了两个预设，分别是 @babel/preset-env 和 @babel/preset-typescript。@babel/preset-env 可以将最新的 JavaScript 代码转换为目标版本的 JavaScript 代码。@babel/preset-typescript 可以将 TypeScript 转换为 JavaScript 代码。
转换 TypeScript 代码
配置完成后，我们可以使用 Babel 将 TypeScript 代码转换为 ES5 或 ES6。这里以 TypeScript 代码转换为 ES5 为例：
babel src --out-dir lib --extensions .ts
这里的 src 是 TypeScript 代码所在的目录，lib 是转换后的 JavaScript 代码所在的目录，.ts 是 TypeScript 文件的扩展名。执行上述命令后，Babel 将会将 src 目录下的所有 TypeScript 文件转换为 ES5 并输出到 lib 目录下。
在 Angular 6 中使用 Babel
在 Angular 6 中使用 Babel 也很简单。首先我们需要安装 @babel/preset-env 和 @babel/preset-typescript：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript
或者
yarn add --dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript
然后，在 tsconfig.json 文件中添加以下配置：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- ---------
------------------- -------
------ -
---------
-----
--
------------ -----
------------------------ -----
------------------------- -----
------------------ ----
--
---------- -
---------------
-------
--------------
-
-这里的 target 是指编译后的 JavaScript 版本，这里设置为 ES5。module 是指模块的输出格式，这里设置为 ESNext。然后，在 .babelrc 文件中添加以下配置：
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
]
}最后，在 package.json 文件中添加以下命令：
"build": "ng build && babel dist --out-dir dist --extensions .js"
这里的 ng build 是 Angular 6 的 build 命令，babel 命令将会把 dist 目录下的所有 JavaScript 文件转换为 ES5 并输出到 dist 目录下。
示例代码
下面是一个简单的示例代码，演示了如何使用 Babel 将 TypeScript 代码转换为 ES5 或 ES6。
-- -------------------- ---- -------
----- ------ -
------- ----- -------
------- ---- -------
----------------- ------- ---- ------- -
--------- - -----
-------- - ----
-
------ ---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-
----- ------ - --- -------------- ----
------------------使用 Babel 将上述 TypeScript 代码转换为 ES5 后，代码如下：
-- -------------------- ---- -------
---- --------
--- ------ - -------- -- -
-------- ------------ ---- -
--------- - -----
-------- - ----
-
--- ------ - -----------------
--------------- - -------- ---------- -
------------------- -- ---- -- ------------------- -- --- ------------------- - ----- --------
--
------ -------
----
--- ------ - --- -------------- ----
------------------总结
本文介绍了如何使用 Babel 将 TypeScript 代码转换为 ES5 或 ES6，并提供了示例代码。Babel 是一个非常强大的工具，它可以帮助我们解决浏览器兼容性问题，同时还可以使我们使用最新的 JavaScript 特性。如果你还没有使用 Babel，那么现在就是时候了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e33f471886fbafa4fbb3c8