专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

带你了解前端构建工具parcel 前端patch

ins518 2024-10-07 13:25:26 技术文章 9 ℃ 0 评论

简介

parcel是一款极速零配置Web应用打包工具。parcel 最新版本1.12.3 github star 数 32K+。

特性

  • 极速打包

Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。

  • 将你所有的资源打包

Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。

  • 自动转换

如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

  • 零配置代码分拆

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

  • 热模块替换

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

  • 友好的错误日志

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

基准

常用打包工具时间(数据基于一个合理大小的应用，包含1726个模块，6.5M 未压缩大小。在一台有4个物理核心 CPU 的 2016 MacBook Pro 上构建)。

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

快速开始

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

首先通过 Yarn 或者 npm 安装 Parcel ：

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

在你正在使用的项目目录下创建一个 package.json 文件：

yarn init -y

or

npm init -y

Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。

接下来，创建一个 index.html 和 index.js 文件。

<html>
 <body>
 <script src="./index.js"></script>
 </body>
</html>
console.log('hello world')

Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器，而且为了实现快速开发，该开发服务器支持热模块替换。只需要在入口文件指出：

parcel index.html

现在在浏览器中打开 http://localhost:1234/。如果模块热重载没有生效，你可能需要配置你的编辑器。你也可以使用 -p <port number> 选项覆盖默认的端口。 如果没有自己的服务器可使用开发服务器，或者你的应用程序完全由客户端呈现。如果有自己的服务器，你可以在watch模式下运行 Parcel 。当文件改变它仍然会自动重新构建并支持热替换，但是不会启动 web 服务。

parcel watch index.html

PS

是不是很简单？

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表