🚀 极速打包
Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。
📦 将你所有的资源打包
Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。
🐠 自动转换
如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules
包会被用于自动转换代码.
✂️ 零配置代码分拆
使用动态 import()
语法, Parcel 将你的输出文件束(bundles)分拆,因此你只需要在初次加载时加载你所需要的代码。
🔥 热模块替换
Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。
🚨 友好的错误日志
当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题。
Hello World
先从你应用的入口 HTML 文件开始。Parcel 跟随着文件的依赖去构建你的整个应用。
✏️ index.html
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
🛠 index.js
// 引入另一个组件
import main from './main';
main();
🛠 main.js
// 引入一个 CSS 模块
import classes from './main.css';
export default () => {
console.log(classes.main);
};
💅 main.css
.main {
/* 引用一张图片 */
background: url('./images/background.png');
color: red;
}
只需要运行 parcel index.html
去启动一个开发服务器。引入 JavaScript, CSS, images和更多的资源,然后便大功告成! 👌
基准
打包工具 | 时间 |
---|---|
browserify | 22.98s |
webpack | 20.71s |
parcel | 9.98s |
parcel - with cache | 2.64s |
基于一个合理大小的应用,包含1726个模块, 6.5M 未压缩大小. 在一台有4个物理核心 CPU 的 2016 MacBook Pro 上构建。