快速,零配置的 Web 应用程序打包器

入门 GitHub

🚀 快速打包

Parcel 使用工作进程启用多核编译,并具有文件系统缓存,即使在重新启动后也可快速重新构建。

📦 打包所有资源

Parcel 支持JS,CSS,HTML,文件资源等等 - 不需要安装任何插件。

🐠 自动转换

在需要时,代码使用 Babel,PostCSS 和 PostHTML 自动转换 - 即使是 node_modules

✂️ 零配置代码拆分

Parcel 使用动态 import() 语法拆分您的输出包,所以只加载初始加载时所需的内容。

🔥 模块热替换

当你在开发过程中进行更改时,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 module
import classes from './main.css';

export default () => {
  console.log(classes.main);
};

💅 main.css

.main {
  /* 引用一个 image 文件 */
  background: url('./images/background.png');
  color: red;
}

只需运行parcel index.html 来启动一个dev服务器。导入 JavaScript,CSS,images,和更多资源,即可轻松搞定!👌

测试数据

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

以上数据基于合理大小的应用程序,包含1726个模块,6.5M未压缩。 在 2016年 MacBook Pro 与 4个物理 CPU 硬件设备上构建。