# 转译器（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; ``` 将我的问题放在评论部分。 学习愉快！