介绍

了解 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 等工具集成来自动化和管理转译和捆绑等任务。从本质上讲，任务运行程序简化和协调整个构建过程，确保任务按正确的顺序执行。

---

感谢您的阅读?

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