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

介绍

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

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

---

概述

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

• ⚙️ 转译器：它的工作是确保你的代码可以在不同的环境中运行！把它想象成确保你奶奶的旧电脑可以处理你的应用程序，而无需出了问题！

• ??‍♂️ 捆绑器：就像超级英雄一样，它优化您的代码，使其更高效地加载和执行。它将您的所有资源捆绑到一个文件中，从而减少您的应用必须发出的请求数量。

• ？ 任务运行器：这些是您开发过程中的黑暗骑士。 它们自动执行日常任务，例如文件缩小（压缩代码）、编译（将 SCSS 转换为 CSS）和图像优化。它们使我们不必手动处理这些繁琐的任务。

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

---

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

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

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

像 Webpack 这样的打包器会获取所有文件（Javascript、CSS、图像等）并将它们编译成更小的文件甚至单个文件。
在此过程中，Webpack 还通过最小化和压缩代码来优化代码，从而减少加载时间并提高性能。

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

是和否，如果没有太多复杂性，您的项目就可以工作。
如果您开始增加复杂性，缺乏这些工具可能会带来重大挑战：

• 代码兼容性：如果没有转译器，您的 JavaScript 代码可能无法在旧版浏览器上正确运行，从而限制您的受众。

• 性能：如果没有捆绑程序，您的应用程序可能会由于未优化的代码交付而导致加载时间变慢。

• 效率：如果没有任务运行程序，您将需要手动处理重复性任务，从而导致构建过程效率低下并可能出现错误。

---

示例工作流程

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

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

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

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

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

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

---

感谢您的阅读？

以上是Javascript 项目如何工作：深入探讨转译器、捆绑器等的详细内容。更多信息请关注PHP中文网其他相关文章！