Angular 2 是一款常用的前端框架，它可以帮助我们快速开发现代化的单页应用程序，但是它只能使用 ES6+ 和 TypeScript 等现代化的技术来编写代码。如果你希望在 Angular 2 项目中使用 ES5 或者一些不太被 Angular 2 支持的新特性，那么您可以考虑集成 Babel 来将这些语言特性转化为浏览器可以理解的代码。本篇文章将会详细介绍如何在 Angular 2 项目中集成 Babel。
Babel 简介
Babel 是一款 JavaScript 编译器，它将 ECMAScript 2015+（ES6+) 代码转换为向后兼容的 JavaScript 代码，以便在任何浏览器或环境中运行。它可以消除浏览器版本对于新特性的限制，以便我们可以使用最新的语法和编程功能。
集成 Babel
所谓的集成 Babel，实际上就是在 Angular 2 项目中引入 Babel 的配置文件和相关的依赖，这里介绍两种不同的方法来实现这一目标。
方法一：使用 @babel/cli 以及 @babel/core 包
- 安装 Babel：
在命令行中输入以下命令，安装 Babel：
npm install --save-dev @babel/cli @babel/core
- 配置 Babel：
在项目根目录下创建一个名为 .babelrc 文件，将以下代码复制到该文件中：
{
"presets": [
"@babel/preset-env"
]
}这将告诉 Babel 使用最新的环境进行转换。
- 编写一个转码脚本：
在 package.json 文件中的 scripts 字段中添加一个 build 命令，如下所示：
"scripts": {
"build": "babel src -d dist"
}此命令会将 src 目录（源码在此处，可自行更改）下的 JavaScript 文件转换为 ES5 语法后存储在 dist 目录下。
以上就是使用 @babel/cli 的方法。
方法二：使用 babel-loader 和 webpack：
- 安装依赖：
在命令行中输入以下命令，安装相关依赖：
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack
- 配置 webpack：
在 webpack.config.js 配置文件中，添加以下代码：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--以上代码中，entry 和 output 字段分别是入口文件和输出文件的路径，module.rules 则是用来配置 Babel 处理 JavaScript 代码的规则。
- 编写代码：
在 src/index.js 文件中编写 JavaScript 代码，在这里可以试着使用 ES6+ 的语法，如下所示：
const firstName = 'Tom';
const lastName = 'Jerry';
console.log(`My name is ${firstName} ${lastName}.`);- 启动项目：
在命令行中运行以下命令，启动 webpack 来打包代码：
webpack
总结
通过以上两种方法，我们可以将 Babel 集成到 Angular 2 项目中，以便我们可以使用最新的语法和编程功能来编写代码。相信通过这篇文章，您已经可以掌握如何使用 Babel 来转化 JavaScript 代码了。希望本篇文章对于您学习 Angular 2 有所启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f78da980a9b385b8f24f8