Parcel 快速 零配置的 Web 应用程序打包器 - 资源分享

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

发布于 2019-05-26 字数 3143 浏览 1596 评论 0

Parcel 将 资源 树转换成 包(bundles) 树。许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源。例如在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置。

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

特点

🚀 快速打包

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 硬件设备上构建。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论