parcel简介

JeamesGale 发布于3月前 阅读52次
0 条评论

特点

  • 🚀 火速 打包时间 - 多核编译,以及即使重启也能快速重构的文件系统缓存.
  • 📦 支持HTML,CSS,JS等文件资源 - 无需安装插件.
  • 🐠 自动转换模块 在需要时利用 Babel, PostCSS, and PostHTML - 甚至是 node_modules.
  • ✂️ 零配置 代码分割 使用动态的 import() 声明.
  • 🔥 支持 模块热更新
  • 🚨 友好的错误日志体验 - 高亮代码以便指出问题所在.

起步

  1. Install with yarn:
yarn global add parcel-bundler

or with npm:

npm install -g parcel-bundler
  1. Parcel可以把人和类型的文件作为入口文件,但是最好是HTML文件或则JS文件.如果你在一个HTML中使用相对路径引入主要的JS文件, Parcel 也会处理, 并将相关文件替换为输出文件的URL.
<html>
<body>
  <script src="./index.js"></script>
</body>
</html>
  1. Parcel有一个内置开发服务器, 当文件改变的时候他可以自动重构你的APP,而且支持模块热更新. 只需要指出你的入口文件即可:
parcel index.html
  1. 现在在你的浏览器中打开 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 知道如何将每个文件的代码合并到由浏览器加载的最终文件中。

查看原文: parcel简介

  • brownswan
  • goldenostrich
  • bigelephant
  • organicbutterfly
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。