当前位置: 首页 > news >正文

Parcel 常用插件:增强功能与性能的最佳选择

前言

Parcel 是一个现代化的零配置应用打包工具,旨在简化开发流程并提高效率。通过其智能的默认配置和丰富的插件生态系统,Parcel 使得开发者能够轻松应对各种构建需求。虽然 Parcel 在大多数情况下可以开箱即用,但为了满足特定的项目需求,合理地使用插件可以大大增强其功能和灵活性。本文将介绍几款常用的 Parcel 插件,帮助开发者更好地利用 Parcel 提供的强大功能。

常见插件列表

1. babel-plugin-transform-runtime

什么是 Babel?
首先,Babel 是一个 JavaScript 编译器,它主要用于将 ES6+ 代码转换成向后兼容的 JavaScript 代码,以便能够在当前和旧版浏览器或环境中运行。Parcel 默认集成了 Babel,使得开发者可以使用最新的 JavaScript 特性。

为什么需要 transform-runtime 插件?
Babel 编译代码时,有时候会引入一些辅助代码(如 polyfill),变得冗长。babel-plugin-transform-runtime 插件的作用是减少这些冗余,通过引入 @babel/runtime 的共享库来替代。

使用方法
在项目根目录下安装插件:

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

在 .babelrc 文件中添加配置:

{"plugins": ["@babel/plugin-transform-runtime"]
}

2. @parcel/optimizer-image

为什么需要图片优化?

在现代 web 应用中,图片往往是占用带宽最多的资源之一。优化图片可以有效减少应用加载时间,提高用户体验。

使用方法

安装插件:

npm install --save-dev @parcel/optimizer-image

Parcel 会自动检测并使用这个优化器,无需额外配置。该插件支持多种图片格式的优化,包括 JPEG、PNG 和 SVG。

3. @parcel/transformer-sass

为什么需要 SASS?

SASS 是一种 CSS 预处理器,允许我们使用变量、嵌套、混合等高级特性,使得 CSS 代码更加模块化和易维护。Parcel 可以直接处理 SASS 文件,但需要安装相应的 transformer 插件。

使用方法

安装插件:

npm install --save-dev @parcel/transformer-sass

然后你可以在项目中直接导入 .scss 文件:

import './styles.scss';

4. @parcel/transformer-typescript-tsc

为什么需要 TypeScript?

TypeScript 是 JavaScript 的超集,添加了静态类型和其他特性,使得代码更安全和可维护。Parcel 支持 TypeScript 编译,但使用 tsc 作为编译器可以提供更多编译选项和更好的性能。

使用方法

安装插件:

npm install --save-dev @parcel/transformer-typescript-tsc

然后在项目中直接使用 TypeScript 文件:

const greeting: string = "Hello, Parcel!";
console.log(greeting);

5. @parcel/transformer-react-refresh

为什么需要 React Refresh?

在使用 React 开发时,热模块替换(Hot Module Replacement, HMR)可以极大地提高开发效率。它允许在不重新加载整个页面的情况下实时更新代码。react-refresh 是 React 官方推荐的 HMR 解决方案。

使用方法

安装插件:

npm install --save-dev @parcel/transformer-react-refresh
npm install --save react-refresh

在 package.json 中添加以下配置:

{"scripts": {"start": "parcel serve index.html --hmr"}
}

然后在你的入口文件中引入:

if (module.hot) {module.hot.accept();
}

6. @parcel/resolver-glob

为什么需要 Glob Resolver?

在大型项目中,有时需要根据某种模式(Pattern)批量引入文件。@parcel/resolver-glob 插件允许你使用全局模式(glob patterns)来简化这种操作。

使用方法

安装插件:

npm install --save-dev @parcel/resolver-glob

然后你可以在代码中像这样批量引入文件:

const images = require.context('./images', true, /\.(png|jpe?g|svg)$/);images.keys().forEach((key) => {const img = new Image();img.src = images(key);document.body.appendChild(img);
});

7. @parcel/packager-raw

为什么需要 Raw Packager?

有些时候,你可能需要打包一些非标准的文件类型(例如:文本文件、二进制文件等),@parcel/packager-raw 插件可以让你直接将这些文件打包进项目中。

使用方法

安装插件:

npm install --save-dev @parcel/packager-raw

然后,你可以直接导入这些文件:

import txtContent from './file.txt';
console.log(txtContent);import binaryData from './file.bin';
console.log(new Uint8Array(binaryData));

8. @parcel/transformer-md

为什么需要 Markdown Transformer?

Markdown 是一种轻量级的标记语言,广泛用于编写文档、README 文件等。使用 @parcel/transformer-md 插件可以让你在项目中直接导入并解析 Markdown 文件。

使用方法

安装插件:

npm install --save-dev @parcel/transformer-md

然后,你可以直接导入 Markdown 文件,并将其渲染为 HTML:

import markdownContent from './README.md';
document.body.innerHTML = markdownContent;

9. @parcel/transformer-json

为什么需要 JSON Transformer?

虽然 Parcel 默认支持 JSON 文件,但 @parcel/transformer-json 插件提供了一些额外的功能,例如支持 JSON5 格式(允许注释和不严格的语法)。

使用方法

安装插件:

npm install --save-dev @parcel/transformer-json

然后你可以像这样使用 JSON 文件:

import config from './config.json5';
console.log(config);

10. @parcel/optimizer-htmlnano

为什么需要 HTML 优化器?

在生产环境中,优化 HTML 文件(如:移除空格和注释)可以减少文件大小,从而提高加载速度。@parcel/optimizer-htmlnano 插件使用 htmlnano 库来自动优化 HTML 文件。

使用方法

安装插件:

npm install --save-dev @parcel/optimizer-htmlnano

Parcel 会自动检测并使用这个优化器,无需额外配置。

总结

通过合理利用这些插件,Parcel 可以变得更加灵活和高效,满足各种复杂的项目需求。从优化图片、编译 SASS 和 TypeScript,到处理 Markdown 文件和非标准文件类型,这些插件为开发者提供了强大的工具集,以提高开发效率和代码质量。希望本文介绍的这些常用插件能够为你的开发工作带来便利,帮助你更好地利用 Parcel 构建现代化的 web 应用。

相关文章:

Parcel 常用插件:增强功能与性能的最佳选择

前言 Parcel 是一个现代化的零配置应用打包工具,旨在简化开发流程并提高效率。通过其智能的默认配置和丰富的插件生态系统,Parcel 使得开发者能够轻松应对各种构建需求。虽然 Parcel 在大多数情况下可以开箱即用,但为了满足特定的项目需求&a…...

Vite 与 Webpack 的区别

在前端开发中,构建工具是不可或缺的,Webpack 和 Vite 是当前最流行的选择之一。尽管它们的目标相似,但在实现方式和开发体验上却有显著差异。本文将探讨 Vite 和 Webpack 的主要区别,以便于根据项目需求选择合适的工具。 1. 构建…...

服务器ubuntu重装系统后将原来的用户进行关联

服务器ubuntu重装系统后将原来的用户数据进行关联 关联用户到已存在目录 sudo useradd user_name -m -s /bin/bash -d /home***/name添加sudo权限 vim /etc/sudoers# 文件末尾添加 user_name ALL(ALL:ALL) ALL更改拥有者 sudo chown -R user_name:user_name /home***/na…...

Python模块导入:import与from...import的深度解析

Python模块导入:import与from…import的深度解析 在Python编程中,模块的导入是组织和复用代码的关键环节。Python提供了import和from...import两种常见的模块导入方式,它们在使用方式、命名空间管理、可读性、内存使用等方面各有特点&#x…...

ROS2-humble中指定OpenCV版本进行开发

本地是Ubuntu22.04系统,安装了ROS2-humble,看了下humble自带的OpenCV版本4.5.4,由于DNN模块读取.onnx格式的模型要用OpenCV4.7及以上的版本,于是编译了4.10.0的OpenCV,但开发ROS2节点时,虽然CMake中已经指定…...

如何在 Ubuntu 22.04 上使用 vnStat 监控网络流量

简介 vnStat是一个免费的、开源的、基于控制台的Linux操作系统网络流量监控工具。通过vnStat,你可以在不同的时间段监控网络统计数据。它简单、轻量级,并且消耗的系统资源很小。vnStat允许你按小时、日、月、周和日生成网络流量数据。本教程将向你展示如…...

为什么要使用数据仓库?

现状和需求 大量的企业经营性数据(订单,库存,原料,付款等)在企业的业务运营系统以及其后台的(事务型)数据库中产生的。 企业的决策者需要及时地对这些数据进行归类分析,从中获得企业运营的各种业务特征&a…...

《宇宙机器人》提示错误弹窗“找不到d3dx9_43.dll”是什么原因?“d3dx9_43.dll缺失”怎么解决?

电脑游戏运行时常见问题解析:《宇宙机器人》提示“找不到d3dx9_43.dll”的解决之道 TGA2024落幕,年度最佳游戏——《宇宙机器人》,作为一名在软件开发领域深耕多年的从业者,我深知电脑游戏在运行过程中可能会遇到的各种挑战&…...

DAC数据手册中专有名词TERMINOLOGY 讲解

DAC数据手册中TERMINOLOGY专有名词 讲解 Relative Accuracy or Integral Nonlinearity (INL):相对精度 或 积分非线性LSB(Least Significant Bit):最小有效位 Differential Nonlinearity (DNL):差分非线性单调性DNL很重…...

Java中基于TCP的Socket编程

一、概述 Socket(套接字)是网络通信的一种机制,允许不同主机之间的进程进行通信。在Java中,Socket支持TCP(传输控制协议)和UDP(用户数据报协议)。 1、TCP协议介绍 TCP协议在通信之…...

详解二叉树

一、树的概念和结构 树是⼀种非线性的数据结构,它是由 n(n>0) 个有限结点组成⼀个具有层次关系的集合。把它叫做 树是因为它看起来像⼀棵倒挂的树,也就是说它是根朝上,而叶朝下的。 • 有⼀个特殊的结点&#xff0…...

Kafka Connect

根据您提供的错误信息和日志分析,这里是一些针对 Kafka Connect、协调者不可用、网络客户端连接问题、消费者组偏移量提交失败以及消费者组协调者发现问题的具体解决建议: 检查 Kafka 集群状态: 使用 kafka-broker-api-versions.sh 检查每个 …...

Mac charles报错 invalid keystore format

1.问题说明 打开charles会有一个 invalid keystore format的提示,更隐藏的影响,是安卓设备安装了凭证,但是charles仍然抓不到包,会展示unknow,即使是charles配置好了ssl proxy setting,并且mac信任了char…...

Leetcode 409. Longest Palindrome

Problem Given a string s which consists of lowercase or uppercase letters, return the length of the longest palindrome that can be built with those letters. Letters are case sensitive, for example, “Aa” is not considered a palindrome. Algorithm Count …...

事件代理详解

一、基本概念 事件代理(Event Delegation),也称为事件委托,是一种在 JavaScript 中处理事件的技术。它基于 DOM(文档对象模型)事件流的原理,利用事件冒泡机制,将一个元素&#xff0…...

代码随想录算法训练营第三天 | 链表理论基础 | 203.移除链表元素

感觉上是可以轻松完成的,因为对链接的结构,元素的删除过程心里明镜似的 实际上四处跑气 结构体的初始化好像完全忘掉了,用malloc折腾半天,忘记了用new,真想扇自己嘴巴子到飞起删除后写一个函数,把链表打印…...

专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。

考研落幕,本人本中游211,如愿以偿考入浙江大学,专业课842信号系统与数字电路140,总分410,和考前多次模考预期差距不大(建议大家平时做好定期模考测试,直接从实战分数中,找到复习的脉…...

Python-pptx库简介

目录 一、Python-pptx 库概述 二、安装 Python-pptx 库 三、创建演示文稿 四、添加文本内容 五、添加形状 六、添加图片 七、添加图表 八、保存演示文稿 九、示例演示文稿 十、总结 在Python编程中,处理演示文稿是一项常见的任务。Python-pptx库为我们提供…...

电子应用设计方案-52:智能电子相框系统方案设计

智能电子相框系统方案设计 一、引言 智能电子相框作为一种能够展示数字照片和多媒体内容的设备,为用户提供了便捷、个性化的照片展示方式。本方案旨在设计一款功能丰富、用户体验良好的智能电子相框系统。 二、系统概述 1. 系统目标 - 高质量显示照片和视频&#…...

mac 安装CosyVoice (cpu版本)

CosyVoice 介绍 CosyVoice 是阿里研发的一个tts大模型 官方项目地址:https://github.com/FunAudioLLM/CosyVoice.git 下载项目(非官方) git clone --recursive https://github.com/v3ucn/CosyVoice_for_MacOs.git 进入项目 cd CosyVoic…...

mysql命令行界面(黑框)的登录

文章目录 开启关闭服务报错登录mysql退出mysql数据据database在电脑中的存放位置删除数据库语句 drop注意 cmd用管理员打开 开启关闭服务 报错 我有这个报错,但是使用没什么影响 登录mysql root替换成自己的用户名 退出mysql exit 数据据database在电脑中的…...

Git 快速入门

Git 是什么? Git 是一个分布式版本控制系统四大区域: 工作区:项目文件的当前状态,即本地目录。暂存区:保存将要提交的文件快照,是一个中间层,使用git add将文件添加到暂存区。本地仓库&#xf…...

优先队列及其应用

优先队列 优先队列是一种特殊的队列数据结构,它的特点是每个元素都有一个优先级,出队操作按照优先级而不是入队顺序来决定。 当优先队列为从大到小排列时,队列元素的头部始终保持数值最大,并且可以通过队尾插入数据,…...

Python:基于PyCharm的简单程序创建及运行-HelloWorld

1. 新建项目 2. 设置文件位置,并创建项目 文件位置由“目录项目名称”组成,如:D:\PycharmProjects\HelloWorld,“HelloWorld”则是项目名称。 3. 创建Python文件 4. 定义文件名称,如HelloWorld。双击【Python 文件】完…...

MySQL笔记--多表查询

1--多表关系 多表关系基本上分为三种: 一对多(多对一); 多对多; 一对一; 1-1--多对一 在多的一方建立外键,指向一的一方的主键; 1-2--多对多 建立第三张中间表,中间表至少…...

CentOS Stream Linux操作系统最新版本安装部署

https://www.centos.org/ 如上所示,从CentOS Stream Linux操作系统官方网站下载最新版本的操作系统安装源文件。 如上所示,在VMware中设置CentOS Stream Linux操作系统的安装属性,包括设置运行内存容量、处理器核数、硬盘容量、网络连接模式…...

D95【python 接口自动化学习】- pytest进阶之fixture用法

day95 pytest的fixture详解(二) 学习日期:20241210 学习目标:pytest基础用法 -- pytest的fixture详解(二) 学习笔记: fixture(autouseTrue) func的autouse是TRUE时,所有函数方法…...

自动化立体仓库堆垛机SRM控制系统运行控制功能块开发设计

1、堆垛机SRM控制系统硬件组态如下图 G120变频器,通信报文111 2、堆垛机SRM控制系统HMI屏幕页面如下图 运行、起升、货叉相关参数设定 3、堆垛机SRM控制系统中相关变量定义如下图 行走报警 行走条码位置反馈 行走条码速度反馈 行走正极限 行走负极限 4、运行控制功能块代码…...

测试工程师的职业规划

测试人员在管理上的发展 基层测试管理者:测试组长 工作内容:安排小组工作,提升小组成员测试能力,负责重要的测试工作。 负责对象:版本,项目 中层测试管理者:测试经理 负责对象&#xff1…...

CSS:html中,.png的动态图,怎么只让它显示部分,比如只显示右上部分的,或右边中间部分

目录 背景 方法 1: 使用 background-image 和 background-position 示例代码 解释 方法 2: 使用 clip-path 裁剪图像 示例代码 解释 方法 3: 使用 object-fit 和 overflow 示例代码 解释 示例 总结 背景 在HTML中,如果你有一个 .png 的动态图(例如一个 GIF 动画或…...

Python音频处理:如何将立体声转换为单声道并调整采样率

Python音频处理:如何将立体声转换为单声道并调整采样率 问题背景解决方案1. 首先导入需要的库2. 将立体声转换为单声道3. 调整采样率4. 处理音频块 代码解释注意事项小贴士总结 大家好!今天我们来学习一个简单但实用的音频处理小技巧 - 如何使用Python将…...

go语言并发读写数据队列,不停写的同时,一次最多读取指定量数据(逐行注释)

1、数据队列可以存储任意类型的一个数据(下程序是添加整数值)。 数据队列代码点这里查看《go语言结构体实现数据结构队列(先进先出)存储数据(逐行注释)》 2、读写操作并发进行(下程序向队列中…...

2024 年最新前端ES-Module模块化、webpack打包工具详细教程(更新中)

模块化概述 什么是模块?模块是一个封装了特定功能的代码块,可以独立开发、测试和维护。模块通过导出(export)和导入(import)与其他模块通信,保持内部细节的封装。 前端 JavaScript 模块化是指…...

【深度学习】服务器常见命令

1、虚拟环境的安装位置 先进入虚拟环境 which python2、升序查看文件内容 ls -ltr3、查看服务器主机空间使用情况 df -hdf -h .4、查看本地空间使用情况 du -sh ./*du -sh * | sort -nr5、查找并删除进程 # 查找 ps aux# 删除 kill -KILL pid6、查看服务器配置 lscpuuna…...

C++小白实习日记——Pollnet,Efvi,UDP,数据类型转换(下)

内容太多了,这篇记录UDP接收端 一,UDP接收端接收数据 有了pollnet这个开源项目的支持,接收端的步骤为:1)初始化硬编码的参数:接口,IP和端口 2)创建接收文件.csv 3)读…...

pytorch bilstm crf的教程,注意 这里不支持批处理,要支持批处理 用torchcrf这个。

### Bi-LSTM Conditional Random Field ### pytorch tutorials https://pytorch.org/tutorials/beginner/nlp/advanced_tutorial.html ### 模型主要结构: ![title](sources/bilstm.png) pytorch bilstm crf的教程,注意 这里不支持批处理 Python version…...

C# OpenCV机器视觉:畸变矫正

在一个阳光明媚的早晨,阿强决定去拍照。他拿起相机,穿上他最喜欢的羊毛大衣,准备记录下生活中的美好瞬间。可是,当他兴奋地查看照片时,发现自己拍的每一张都像是被外星人用变形金刚的力量扭曲过一样!“这是…...

Java 密封类 (Sealed Classes) 深度解析

文章目录 语法说明定义密封类定义子类 使用场景探讨实际应用示例与其他语言特性的结合使用 Java 作为一种面向对象编程语言,提供了继承机制来实现代码复用和扩展。然而,无限制的继承可能导致代码库变得难以维护,甚至引入安全隐患。为了应对这…...

conda和pip源

conda 地址 ~/.condarc中科大源 channels:- conda-forge- https://mirrors.ustc.edu.cn/anaconda/pkgs/main/- https://mirrors.ustc.edu.cn/anaconda/pkgs/r/- https://mirrors.ustc.edu.cn/anaconda/pkgs/msys2/- defaults show_channel_urls: true查看 conda config --s…...

【c++数学】解一元一次方程

注意&#xff1a;没有合并多项式的功能&#xff0c;且未知数必须只在左边&#xff0c;右边是常数&#xff01;&#xff01;&#xff01; 好用记得点赞&#xff01; 代码如下&#xff1a; #include<iostream> #include<stdio.h>using namespace std;string q,f;d…...

【超详细实战攻略】Jmeter逻辑控制器中if控制器、模块控制器、测试片段的使用方法

【超详细实战攻略】Jmeter逻辑控制器中if控制器、模块控制器、测试片段的使用方法 1 搭建测试对象1.1 禅道下载1.2 禅道安装1.3 运行禅道1.4 接口查看1.5 接口选择 2 Jmeter前置操作2.1 创建Jmeter线程组2.2 创建信息头管理器和请求默认值2.3 添加获取token接口2.4 添加监听器 …...

采用qL-MPC技术进行小型固定翼无人机的路径跟随控制

来自论文"Predictive Path-Following Control for Fixed-Wing UAVs Using the qLMPC Framework in the Presence of Wind Disturbances" 控制架构 采用的是 ULTRA-Extra无人机&#xff0c;相关参数如下&#xff1a; 这里用于guidance law的无人机运动学模型为&#…...

比特币是否会取代美元(以及其他主权货币)

上图是 Olivier Blanchard 宏观经济学第八版的英文版内容。这里用中文解释。 1. 背景与现状&#xff1a; 比特币的规模与美元相比仍然很小&#xff1a; 截至 2018 年 12 月&#xff0c;比特币的总流通量为 1730 万枚&#xff0c;每枚价值 $3,900&#xff0c;总市值约 $670 亿…...

safe area helper插件

概述 显示不同机型的必能显示的区域 实现步骤 引入safearea&#xff0c;引入其中的safearea的csharp 为cancas加入gameobject gameobject中加入safearea脚本 将UI作为这个gameobject的子物体&#xff0c;就可以完成显示...

融云分享基于 Rust 的鸿蒙 SDK 开发实践

12 月 5 日&#xff0c;以“同心聚力&#xff0c;共建共享鸿蒙新生态”为主题的“鸿蒙生态伙伴 SDK 开发者论坛”在京举行。 融云凭借对鸿蒙生态的率先适配和创新贡献&#xff0c;荣获华为鸿蒙生态“HarmonyOS NEXT SDK 星河奖”。 本次论坛邀请了多位行业领导者参与&#xff…...

golang中的值传递与引用传递,如何理解结构体的方法?

先从一个例子说起 type Counter struct {count int }func (c Counter) Inc() {c.count }func test1() {c : Counter{}do : func() {for i : 0; i < 10; i {c.count}fmt.Println("done")}go do()go do()time.Sleep(3 * time.Second)fmt.Println(c.count) }func te…...

TON游戏现状一览:区块链与Telegram的完美融合

TON&#xff08;The Open Network&#xff09;作为一款基于区块链的开放平台&#xff0c;因其超高的交易处理速度和与Telegram的紧密集成&#xff0c;成为游戏开发者和用户的新兴乐土。TON不仅仅是一个去中心化的网络&#xff0c;它还通过其核心加密货币——Toncoin&#xff0c…...

《变分法·吴迪光1987年》复习汇总

目录 第一章 变分法的概念1 泛函和泛函的极值例1 捷线&#xff08;最速降线&#xff09;问题例2 等周问题例3 极小曲面问题极值必要条件 2 基本引理&#xff08;考反证法&#xff09;基本引理1基本引理2 第二章 固定边界的变分问题 ♠ \spadesuit ♠ 欧拉方程&#xff08;一&am…...

使用IP自签名SSL证书

最近需要创建WebSocket服务器并使用SSL证书&#xff0c;由于是内网测试&#xff0c;所以需要使用指定IP的自签SSL证书。 其实笔者前面博文 使用nexus3作为Docker镜像仓库 解决nexus3登录x509: certificate has expired or is not yet valid 中有创建过相应的证书&#xff0c;这…...

如何持续优化呼叫中心大模型呼出机器人的性能?

如何持续优化呼叫中心大模型呼出机器人的性能&#xff1f; 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 持续优化呼叫中心大模型呼出机器人的性能是一个复杂而持续的过程&#xff0c;涉及多个层面的策略和措…...