当他们说“编译”我的js代码时，这些javascript前端构建工具意味着什么？

Question

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

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

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

PS。在阅读了这篇文章之后，巴贝尔是一个编译器还是转拼法器？，我相信我的问题和这个不一样。因为这不仅仅与Bable有关。例如，webpack还使用了编译器https://webpack.js.org/api/compiler/ 这个词，我不明白它的意思是！

Browserify也使用编译器，例如https://github.com/robrichard/browserify-compile-templates“在浏览器化转换中从HTML标记编译下划线模板到CommonJS”。

Answer 1

最好将这一过程描述为“转移溢出”。

Javascript总是在特定的环境中执行:在Chrome和电子中，它是V8引擎；在Firefox中，它是SpiderMonkey；等等。每个引擎都支持特定的语言特性，而不是其他语言特性。例如，一些引擎只支持var，而不支持const或let。有些支持async/await，而另一些只支持Promise。

但是web开发人员知道这些其他特性，并且他们想要使用它们，即使他们是为一个不支持这些特性的引擎编写的。为什么？大多数新的语言特性都是为了能够以更简单、更简洁的方式表达复杂的概念而设计的。这是非常重要的，因为(代码的首要任务)是明确其目的。

因此，大多数语言特性本质上是现有功能的语法糖。在这些情况下，总是可以使用新的和旧的语法来表示例程。这是合乎逻辑的需要。

像Babel这样的转换程序可以读取使用高级语法编写的脚本，然后使用一组受限的语言特性重新表示脚本。依赖于一种称为抽象语法树的中间表示，它可以生成功能等价的代码，尽管它使用非常不同的、更广泛支持的控制结构来完成工作。

也许我们web开发人员在术语上变得懒惰了。当我们谈到“编译”javascript时，我们通常不谈论将脚本转换为类似字节码的内容。我们说的是转移溢出。

其他类型的构建任务也变得相当普遍。如今，前端被无数种“模板”所困扰，因为使用纯javascript来描述DOM更改非常繁琐和混乱，而且应用程序的复杂性也越来越快。有些框架要求您将源代码转换为稍后web应用程序在运行时使用的其他中间形式。另一些则允许开发人员使用任何浏览器都没有尝试支持的虚拟语法来描述UI。不同的应用程序需要哪些任务，取决于所使用的框架、应用程序体系结构的细节以及部署环境的轮廓，这只是一个开始。

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

我们把所有这些东西都归入“汇编”一词。

Answer 2

你几乎把钉子打在头上了。当编译(或者更恰当地说是转移溢出)操作发生在一个JavaScript项目上时，它可能意味着许多事情。正如您所提到的，这些代码可以从小型化、应用多填充、shims或将脚本“编译”为单个包文件以供平台/浏览器使用的字面操作不等。

当使用JavaScript语言的超级集(如TypeScript、ActionScript或UnityScript )时，转换描述了将源x-脚本转换回原生JavaScript的过程，该过程反过来可以由浏览器解释(因为浏览器不识别超集语言)。

然而，你是绝对正确的。我们并没有将我们的JavaScript编译成二进制文件，但是这个词经常被抛出，这会导致混淆。尽管如此，我们正在接近采用WebAssembly和ASMJ的时代，这将带来在浏览器中运行字节码的时代，这将带来一些有趣的可能性，但是唉……这是另一天的故事;)

Answer 3

当您说这些前端Javascript工具没有在与C/C++等语言的编译工具相同的上下文中使用时，您是正确的。C/C++编译器将源代码转换为机器代码。

这些JavaScript构建工具--就像Webpack一样--在某种意义上使用了“编译”这个词，这比传统的更具有隐喻性。

当web构建工具使用“编译”这个词时，他们使用它的意义是，它们正在转换、缩小(也就是一个通用化)，并将源文件捆绑在一起，以便更好地针对客户端浏览器和网络请求进行优化。(文件大小更小，浏览器兼容性更好，来自捆绑资产的HTTP请求减少，等等)