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

Question

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

我认为我一般都理解“构建”过程，比如将所有js代码捆绑成一个大文件，缩小/ uglify代码，使用babel转换ES6语法（transpile）。但是编译意味着什么呢，它如何适用于整个构建过程，或者它只是整个构建过程的另一个名称？

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

PS。在阅读此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

最好将流程描述为＆＃34;翻译。＆＃34;

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

但是网络开发者知道关于这些其他功能，并且他们想要使用它们，即使他们正在为不支持这些功能的引擎进行编写。为什么？大多数新语言功能的设计目标是能够以更简单，更清晰的方式表达复杂的概念。这非常重要，因为代码的第一项工作是明确其目的。

因此，大多数语言特征基本上是现有功能的语法糖。在这些情况下，始终可以使用新旧语法表达例程。这是合乎逻辑的必然。

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

也许我们网络开发人员在我们的术语中变得懒惰。当我们谈论＆＃34;编译＆＃34; javascript，我们通常不会谈论将脚本转换为类似字节码的东西。我们正在谈论翻译。

其他类型的构建任务也变得非常普遍。这些天，前端痴迷于百万种模仿＆＃34;模板，＆＃34;因为使用纯javascript描述DOM更改非常繁琐且令人困惑，并且因为应用程序复杂性越来越快。某些框架要求您将源代码转换为其他中间形式，这些中间形式稍后将由Web应用程序在运行时使用。其他人允许开发人员使用发明的语法来描述UI，这些语法甚至没有浏览器试图本地支持。需要哪些任务因应用程序而异，具体取决于使用的框架，应用程序体系结构的详细信息以及部署环境的轮廓，这只是一个开始。

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

我们把所有这些东西都归入“＃34;编译。＆＃34;

这个词

Answer 2

你几乎击中了头部。当编译（或更恰当地转换）操作在JavaScript项目上发生时，它可能意味着许多事情。正如你所提到的，这些可能包括缩小，应用polyfill，垫片，或者＃34;编译＆＃34;将脚本放入单个捆绑文件中以供平台/浏览器使用。

使用超级JavaScript语言集（如TypeScript，ActionScript或UnityScript）时的Transpilation描述了将源x-script转换回本机JavaScript的过程，而本机JavaScript又可以由浏览器解释（因为浏览器没有＆＃ 39;识别超集语言）。

但是你绝对正确。我们没有将我们的JavaScript编译成二进制文件，但是这个术语会被抛出很多，这会导致混乱。总而言之，我们正在接近采用WebAssembly和ASMJs的时代，它承诺在浏览器中运行字节码的时代，这将带来一些有趣的可能性，但唉...这是另一个故事。一天;）

Answer 3

当你说这些前端Javascript工具在相同的上下文中没有使用单词compile时，你就习惯使用C / C ++等语言的构建工具了。 C / C ++编译器将源代码转换为机器代码。

这些JavaScript构建工具 - 比如Webpack--在某种意义上比使用传统更加隐喻。

当网络构建工具使用单词compile时，他们正在使用它，因为它们正在进行转换，缩小（a.k.a uglyfying），并捆绑源文件，以便更好地针对客户端浏览器和网络请求进行优化。 （文件大小更小，浏览器兼容性更好，捆绑资产的HTTP请求更少等）。