前言
随着 ES6 语言规范的不断完善和各大浏览器对新特性的支持逐步提高，使用 ES6 编写前端应用已经成为一种趋势。但是，由于不同浏览器支持度的不同，以及 ES6 代码无法直接在现有框架中运行，为了实现跨浏览器兼容性和代码运行能力，我们需要使用 Babel 来将 ES6 代码转化成 ES5 代码。在 Angular 中，要想使用 ES6 语言特性，也需要通过 Babel 进行转换。
本文将介绍如何在 Angular 项目中使用 Babel，并将 ES6 代码转化成 ES5 代码。
环境准备
首先，需要安装以下工具和依赖：
- Node.js & npm
- Angular CLI
- Babel
安装 Babel
在使用 Babel 之前，需要先安装 Babel 相关依赖。在项目根目录下，执行以下命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
以上命令会安装 Babel 核心包、命令行工具及 ES6 转换预设。
接着，需要创建一个 .babelrc 文件用于配置 Babel。在项目根目录下创建一个名为 .babelrc 的文件，并在其中加入以下内容：
-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- - ----------- ------ - ---------- ------- -- --- - - - - -展开代码
以上内容将告诉 Babel 使用 @babel/preset-env 预设进行编译，同时使用 last 2 versions 和 safari >= 7 两种浏览器的支持度作为目标。
修改 Angular 配置
接着，需要修改 Angular 项目中的配置文件，以便让项目使用 Babel 进行编译，而不是使用内置的 TypeScript 编译器。
首先，需要在 tsconfig.json 文件中添加以下内容：
{ "compilerOptions": { "target": "es6", "lib": ["es6", "dom"] } }
以上内容将告诉 TypeScript 编译器将代码编译成 ES6 标准，并引入 ES6 与 DOM 相关的库。
接着，在 angular.json 文件中找到 build 和 serve 选项，分别将 options 字段中的 tsConfig 改为 tsConfig.app.json，并在 options 字段中添加以下内容：
-- -------------------- ---- ------- - ---------- - ---------- - - ---------------------------------- - --------- - - - -- ----------- ------------------- - -展开代码
以上内容将告诉 Angular CLI 在编译项目时使用 Babel 插件，同时指定 tsConfig 文件。"@babel/plugin-transform-runtime" 插件将为我们提供一些辅助函数和特殊对象，例如 Promise 和 regeneratorRuntime。
测试
在完成以上所有步骤之后，可以运行 ng serve 命令来启动开发服务器并测试是否已成功转换 ES6 代码。
例如，以下 ES6 代码：
const foo = () => { console.log('Hello') } foo()
将被转化成以下 ES5 代码：
'use strict' var foo = function foo() { console.log('Hello') } foo()
小结
本文介绍了如何使用 Babel 在 Angular 项目中支持 ES6。通过配置 Babel，并修改 Angular 项目的配置文件，我们可以成功将 ES6 代码转化成为 ES5 代码。在后续开发中，我们可以使用 ES6 的新特性，同时保证应用运行的兼容性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6c9d4306f20b3a630e445
