新一代打包神器parcel简介

时间 2019-12-10

标签新一代打包神器 parcel 简介繁體版

原文原文链接

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

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

特性

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

工做方式

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

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

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

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

入门

安装
yarn global add parcel-bundlerweb

或npm

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...