DoubleRight The past of the world Blog's

转译器（Transpiler）与编译器

转译器（Transpiler）与编译器

原文： 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 ）是下一版本 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 的转译器配置。

{
  "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 代码

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

ES5 代码

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

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

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

学习愉快！

搜索