当那些 javascript 前端构建工具说“编译”我的 js 代码时，它们是什么意思？

Question

我看到那些javascript前端构建工具，例如webpack，时不时地使用“编译”这个词。我不确定编译 javascript 代码到底意味着什么，至少不像编译 c/c++ 代码。

我想我总体上理解“构建”过程，比如将所有 js 代码捆绑到一个大文件中，缩小/丑化代码，使用 babel 转换 ES6 语法（transpile）。但是编译在这里意味着什么，它如何适应整个构建过程，或者它只是整个构建过程的另一个名称？

目前，我认为这可能只是使用 Babel 转换 ES6 语法的另一个名称。

附言。读完这篇文章后，SO Babel 是编译器还是转译器？我相信我的问题与此不一样。因为它不仅仅与巴布尔有关。例如，webpack 还使用术语编译器https://webpack.js.org/api/compiler/ 我不明白它的含义！

Browserify 也使用编译器，例如https://github.com/robrichard/browserify-compile-templates “在 browserify 转换中将 HTML 脚本标签中的下划线模板编译为 CommonJS”

Answer 1

最好将该过程描述为“转译”。

Javascript 总是在特定的环境中执行：在 Chrome 和 Electron 中，它是 V8 引擎；在 Firefox 中，它是 SpiderMonkey；这些引擎中的每一个都支持一组特定的语言功能，而不支持其他语言功能。例如，某些引擎仅支持var或不支持const或let。有的支持async/ await，有的只支持Promise。

但是 Web 开发人员了解这些其他功能，并且他们想要使用它们，即使他们正在为不支持这些功能的引擎编写代码。为什么？大多数新语言功能的设计目标是使以更简单、更清晰的方式表达复杂的概念成为可能。这非常重要，因为代码的首要任务是明确其目的。

因此，大多数语言功能本质上都是现有功能的语法糖。在这些情况下，总是可以使用新语法和旧语法来表达例程。这是逻辑上的必然。

像 Babel 这样的转译器可以读取使用高级语法编写的脚本，然后使用一组受限的语言功能重新表达该脚本。依靠称为抽象语法树的中间表示，它可以生成保证功能等效的代码，即使它使用非常不同的、更广泛支持的控制结构来完成工作。

也许我们的网络开发人员在术语方面变得懒惰了。当我们谈论“编译”JavaScript 时，我们通常并不是在谈论将脚本转换为字节码之类的东西。我们正在谈论转译。

其他类型的构建任务也变得相当普遍。如今，前端痴迷于一百万种“模板”，因为使用纯 JavaScript 描述 DOM 更改极其乏味且令人困惑，而且应用程序的复杂性正在迅速增加。某些框架要求您将源代码转换为其他中间形式，稍后由 Web 应用程序在运行时使用。其他允许开发人员使用发明的语法来描述 UI，而浏览器甚至没有尝试原生支持这些语法。需要哪些任务因应用程序而异，具体取决于所使用的框架、应用程序体系结构的细节以及部署环境的轮廓，而这只是一个开始。

网页的基础是使用 HTML、CSS 和 javascript 构建的。那一点没有改变。但如今，大多数严肃的应用程序几乎完全是用 javascript（或非常类似的东西）和 sass 构建的。构建应用程序是将一组转换应用于源代码以生成这三种基础语言的最终工件的过程。

我们将所有这些东西归入术语“编译”之下。