新一代打包神器parcel简介

官方地址：https://parceljs.org/getting_...

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

特性

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

工作方式

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

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

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

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

入门

安装

yarn global add parcel-bundler

或

npm install -g parcel-bundler
Parcel 可以将任何类型的文件作为 entry point(入口点)，但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中，Parcel 也会为你处理，并将该引用替换为输出文件的URL。
```
<html>
<body><script src="./index.js"></script>
</body>
</html>
```
```
console.log("hello world");
```
Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持模块热替换，以便你快速开发。你只需指定入口文件即可：
```
parcel index.html
```

webpack与parcel比较

Webpack 打包时间 = parse string n + transform n + parse to AST + compress

Parcel 打包时间 = parse to AST + transform * n + compress

Webpack 之所以有时感觉很慢，是因为代码转译全靠 loader 进行字符串处理。比如一个 index.js 有可能要经历 loaderA -> loaderB -> loaderC，这些 loader 完全不知道彼此之间的存在，都是接过来一个字符串自己处理，然后再交给下一个。如果最后再 uglify 一下还要先 parse 为 AST（抽象语法树）再压缩，这一步也是比较耗时的。

因此，parcel 至少为我们提供了一个很好的思路：多步转译 + 压缩时，每一步都可以利用到已经解析过后的 AST，只要完成各自的 transform 即可。

使用parcel的优势

零配置，只需要将它指向应用程序入口点，就能正常工作
构建快速，具有文件系统缓存，可以保存每个文件的编译结果
parcel的转换工作在AST上，每个文件只有一个解析，多个转换以及一个代码生成

原文链接：https://github.com/parcel-bun...