【问题标题】：What is the difference between preprocessor and transpiler?预处理器和转译器有什么区别？
【发布时间】：2017-04-17 21:03:04
【问题描述】：

预处理器和转译器（或转编译器）有什么区别？

在搜索答案时，我已经找到了difference between compiler and transpiler。

例如 CSS 预处理器（Sass、Less）和 JS 转译器（CoffeeScript、TypeScript）。它们是一样的吗？我的意思是，他们做同样的事情吗？

在某些地方它被称为“JS 预处理器”，但是当我用谷歌搜索时，我找不到任何有价值的信息。

现在，我在想，预处理器只是将例如 sass 转换为 CSS，为浏览器更“可读”。转译器编译整个东西，从咖啡脚本语言到 JavaScript 语言。

所以我在这里，转译器只是编译整个东西（这是一个更大的过程），而预处理器只是转换为更“可读”？

或者，例如，Sass 与 CSS 的不同语言与 CoffeeScript 与 JavaScript 的不同？

【问题讨论】：

你读过这个吗？ quora.com/What-is-the-preprocessor-in-web-developing
嗨！不，我没有找到那个，但这真的很有帮助！谢谢！
Sass/Coffeescript 是否是真正不同于 Js/CSS 的语言可能还有待商榷。但是还有更简单的预处理器示例，例如许多服务器使用模板库在页面作为服务器时将文本插入 HTML。据我了解，主要区别在于转译器将从一种源代码语言/格式转换为另一种源代码语言/格式，而预处理器可能不会。

标签： css preprocessor transpiler

【解决方案1】：

预处理器

术语预处理器在wikipedia article 中定义为：

在计算机科学中，预处理器是一种程序，它处理其输入数据以产生输出，该输出用作另一个程序的输入。输出据说是输入数据的预处理形式，通常被一些后续程序（如编译器）使用。

这是一个用于准备要编译的代码的软件。 C 预处理器就是一个很好的例子。

根据documentation of gcc provided by gnu 的C 预处理器是：

C 预处理器，通常称为 cpp，是一个宏处理器，C 编译器自动使用它在编译前转换您的程序。

例如，它会查找以# 开头的行并执行以下操作：将它们替换为其他文本。

转译器

根据this wikipedia的文章转译器是：

源到源编译器、转译器或转译器是一种编译器，它将以一种编程语言编写的程序的源代码作为其输入，并以另一种编程语言生成等效的源代码。

一个例子是巴别塔。 Babel 是一个 JavaScript 转译器，可以将边缘 JavaScript 转换为可以在任何浏览器（甚至是旧浏览器）中运行的普通旧 ES5 JavaScript。

它可以帮助您利用边缘 javascript，并通过将其转换为可以理解的 javascript 版本，让它在仍然不支持它的环境中运行。

以下摘自Babel's github page

Babel 是一个工具，可帮助您使用最新版本的 JavaScript 编写代码。当您支持的环境本身不支持某些功能时，Babel 会帮助您将这些功能编译为支持的版本。

希望这会有所帮助！

【讨论】：

那么可以说转译器是一种特定类型的预处理器吗？

【解决方案2】：

This answer This answer This answer 引用如下，很好地解释了这一点。

通常，预处理器接收 X 语言的代码 - 以某种方式对其进行转换 - 并输出 X 语言的代码。

通常，编译器接收语言 X 的代码 - 并以机器代码（或可能的汇编语言）输出。

第三类东西是“转译器”——它接收语言 X 的代码并输出语言 Y 的代码……另一种人类可读的语言。

预处理器的一个很好的例子是 C 语言预处理器。它对 C 语言了解不多——除了 cmets 和以“#”字符开头的行。

所以在 C 中，你可以这样说：

#define HW “Hello World”

......之后它在任何地方看到硬件，它都会用“Hello World”替换它。

它还知道诸如

之类的东西

    #ifdef HW 
    ….stuff… 
    #endif

...它表示如果“HW”的#define 存在，则包含直到#endif 的行 - 否则删除它们。

所以 C 预处理器的输入是 C 代码（有一堆以“#”开头的行），输出是带有一堆替换的 C 代码，一些代码被删除 - 其他代码包含在其他文件中，等等。

【讨论】：

【解决方案3】：

我搜索了电子书，发现了一些可以澄清这一点的东西，或者至少我认为可以。

预处理器和转译器作为 HTML 的抽象被引入， CSS 和 JavaScript 作为添加功能的一种手段以源语言提供，保持代码干燥（不要重复您自己），使代码更易于维护，并节省您的时间。浏览器不能执行这个抽象的代码，但是构建系统可以编译成他们可以编译的东西。

这是来自：第 1 章，Stryjewski, T. & Mao, J.，2016 年。开发 gulp edge，第二版。出血边缘出版社。加利福尼亚州圣罗莎。

【讨论】：

【解决方案4】：

重要的是要记住，CompSci 中对这些概念的定义可能非常模糊，并且不同的语言可能会以不同的方式使用它们。在这种情况下，转译器比预处理器更常见，因此作为一个术语的含义更稳定，所以虽然 Sass 可能想称自己为预处理器，但事实上它将一种语言 (Sass/SCSS) 转换为另一种语言 (CSS ) 可以说使它成为一个转译器。

我们是否想扩展预处理器的定义以包括转译器，或者我们是否想说 Sass 错误地命名了自己，这可能部分取决于“预处理器”的使用是否会受到它在转译器意义上的使用的影响CSS 字段。

【讨论】：