Javascript 项目如何工作：深入探讨转译器、捆绑器等

介绍

了解 JavaScript 项目如何真正发挥作用一直让我很感兴趣。虽然我们中的许多人都精通编写代码，但并不是每个人都能清楚地解释编写代码后幕后发生的情况。 在本文中，我们将探讨一切在幕后是如何运作的。

超过 98.7% 的网站使用 JavaScript。来源：Radixweb

---

概述

当您构建应用程序时，需要使用许多工具来提供美观且高性能的应用程序：

这些工具协同工作，创建简化的开发流程，使开发人员能够专注于构建功能，而不是处理兼容性或性能问题。

---

深入探讨：它们是如何工作的

当您构建项目时，

任务运行者会编排流程，协调转译器和捆绑器以确保简化且高效的构建。

Babel 等转译器获取现代 Javascript (ES6+) 或 Typescript 中的源代码，并将其转换为与旧版浏览器 (ES5) 兼容的 Javascript。

像 Webpack 这样的打包器会获取所有文件（Javascript、CSS、图像等...）并将它们编译成更小的文件甚至单个文件。

在此过程中，Webpack 还通过最小化和压缩代码来优化代码，从而减少加载时间并提高性能。

但我的项目没有这些工具也能工作吗？

是和否，如果没有太多复杂性，您的项目就可以工作。

如果您开始增加复杂性，缺乏这些工具可能会带来重大挑战：

---

示例工作流程

1 - 编写现代 JavaScript 代码：
您在源文件中编写 ES6+ 或 TypeScript。

2 - 运行构建命令：
您执行触发编译器的构建命令（npm run build）。

--开始构建过程--
3 - 转译代码：
转译器（例如 Babel）将您的 ES6+ 代码转换为 ES5。

4 - 捆绑文件：
捆绑器（例如 Webpack）然后获取转译的文件并将它们组合成一个或几个优化的文件。
-- 构建过程结束 --

5 - 部署：
最终的捆绑文件已经准备好部署到服务器了。

任务运行器不是构建过程本身的一部分，而是编排它。它们通过与 Babel 和 Webpack 等工具集成来自动化和管理转译和捆绑等任务。从本质上讲，任务运行程序简化和协调整个构建过程，确保任务按正确的顺序执行。

---

感谢您的阅读?