Libx

初探parcel📦

Word count: 903Reading time: 3 min
2018/01/13 Share

在期末复习的一个难受的下午,也就是现在,我突然想起了之前看到的号称零配置且最快的前端打包神器:Parcel,于是我放下数字逻辑。准备看看这货到底什么样。

github地址:https://github.com/parcel-bundler/parcel

首先想要吐槽一下。。Parcel图标确实是不怎么好看哈哈。一个纸箱子。。不过可以说是直接了当的展示出了他的功能。打包嘛。

简介:

先来官网瞅一瞅(说的确实挺厉害的)

🚀 极速打包时间
Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。

📦 将你所有的资源打包
Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。

🐠 自动转换
如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

✂️ 零配置代码分拆
使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆,因此你只需要在初次加载时加载你所需要的代码。

🔥 热模块替换
Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

🚨 友好的错误日志
当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题

官网还提供了这样一个比较

打包工具 时间
browserify 22.98s
webpack 20.71s
parcel 9.98s
parcel - with cache 2.64s

基于一个合理大小的应用,包含1726个模块, 6.5M 未压缩大小. 在一台有4个物理 CPU 的 2016 MacBook Pro 上构建。

相比的话,确实是相当的快,而且二次打包简直要起飞。。

开始

先安装(当然你也可以使用yarn)
mkdir parceltest && cd parceltest && npm install parcel-bundler --save

文档中说的是Parcel 可以使用任何类型的文件作为入口,但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件,Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。

然后,创建一个 index.html 和 index.js 文件。

touch index.html && touch index.js

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>

index.js

console.log("hello parcel");

Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器,而且为了实现快速开发,该开发服务器支持热模块替换。在package.json指出即可:

"scripts":{
"start":"parcel index.html"
}

然后,npm start
现在在浏览器中打开 http://localhost:1234/。也可以使用 -p 选项覆盖默认的端口。
确实很快。

built in 16ms

此外支持零配置代码拆分,也是挺舒服的。

至于sass,babel什么的,文档说的看起来于是相当的易于安装,基本无配置。支持TS,貌似还支持vue的组件和react的组件。

不过目前就看了这么多,边看文档,边简单的测试,边写这个小体验。只是接触了最基础的东西,总体给人的感觉是很轻,很快。很友好。不过据说webpack 4.0也要加入默认配置(可怜我webapck 3.0都不怎么会用。。)不知道parcel能不能真的火起来。不过一些小项目尝尝鲜还是没有问题的叭。

复习实在无聊,来看下这个东西还是很解闷的。。就先这么多吧,,复习要紧复习要紧。。

CATALOG
  1. 1. 简介:
  2. 2. 开始