特点
- ? 火速 打包时间 - 多核编译,以及即使重启也能快速重构的文件系统缓存.
- ? 支持HTML,CSS,JS等文件资源 - 无需安装插件.
- ? 自动转换模块 在需要时利用 Babel, PostCSS, and PostHTML - 甚至是
node_modules
. - ✂️ 零配置 代码分割 使用动态的
import()
声明. - ? 支持 模块热更新
- ? 友好的错误日志体验 - 高亮代码以便指出问题所在.
起步
- Install with yarn:
yarn global add parcel-bundler
or with npm:
npm install -g parcel-bundler
- Parcel可以把人和类型的文件作为入口文件,但是最好是HTML文件或则JS文件.如果你在一个HTML中使用相对路径引入主要的JS文件, Parcel 也会处理, 并将相关文件替换为输出文件的URL.
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
- Parcel有一个内置开发服务器, 当文件改变的时候他可以自动重构你的APP,而且支持模块热更新. 只需要指出你的入口文件即可:
parcel index.html
- 现在在你的浏览器中打开 http://localhost:1234/. 如果有需要你可以利用 -p 这个配置来覆盖默认端口.
See parceljs.org for more documentation!
基准
基于一个合理大小的 app, 包含 1726 个模块, 没压缩前是6.5M . 在一台 2016的 MacBook Pro上测试.
Bundler | Time |
---|---|
browserify | 22.98s |
webpack | 20.71s |
parcel | 9.98s |
parcel - with cache | 2.64s |
为什么选择parcel?
目前已经有许多应用非常广泛的打包工具,比如webpack 和 browserify. 所以为什么要使用parcel?答案是:为了提高开发体验。
许多打包工具需要许多配置,下载许多插件, 仅仅为了让应用工作,就需要写上超过500行的配置,这是十分常见的. 这些配置不仅无聊而且耗时, 而且想要配置正确也不容易。 这往往不能使应用在性能上达到最优化。 parcel
很自豪地告诉你,我们不需要任何配置: 仅仅需要指出你的入口文件,它就能帮你解决问题。
已有的打包器运行速度也很缓慢。 拥有许多文件和依赖的大型应用需要花费数分钟打包, 在开发阶段文件经常需要改变的情况下,这尤其痛苦。 文件watcher会帮助我们重新打包,但初次启动仍然十分缓慢。 parcel
在parallel中利用现代的多核处理器去编译代码。 这就在初次构建时节省了许多时间。 它也有一个文件系统缓存, 它可以保存每个文件的编译结果,从而实现更快的后续启动。
最后,现有的打包器是基于string loader/转换的,其中转换需要一个字符串,解析它,进行一些转换,然后再次生成代码。 通常这最终导致许多解析和代码生成在单个文件上运行,这是低效的。 相反,parcel
的转换工作在AST上,因此每个文件只有一个解析,多个转换和一个代码生成。
How it works
parcel
transforms a tree of assets to a tree of bundles. Many other bundlers are fundamentally based around JavaScript assets, with other formats tacked on - for example, by default inlined as strings into JS files. parcel
is file-type agnostic - it will work with any type of assets the way you'd expect, with no configuration.
parcel
将文件树转换为打包树。 许多其他打包器基本上都是基于JavaScript文件,其他类型的文件都是基于js文件的 - 例如,默认情况下内嵌为JS文件的字符串。 parcel
的文件类型不可知 - 它可以按照您期望的方式处理任何类型的文件,而无需配置。
一旦文件树已经被构建完毕,文件就被放入打包树中。 为入口文件创建一个包,并为动态import()
创建子包,这会导致代码拆分的发生。 当导入不同类型的文件时,也会创建子包,例如,如果您从JavaScript导入CSS文件,则会将其绑定到相应的JavaScript的兄弟包中。 如果一个文件需要被多个包引用,它将被打包到最近的共同祖先,因此它不会被包含多次。
在打包树被创建以后,每个包都由特定于文件类型的包装器写入文件。 packagers 知道如何将每个文件的代码合并到由浏览器加载的最终文件中。