什么是Angular中的Transpiling？

封面图 • 2025-10-14 • Angular

在Angular中，**Transpiling（转译）** 是一个将高级或现代JavaScript代码（如ES6+语法）转换为浏览器兼容的旧版JavaScript代码的过程。这个过程通常由**TypeScript编译器（tsc）** 或 **Babel** 等工具完成。

---

### 一、什么是Transpiling？

**Transpiling** 是指将一种编程语言的源代码转换为另一种等效的源代码。在前端开发中，特别是在使用TypeScript和现代JavaScript时，Transpiling 的作用是：

- 将 TypeScript 或 ES6+ 代码转换为浏览器支持的 JavaScript（通常是 ES5）。
- 使得代码可以在不支持新语法的浏览器中运行。

---

### 二、Angular 中的 Transpiling

Angular 项目默认使用 **TypeScript**，而 TypeScript 编译器（`tsc`）会自动进行 Transpiling。Angular CLI 会配置好这些设置。

#### 1. TypeScript 的 Transpiling

在 Angular 项目中，你写的代码是 TypeScript（`.ts` 文件），例如：

```ts
// app.component.ts
export class AppComponent {
  title = 'My Angular App';
}
```

当构建项目时，TypeScript 编译器会将其编译成 JavaScript（`.js` 文件），例如：

```js
// app.component.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AppComponent = void 0;
var AppComponent = /** @class */ (function () {
    function AppComponent() {
        this.title = 'My Angular App';
    }
    return AppComponent;
}());
exports.AppComponent = AppComponent;
```

这就是 **Transpiling** 的结果。

#### 2. Angular CLI 如何处理 Transpiling

Angular CLI 使用以下工具来处理 Transpiling：

- **TypeScript Compiler (`tsc`)**：将 `.ts` 转换为 `.js`。
- **Babel（可选）**：如果你需要更进一步的转译（比如支持某些特定环境），可以配置 Babel 来做额外的 Transpiling。

---

### 三、为什么需要 Transpiling？

- 浏览器可能不支持最新的 JavaScript 特性（如 `let`, `const`, `箭头函数`, `类`, `模块` 等）。
- Angular 项目通常需要兼容多个浏览器版本，包括一些较旧的浏览器（如 IE11）。
- Transpiling 可以确保你的代码在所有目标环境中正常运行。

---

### 四、Angular 中的配置

Angular 项目中的 Transpiling 配置主要在以下文件中：

- `tsconfig.json`：定义 TypeScript 编译选项，如目标版本（`target`）、模块解析方式等。
- `angular.json`：配置构建和打包选项，包括是否启用 AOT（预编译）等。

示例 `tsconfig.json`：

```json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "lib": ["es2018", "dom"],
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}
```

这里的 `"target": "es5"` 表示将 TypeScript 代码转译为 ES5 标准的 JavaScript。

---

### 五、总结

| 项目 | 内容 |
|------|------|
| **什么是 Transpiling？** | 将高级 JavaScript（如 ES6+）转换为浏览器兼容的代码（如 ES5）。 |
| **Angular 中如何实现？** | 通过 TypeScript 编译器（`tsc`）自动完成。 |
| **目的** | 兼容更多浏览器，支持旧环境。 |
| **相关配置文件** | `tsconfig.json`、`angular.json` |

---

如果你正在使用 Angular 并希望支持旧浏览器（如 IE11），就需要确保你的项目进行了正确的 Transpiling 设置。