介绍
了解 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 项目如何工作：深入探讨转译器、捆绑器等的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490638.html
微信扫一扫 
支付宝扫一扫 
