Parcel：零配置的前端打包神器，助力Web应用高效开发

在前端开发的快速迭代中，Parcel以零配置的优势，为迅速搭建原型提供了极大的便利。相对于Vite，Parcel在轻量级项目和快速原型开发中更显手脚敏捷。Vite更适合需要细致构建优化的复杂场景。Parcel的易用性让开发者能立刻投入创意实现，无需任何配置。

简介

以迅速和便利的特性赢得开发者好评的前端打包工具Parcel，可以无需过多调整设置，自动地处理JavaScript、CSS和HTML等各类资源。这种简易性和高效性，使Parcel在GitHub中获得了43k star。

Parcel的特性

• 快速打包 - 多核编译，以及文件系统缓存，即使在重新启动之后也能快速重新构建。
• 支持JS，CSS，HTML，文件资源等- 不需要安装任何插件。
• 在需要的时候自动使用Babel，PostCSS和PostHTML自动转换模块 - 甚至是node_modules。
• 零配置代码拆分，使用动态import语句分割。
• 内置支持模块热替换
• 友好的错误记录体验，语法突出显示的代码帧有助于查明问题。

为什么需要Parcel？

目前已经有很多的打包工具了，包括webpack和browserify。那么为什么我们还需要另外一个呢？主要原因是因为开发者的经验。

许多的打包工具都是围绕着配置和插件构建的，而且为了让应用正常的工作，超过500行的配置并不罕见。这些配置不仅繁琐而且耗时。通常情况下，这可能导致次优化的应用发送到生产环境。parcel被设计成零配置的：只需要将它指向应用程序的入口点，它就能正常工作。

目前现存的打包工具都非常慢。拥有大量文件和依赖的大型应用可能需要花费几分钟的时间来构建，这在开发过程中随着时间的变化而变得尤为痛苦。监听文件变更能够帮助重新构建，但初始的启动仍然非常慢。parcel利用工作线程编译你的代码，利用现代的多核处理器能力。这导致了初始构建的速度大大提升。它还具有一个文件系统缓存，可以保存每一个文件的编译结果，以便后续能够更快的启动。

最后，现有的打包工具都是围绕字符串加载/转换构建的，其中转换需要一个字符串，解析它，进行一些转换，然后再次生成代码。通常这样会导致许多的解析和代码生成在单个文件上运行，这是非常低效的。相反，parcel的转换工作在AST上，因此每个文件只有一个解析，多个转换以及一个代码生成。

Parcel如何工作的？

parcel将资源树转换为bundle树。许多其它的打包工具基本上都是基于js资源，其它格式都是粘贴的-例如，默认情况下以字符串的形式内嵌到js中。parcel是文件类型无关的-它可以按照你期望的方式与任何类型的资源一起工作，无需配置。

parcel将一个入口点作为输入，可以是任何类型的：JS文件，HTML，CSS，图片等。在parcel中定义了各种资源类型，它们知道如何处理特定的资源类型。资源文件被解析，它的依赖关系被提取，并转换成最终的编译形式。这创建了一个资源树。

一旦资源树被构建，资源就被放入一个bundle树中。为入口资源创建一个bundle，并为动态导入的资源创建子bundle，这回导致代码拆分的发生。当导入不同类型的资源的时候就会创建子bundle，例如如果你在js中导入css文件，它就会打包成对应js的兄弟bundle。如果一个资源需要多个bundle，它会被打包到最近的共同祖先，因此它不会被包含多次。

开始使用Parcel

首先，我们需要安装 Parcel。确保您已经安装了 Node.js，然后通过以下命令安装 Parcel：

接下来，让我们创建一个简单的 HTML 文件，命名为 index.html：

创建一个 src 目录，并在其中添加一个名为 index.js 的 JavaScript 文件：

现在我们已经准备好运行 Parcel。在项目根目录中，运行以下命令：

Parcel 会自动处理所有相关的资源，并在浏览器中打开一个服务器。当您对源文件进行更改时，Parcel 会自动重新构建项目并刷新浏览器。

配置Parcel

尽管 Parcel 的一个主要优势是零配置，但有时您可能需要根据项目需求进行一些自定义。要在 Parcel 中配置项目，您可以创建一个名为 .parcelrc 的文件，并在其中指定您的配置。

例如，要更改输出目录，您可以在 .parcelrc 文件中添加以下内容：

这将使 Parcel 将构建的资源输出到名为 custom-dist 的目录中。

开源地址：点赞+转发，关注，私信【Parcel】