特点
- ? 火速 打包时间 - 多核编译，以及即使重启也能快速重构的文件系统缓存.
- ? 支持HTML,CSS,JS等文件资源 - 无需安装插件.
- ? 自动转换模块 在需要时利用 Babel, PostCSS, and PostHTML - 甚至是
node_modules. - ✂️ 零配置 代码分割 使用动态的
import()声明. - ? 支持 模块热更新
- ? 友好的错误日志体验 - 高亮代码以便指出问题所在.
起步
- Install with yarn:
yarn global add parcel-bundleror 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 知道如何将每个文件的代码合并到由浏览器加载的最终文件中。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。