ParcelJS模块加载vs Webpack

Question

我正在努力加深我对JavaScript模块的理解，而不仅仅是使用CommonJS，AMD和ES模块。

这让我更深入地研究了webpack，以了解它是如何在浏览器中实际使模块工作的，而不依赖于仍然相对较新的ES模块。据我所知，Webpack捆绑了JS，将import和require语句转换为自己的语句，并将其附带运行时和清单，以允许其执行它们。因此，通过基本实现自己的模块，Webpack已经克服了缺乏模块支持的问题？

我试图将它与另一个捆绑包-- Parcel进行比较，但我似乎找不到任何关于它如何处理模块的信息。

有没有人知道我对Webpack的理解是否正确，以及这与Parcel是如何做比较的？

提前感谢任何帮助。

谢谢

Answer 1

AMD导入/导出语法的实现使得许多传统的模块加载器，如RequireJS /AMD和rollup有些过时。然而，像Webpack和Parcel这样的资产捆绑者仍然在现代web开发中找到了自己的位置。

资产捆绑器将多个文件打包成一组较小的文件(包括JS、图像、字体、LESS、SCSS等)，从而减少对服务器的请求数量和通信开销。捆绑过程通常涉及脚本缩减、死代码删除和依赖项管理。这也允许更多模块化的前端web开发。

在某些方面，帕塞尔更新，比Webpack更先进。Parcel支持多种开箱即用的语言和文件类型，从网页技术(如HTML、CSS和JavaScript )，到低级语言(如Rust )和任何可编译为WebAssembly的语言，再到图像、字体、视频等资源。您可以一次构建多个目标，并在进行更改时实时更新它们。Parcel在workers内部并行地独立编译所有文件，并在执行过程中缓存所有文件。使用动态import()语句进行代码拆分不需要显式配置。

Webpack和Parcel都提供了一个开发服务器来在浏览器上测试您的项目。与Webpack不同的是，Parcel的入口点是HTML文件，而不是JS文件。您不应该在< script>标记中声明模块“type=”。

另一个资产捆绑器是Browserify。这是一个更简单的工具，它只是捆绑你的文件。它的功能不像Webpack和Parcel那么丰富。