# 轉譯器（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; ``` 將我的問題放在評論部分。 學習愉快！