快速，零配置的 Web 应用程序打包工具 – Parcel 介绍

亦凉 2022-05-20 01:38 166阅读 0赞

**小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

在这里介绍一下 Parcel 。一个快速，零配置的 Web 应用程序打包工具。

Parcel 官网：[https://parceljs.org/][https_parceljs.org]

Parcel 中文文档：[http://www.css88.com/doc/parcel/][http_www.css88.com_doc_parcel]

## 特性 ##

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

## 入门 ##

1、用 npm 或 yarn 安装：

Yarn:

CommandLine代码:

1.  yarn globaladd parcel\-bundler

npm:

CommandLine代码:

1.  npm install \-g parcel\-bundler

2、Parcel 可以将任何类型的文件作为 entry point(入口点)，但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中，Parcel 也会为你处理，并将该引用替换为输出文件的URL。

HTML 代码:

1.  <html>
2.  <body>
3.  <script src="./index.js"></script>
4.  </body>
5.  </html>

3、Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持 模块热替换 ，以便你快速开发。你只需指定 入口文件 即可：

CommandLine代码:

1.  parcel index.html

4、现在在你浏览器中打开 [http://localhost:1234/][http_localhost_1234] 。 您也可以使用 `-p` 选项覆盖默认端口。

## 比较 ##

以下数据基于合理大小的应用程序，包含1726个模块，6.5M未压缩。 在 2016年 MacBook Pro 与 4个物理 CPU 硬件设备上构建。

<table style="border-width:0px 1px 1px 0px;border-right-style:solid;border-bottom-style:solid;border-right-color:rgb(203,203,203);border-bottom-color:rgb(203,203,203);vertical-align:baseline;border-collapse:separate;border-spacing:0px;color:rgb(119,119,119);font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;font-size:16px;"> 
 <thead style="border:0px;vertical-align:baseline;"> 
  <tr style="border-top:0px;vertical-align:baseline;"> 
   <th style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;text-align:center;">Bundler</th> 
   <th style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;text-align:center;">Time</th> 
  </tr> 
 </thead> 
 <tbody style="vertical-align:baseline;"> 
  <tr style="border-top:0px;vertical-align:baseline;"> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);">browserify</td> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);">22.98s</td> 
  </tr> 
  <tr style="border-top:0px;vertical-align:baseline;"> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);">webpack</td> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);">20.71s</td> 
  </tr> 
  <tr style="border-top:0px;vertical-align:baseline;"> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);"><span style="border:0px;vertical-align:baseline;">parcel</span></td> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);"><span style="border:0px;vertical-align:baseline;">9.98s</span></td> 
  </tr> 
  <tr style="border-top:0px;vertical-align:baseline;"> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);"><span style="border:0px;vertical-align:baseline;">parcel – with cache</span></td> 
   <td style="border-right:0px;border-bottom:0px;border-top-color:rgb(203,203,203);border-left-color:rgb(203,203,203);vertical-align:baseline;font-size:1em;line-height:2;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;color:rgb(119,119,119);"><span style="border:0px;vertical-align:baseline;">2.64s</span></td> 
  </tr> 
 </tbody> 
</table>

## 为什么使用 Parcel ？ ##

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

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

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

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

## Parcel如何工作？ ##

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

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

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

在构建bundle树之后，每一个包都有特定的文件类型的包装器写入文件。打包器知道如何将每个资源的代码合并到由浏览器加载的最终文件中。

## 我来插几句 ##

前端工具层出不穷，Parcel 标榜的是快速和零配置。对于我个人而且，快速可能根本不是我看中的。零配置有点言过其实，虽然 ParcelJS 本身是 零配置的，但 HTML、JS 和 CSS 分别是通过 posthtml、babel 和 postcss 处理的，所以我们得分别配 .posthtmlrc、.babelrc 和 .postcssrc 。这个可以查看[转换部分的文档][Link 1]。自己跑一下简单项目，确实比较轻松。应该可以瓜分 webpack 部分用户，相对来说确实比 webpack 简单，而且适应简单项目。后续有待踩坑，有待观察其社区方面的推进。没有一个牛逼的社区支撑工具，肯定会迅速消亡。

[Fundebug]: https://www.fundebug.com/
[https_parceljs.org]: https://parceljs.org/
[http_www.css88.com_doc_parcel]: http://www.css88.com/doc/parcel/
[http_localhost_1234]: http://localhost:1234/
[Link 1]: http://www.css88.com/doc/parcel/transforms.html