javascript - 当他们说 "compile"我的 js 代码时，那些 javascript 前端构建工具是什么意思？

Question

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

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

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

附言。阅读此 SO Is Babel a compiler or transpiler? 后我相信我的问题与此不同。因为它不仅仅和Bable有关。例如，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 时，我们通常不是在谈论将脚本转换为字节码之类的东西。我们正在谈论转译。

---

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

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

我们将所有这些东西统称为“编译”。