零配置打包工具——Parcel

前言：Parcel 是零配置、极速的 web 应用打包工具。主要特点包括：快速打包，多核编译并且拥有文件系统缓存；原生支持打包JS、CSS、HTML、文件资源等；内置支持模块热替换

Parcel 是基于资源的，资源可以是任意文件。Parcel 会自动分析这些文件和包中引用的依赖。

Parcel 是一个约定大于配置的打包工具。

官网

极速零配置Web应用打包工具——Parcel

安装

NPM

1	$ npm install -g parcel-bundler

Yarn

1	$ yarn global add parcel-bundler

运行

Parcel可以以任何文件作为入口，但最好使用HTML或JS文件。

开发环境

1	$ parcel index.html

生产环境

1	$ parcel build index.html

如果使用了 Sass ，需要另外安装 node-sass ，使用 ES6、JSX 等，需要另外安装 babel ，并写好相应的 .babelrc 文件。

代码拆分

Parcel 支持零配置代码拆分。通过使用动态 import() 函数来控制。与普通的 import 和 require 类似，但返回 Promise 对象，并且支持 async/await。

// page/about.js
export function render () { 
  // 渲染页面
}

import('./page/about').then((page) => {
  page.render()
})
// 或者使用 async/await
const page = await import('./page/about')
page.render()

如何运作

Parcel 会将资源树转换成文件束（bundle）树。打包流程有三个步骤：

构建资源树，资源会被解析，资源的依赖会被提取，资源会被转换成最终编译好的形态；

构建文件束（bundle）树，资源树被构建好，资源会被放置在文件束树中，一个入口资源会被构建成一个文件束（bundle），动态 import 会构建一个子文件束（bundle），这过程会引起代码拆分。如果资源被多于一个文件束（bundle）引用，它会被提升到文件束树中最近的公共祖先。

打包，文件束树构建成功后，每个文件束都会被 packager 写到一个特定文件类型的文件中，然后 packager 会自动从每个资源中将代码合并，生成到最终被浏览器加载的文件中

与其他打包工具的比对

Parcel 与其他打包工具最大的不同就是零配置和速度快。零配置，这使得无论是新手还是老司机都能够很快把项目构建打包，同时在构建过程中速度要明显快于其他打包工具

browserify：22.98s

webpack：20.71s

parcel：9.98s

parcel - with cache：2.64s

基于一个合理大小的应用，包含1726个模块， 6.5M 未压缩大小. 在一台有4个物理核心 CPU 的 2016 MacBook Pro 上构建。（以上数据来源于官网）

其他打包工具基本上是基于 JavaScript 资源，还有附加在其上的其它格式的资源。例如在 JS 文件中内联成字符串。

比如 webpack ，代码转译主要是靠 loader 进行字符串处理。一个 loader 处理完后，再将字符串传给下一个 loader，接着再进行 parse 为AST（抽象语法树），然后再 uglify（混淆代码）和压缩。

Parcel 是先将代码转译成 AST，然后再进行转换，即便在某些场景下需要多次转译，然后 uglify ，最后也只需要 parse 一次。在这过程中，每一步都能够利用到已经解析过后的 AST，并且 Parcel 拥有多核处理和文件系统缓存，能够大大减少构建打包的速度。

总结

总而言之，Parcel 简单易学，零配置和极速打包给开发者带来了更好的开发体验，但还是不够灵活，零配置相对的会增加更多约定，同时现在生态圈不完善。所以，现在 Parcel 应该比较适合于一些小型项目，或者是未应用前端框架的一些项目。当然我们还是要对 Parcel 保持关注，期待越来越好