极速、零配置的 web 应用打包工具

快速入门 GitHub

🚀 极快的打包速度

Parcel 使用 worker 进程开启多核编译,同时支持文件系统缓存,即使在重启后也能快速再次编译。

📦 将所有资源打包

Parcel 天生支持 JS、CSS、HTML、文件资源等,而且无需插件。

🐠 自动转换

如若有需要,Babel、PostCSS 和 PostHTML 会被用于自动转换代码,即便是 node_modules 内的代码也不例外。

✂️ 零配置代码拆分

使用动态的 import() 语法, Parcel 将会分拆输出文件,因此你只需要在初次加载时加载必要的代码。

🔥 模块热替换

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

🚨 友好的错误日志

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

Hello World

从 HTML 入口文件开始,Parcel 会跟随着文件的依赖去构建整个应用。

✏️ index.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

🛠 index.js

// import another component
import main from './main';

main();

🛠 main.js

// import a CSS module
import classes from './main.css';

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

💅 main.css

.main {
  /* Reference an image file */
  background: url('./images/background.png');
  color: red;
}

只需运行 parcel index.html 命令即可启动一个开发服务器。引入 JavaScript、CSS、图片等资源即可开始! 👌

基准测试

打包工具 耗时
browserify 22.98s
webpack 20.71s
parcel 9.98s
parcel - 带缓存 2.64s

上述测试采用了一个常见大小的应用,包含 1726个 模块, 6.5M 未压缩大小。在一台配备 4 个物理 CPU 的 2016 MacBook Pro 上构建。