介绍
了解 JavaScript 项目如何真正发挥作用一直让我很感兴趣。虽然我们中的许多人都精通编写代码，但并不是每个人都能清楚地解释编写代码后幕后发生的情况。
在本文中，我们将探讨一切在幕后是如何运作的。
超过 98.7% 的网站使用 JavaScript。
来源：Radixweb
概述
当您构建应用程序时，需要使用许多工具来提供美观且高性能的应用程序：
- ⚙️
转译器：它的工作是确保您的代码可以在不同的环境中运行！ 将其视为确保您奶奶的旧电脑可以顺利处理您的应用程序！
- ??♂️
捆绑器：就像超级英雄一样，它优化您的代码，使其更高效地加载和执行。它将您的所有资源捆绑到一个文件中，从而减少您的应用程序必须发出的请求数量。
- ?
任务运行器：这些是您开发过程中的黑暗骑士。 它们自动执行日常任务，例如文件缩小（压缩代码）、编译（将 SCSS 转换为 CSS）和图像优化。它们使我们不必手动处理这些繁琐的任务。
深入探讨：它们是如何工作的
当您构建项目时，
任务运行者会编排流程，协调转译器和捆绑器以确保简化且高效的构建。
Babel 等转译器获取现代 Javascript (ES6+) 或 Typescript 中的源代码，并将其转换为与旧版浏览器 (ES5) 兼容的 Javascript。像 Webpack 这样的打包器会获取所有文件（Javascript、CSS、图像等...）并将它们编译成更小的文件甚至单个文件。
在此过程中，Webpack 还通过最小化和压缩代码来优化代码，从而减少加载时间并提高性能。
是和否，如果没有太多复杂性，您的项目就可以工作。
如果您开始增加复杂性，缺乏这些工具可能会带来重大挑战：
-
代码兼容性：如果没有转译器，您的 JavaScript 代码可能无法在旧版浏览器上正确运行，从而限制了您的受众。
-
性能：如果没有捆绑器，您的应用程序可能会由于未优化的代码交付而导致加载时间变慢。
立即学习“Java免费学习笔记（深入）”；
-
效率：如果没有任务运行程序，您将需要手动处理重复性任务，从而导致构建过程效率低下并可能出现错误。
示例工作流程
1 - 编写现代 JavaScript 代码：
您在源文件中编写 ES6+ 或 TypeScript。
2 - 运行构建命令：
您执行触发编译器的构建命令（npm run build）。
--开始构建过程--
3 - 转译代码：
转译器（例如 Babel）将您的 ES6+ 代码转换为 ES5。
4 - 捆绑文件：
捆绑器（例如 Webpack）然后获取转译的文件并将它们组合成一个或几个优化的文件。
-- 构建过程结束 --
5 - 部署：
最终的捆绑文件已经准备好部署到服务器了。
任务运行器不是构建过程本身的一部分，而是编排它。它们通过与 Babel 和 Webpack 等工具集成来自动化和管理转译和捆绑等任务。从本质上讲，任务运行程序简化和协调整个构建过程，确保任务按正确的顺序执行。
感谢您的阅读?
