前端-Rollup
Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式,而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持,但 Rollup 让你今天就可以开始这样做。
除屑优化(Tree-Shaking)
除了可以使用 ES 模块之外,Rollup 还可以静态分析你导入的代码,并将排除任何实际上没有使用的内容。这使你可以在现有的工具和模块的基础上构建,而不需要添加额外的依赖项或使项目的大小变得臃肿。
例如,使用 CommonJS 必须导入整个工具或库。
// 使用 CommonJS 导入整个 utils 对象
const utils = require('./utils');
const query = 'Rollup';
// 使用 utils 对象的 ajax 方法。
utils.ajax(`https://api.example.com?search=${query}`).then(handleResponse);
使用 ES 模块,我们不需要导入整个 utils 对象,而只需导入我们需要的一个 ajax 函数:
// 使用 ES6 的 import 语句导入 ajax 函数。
import { ajax } from './utils';
const query = 'Rollup';
// 调用 ajax 函数
ajax(`https://api.example.com?search=${query}`).then(handleResponse);
一.安装
//全局安装
npm install rollup --global
//安装到本地
npm install rollup --save-dev
二.基本使用
1.基础要点:
配置需要一个入口文件并且设置代码输出格式

格式选项:



2.快速上手
创建入口文件:

打包:

三.配置文件
随着我们添加更多选项,输入命令会变得有点麻烦。
为了避免重复输入,我们可以创建一个包含所有必要选项的配置文件。配置文件是用 JavaScript 编写的,比原始的 CLI 更加灵活。
在项目根目录中创建一个名为 rollup.config.mjs 的文件
export default {
input: 'src/index.js',
output: {
file: 'bundle.js',
format: 'iife'
}
};
使用配置文件
rm bundle.js # so we can check the command works!
rollup -c //表明我们需要使用配置文件

可以使用等效的命令行选项覆盖配置文件中的任何选项:
rollup -c -o bundle-2.js
如果你想,你也可以选择指定不同于默认的 rollup.config.mjs 的配置文件:
rollup --config rollup.config.dev.mjs
四.使用插件
到目前为止,我们已经用入口文件和通过相对路径导入的模块打了一个简单的包。随着你需要打包更复杂的代码,通常需要更灵活的配置,例如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。
插件是rollup的唯一扩展方式
插件列表:Rollup Awesome List
1.@rollup/plugin-json
@rollup/plugin-json:允许 Rollup 从 JSON 文件中导入数据。
npm install --save-dev @rollup/plugin-json
(我们使用 --save-dev 而不是 --save,因为我们的代码在运行时实际上不依赖于插件,只有在打包时才需要。)

2.@rollup/plugin-node-resolve
@rollup/plugin-node-resolve:抹平rollup根据本地路径加载模块,不像webpack根据模块名称导入的差异。(一个 Rollup 插件,它使用 Node 解析算法来定位模块,用于在node_modules)

npm install @rollup/plugin-node-resolve --save-dev
例如引入lodash-es

3.@rollup/plugin-commonjs
@rollup/plugin-commonjs:由于rollup设计只处理ES模块,对于CommonJS 模块默认是不支持的,我们需要利用插件处理。(一个 Rollup 插件,用于将 CommonJS 模块转换为 ES6,以便它们可以包含在 Rollup bundle 中。)

npm install @rollup/plugin-commonjs --save-dev

五.代码拆分
Rollup 将使用动态导入创建一个仅在需要时加载的单独块。为了让 Rollup 知道在哪里放置第二个块,我们不使用 --file 选项,而是使用 --dir 选项设置一个输出文件夹:
修改配置文件:


总结
rollup优点:

缺点:

应用程序:webpack 库/框架:rollup
相关文章:
前端-Rollup
Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式,而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由…...
20【变量的深度理解】
一说起变量,懂点编程的都知道,但是在理解上可能还不够深 变量就是存储空间,电脑上的存储空间有永久(硬盘)和临时(内存条)两种,永久数据重启电脑后依旧存在,临时数据只…...
大数据学习之Kafka消息队列、Spark分布式计算框架一
Kafka消息队列 章节一.kafka入门 4.kafka入门_消息队列两种模式 5.kafka入门_架构相关名词 Kafka 入门 _ 架构相关名词 事件 记录了世界或您的业务中 “ 发生了某事 ” 的事实。在文档中 也称为记录或消息。当您向 Kafka 读取或写入数据时,您以事件的 形式执行…...
基于Flask的旅游系统的设计与实现
【Flask】基于Flask的旅游系统的设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统采用Python作为后端开发语言,结合前端Bootstrap框架,为用户提供了丰富…...
“AI视频智能分析系统:让每一帧视频都充满智慧
嘿,大家好!今天咱们来聊聊一个特别厉害的东西——AI视频智能分析系统。想象一下,如果你有一个超级聪明的“视频助手”,它不仅能自动识别视频中的各种元素,还能根据内容生成详细的分析报告,是不是感觉特别酷…...
算法随笔_31:移动零
上一篇:算法随笔_30: 去除重复字母-CSDN博客 题目描述如下: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,…...
改进候鸟优化算法之二:基于混沌映射的候鸟优化算法(MBO-CM)
基于混沌映射的候鸟优化算法(Migrating Birds Optimization based on Chaotic Mapping,MBO-CM)是一种结合了混沌映射与候鸟优化算法(Migrating Birds Optimization,MBO)的优化方法。 一、候鸟优化算法(MBO)简介 候鸟优化算法是一种自然启发的元启发式算法,由Duman等人…...
在Docker 容器中安装 Oracle 19c
在 Docker 容器中安装 Oracle 19c 是可行的,但它相较于其他数据库(如 MySQL、PostgreSQL 等)会复杂一些,因为 Oracle 数据库有一些特定的要求,如操作系统和库的依赖,以及许可证问题。 不过,Ora…...
使用Avalonia UI实现DataGrid
1.Avalonia中的DataGrid的使用 DataGrid 是客户端 UI 中一个非常重要的控件。在 Avalonia 中,DataGrid 是一个独立的包 Avalonia.Controls.DataGrid,因此需要单独通过 NuGet 安装。接下来,将介绍如何安装和使用 DataGrid 控件。 2.安装 Dat…...
MySQL中的读锁与写锁:概念与作用深度剖析
MySQL中的读锁与写锁:概念与作用深度剖析 在MySQL数据库的并发控制机制中,读锁和写锁起着至关重要的作用。它们是确保数据在多用户环境下能够正确、安全地被访问和修改的关键工具。 一、读锁(共享锁)概念 读锁,也称为…...
Dest1ny漏洞库:用友 U8 Cloud ReleaseRepMngAction SQL 注入漏洞(CNVD-2024-33023)
大家好,今天是Dest1ny漏洞库的专题!! 会时不时发送新的漏洞资讯!! 大家多多关注,多多点赞!!! 0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP,主要聚…...
python学opencv|读取图像(四十九)原理探究:使用cv2.bitwise()系列函数实现图像按位运算
【0】基础定义 按位与运算:两个等长度二进制数上下对齐,全1取1,其余取0。 按位或运算:两个等长度二进制数上下对齐,有1取1,其余取0。 按位异或运算: 两个等长度二进制数上下对齐,相…...
【面试】【编程范式总结】面向对象编程(OOP)、函数式编程(FP)和响应式编程(RP)
一、编程范式总结 编程范式是指开发软件时采用的一种方法论或思维方式,主要包括面向对象编程(OOP)、**函数式编程(FP)和响应式编程(RP)**等。这些范式的不同特性和适用场景,帮助开发…...
创建要素图层和表视图
操作方法: 下面按照步骤学习如何使用Make Feature Layer和Make Table View工具 1.在arcmap中打开活动地图文档 2.导入arcpy模块 3.设置工作空间 arcpy.env.workspace "<>" 4.使用try语句,使用Make Feature Layer工具创建内存副本 try:flayer arcpy.Ma…...
51单片机入门_01_单片机(MCU)概述(使用STC89C52芯片;使用到的硬件及课程安排)
文章目录 1. 什么是单片机1.1 微型计算机的组成1.2 微型计算机的应用形态1.3 单板微型计算机1.4 单片机(MCU)1.4.1 单片机内部结构1.4.2 单片机应用系统的组成 1.5 80C51单片机系列1.5.1 STC公司的51单片机1.5.1 STC公司单片机的命名规则 2. 单片机的特点及应用领域2.1 单片机的…...
万物皆有联系:驼鸟和布什
布什?一块布十块钱吗?不是,大家都知道,美国有两个总统,叫老布什和小布什,因为两个布什总统(父子俩),大家就这么叫来着,目的是为了好区分。 布什总统的布什&a…...
【最后203篇系列】007 使用APS搭建本地定时任务
说明 最大的好处是方便。 其实所有任务的源头,应该都是通过定时的方式,在每个时隙发起轮询。当然在任务的后续传递中,可以通过CallBack或者WebHook的方式,以事件的形态进行。这样可以避免长任务执行的过程中进行等待和轮询。 总结…...
go gin配置air
一、依赖下载 安装最新,且在你工作区下进行安装,我的是D:/GO是我的工作区,所有项目都在目录下的src, go install github.com/air-verse/airlatest 如果出现类似报错: 将图中第三行 github.com/air-verse/air 替换最…...
Java定时任务实现方案(五)——时间轮
时间轮 这篇笔记,我们要来介绍实现Java定时任务的第五个方案,使用时间轮,以及该方案的优点和缺点。 时间轮是一种高效的定时任务调度算法,特别适用于大量定时任务的场景。时间轮的定时任务实现,可以使用DelayQueue…...
【事务管理】
目录 一. 介绍与操作二. Spring事务管理三. 事务四大特性 \quad 一. 介绍与操作 \quad \quad 二. Spring事务管理 \quad 推荐加在经常进行增删改的方法上 \quad 三. 事务四大特性 \quad ctrlaltt...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
