Parcel 快速 零配置的 Web 应用程序打包器
Parcel 将 资源 树转换成 包(bundles) 树。许多其它的打包工具基本上是基于 JavaScript 资源，还有附加在其上的其它格式的资源。例如在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的，它能按你所期待的方式那样与任意类型的资源工作，且毋须配置。
特点
🚀 快速打包
Parcel 使用工作进程启用多核编译，并具有文件系统缓存，即使在重新启动后也可快速重新构建。
📦 打包所有资源
Parcel 支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件。
🐠 自动转换
在需要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。
✂️ 零配置代码拆分
Parcel 使用动态 import() 语法拆分您的输出包，所以只加载初始加载时所需的内容。
🔥 模块热替换
当你在开发过程中进行更改时，Parcel 会自动更新浏览器中的模块，不需要进行任何配置。
🚨 友好的错误记录
遇到错误时，Parcel 会以语法高亮的形式打印的代码帧，以帮助你查明问题。
安装
Install with yarn:
yarn global add parcel-bundler
or with npm:
npm install -g parcel-bundler
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 硬件设备上构建。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论