# 转译器（Transpiler）与编译器

> 原文： [https://howtodoinjava.com/typescript/transpiler-vs-compiler/](https://howtodoinjava.com/typescript/transpiler-vs-compiler/)

转译器（Transpiler）或**源到源编译器**是读取用一种编程语言编写的源代码，并生成具有相似抽象级别的另一种语言的等效代码的工具。 转译器的一个很好的例子是 **Typescript 转译器**，它可以将 Typescript 代码转换为 JavaScript。 **Babel 编译器**也可以用于 ES6 JS 代码到 ES5 JS 代码。

编译器也将代码从一种语言转换为另一种语言，但是两种语言的抽象级别却大不相同。 例如`.java`至`.class`文件编译。

## ES6 和 ES5

要了解转译器，您必须首先了解 ES6 和 ES5 JavaScript 之间的区别。 ES6（ [ECMAScript 6](https://www.ecma-international.org/ecma-262/6.0/) ）是下一版本 JavaScript 的规范。 它的一些主要增强功能包括模块，类声明，词法块作用域，迭代器和生成器，对异步编程的承诺，解构模式以及适当的尾部调用。

功能很棒，但是大多数浏览器直到现在都不支持该规范。 因此，用 ES6 编写的任何 UI 应用规范都无法在大多数浏览器中运行。 要运行这些应用，必须将此 ES6 源代码转换为受支持的 JavaScript 版本 ES5。 几乎所有浏览器都支持 ES5，并且是迄今为止最稳定的版本。

> **ES6** – 为 JavaScript 带来“类型”。 使它更接近强类型语言，例如 Java，C#。 到目前为止，大多数浏览器都不支持它。 必须将其转换为 ES5 才能在浏览器中执行。
> 
> **ES5** – 这些年来，我们一直在编写朴素的 JavaScript。

## 转译器

编译器是类似于程序的编译器，它将 ES6 JavaScript 代码转换为 ES5 JavaScript 代码，以便可以在浏览器中运行。 当编译器看到使用需要翻译的语言功能的表达式时，它将生成逻辑上等效的表达式。 产生的表达式与源表达式可以非常相似，也可以非常不同。

> **转译器做什么？**
> 
> ES6 代码 => ES5 代码（甚至还有 ES4，ES3）

`tsconfig.json`文件中提供了 TypeScript 的转译器配置。

```java
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

```

## 转译器演示

让我们看看 ES6 到 ES5 转换的工作原理。 创建一个文件`helloworld.ts`并在其中写入此代码。

#### ES6 代码

```java
export class HelloWorld {
    constructor() {
        console.log('welcome');
    }
};

```

#### ES5 代码

要将 TypeScript 代码编译为 javascript 代码，请使用命令“`tsc helloworld.ts`”。 它将在同一文件夹中生成`helloworld.js`文件。

```java
"use strict";
exports.__esModule = true;
var HelloWorld = /** @class */ (function () {
    function HelloWorld() {
        console.log('welcome');
    }
    return HelloWorld;
}());
exports.HelloWorld = HelloWorld;

```

将我的问题放在评论部分。

学习愉快！