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

前端-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 模块允许你自由…...

EtherCAT主站IGH-- 21 -- IGH之fsm_reboot.h/c文件解析

EtherCAT主站IGH-- 21 -- IGH之fsm_reboot.h/c文件解析 0 预览一 该文件功能`fsm_reboot.c` 文件功能函数预览二 函数功能介绍`fsm_reboot.c` 中主要函数的作用1. `ec_fsm_reboot_init`2. `ec_fsm_reboot_clear`3. `ec_fsm_reboot_single`4. `ec_fsm_reboot_all`5. `ec_fsm_reb…...

【NLP251】NLP RNN 系列网络

NLP251 系列主要记录从NLP基础网络结构到知识图谱的学习 1.原理及网络结构 1.1RNN 在Yoshua Bengio论文中( http://proceedings.mlr.press/v28/pascanu13.pdf )证明了梯度求导的一部分环节是一个指数模型…...

数据分析系列--④RapidMiner进行关联分析(案例)

一、核心概念 1.1项集(Itemset) 1.2规则(Rule) 1.3支持度(Support) 1.3.1 支持度的定义 1.3.2 支持度的意义 1.3.3 支持度的应用 1.3.4 支持度的示例 1.3.5 支持度的调整 1.3.6 支持度与其他指标的…...

深度学习:基于MindNLP的RAG应用开发

什么是RAG? RAG(Retrieval-Augmented Generation,检索增强生成) 是一种结合检索(Retrieval)和生成(Generation)的技术,旨在提升大语言模型(LLM)生…...

Hive安装教程

Hive安装教程 文章目录 Hive安装教程写在前面安装下载安装部署安装Hive启动并使用Hive MySQL安装检查当前系统是否安装过MySQL安装初始化数据库 Hive元数据配置到MySQL拷贝驱动配置Metastore到MySQL再次启动Hive 写在前面 Linux版本:CentOS7.5Hive版本:…...

安卓逆向之脱壳-认识一下动态加载 双亲委派(二)

一:动态加载与双亲委派模型 在 Java 和 Android 中,ClassLoader 是一个非常重要的组件,负责将 .class 文件或 .dex 文件的字节码加载到内存中,供程序使用。在这其中,有两种关键的概念需要深入理解:动态加载…...

全程Kali linux---CTFshow misc入门(14-24)

第十四题: dd命令:dd是一个用于复制和转换数据的命令,它可以对文件、设备等进行操作,在数据备份、转换格式等场景经常使用。 ifmisc14.jpg:if表示 “input file”(输入文件),这里指…...

学习数据结构(3)顺序表

1.动态顺序表的实现 (1)初始化 (2)扩容 (3)头部插入 (4)尾部插入 (5)头部删除 (这里注意要保证有效数据个数不为0) (6&a…...

知识体系、知识管理角度的赚钱思考

从知识管理和知识体系的角度出发,赚钱的问题思考清单可以帮助你系统地梳理和优化自己在财富创造方面的策略。 以下是一个详细的清单,涵盖从知识获取、技能提升到实际应用的各个环节,帮助你在赚钱的道路上更加高效和有条理。 一、赚钱的目标与…...

(done) ABI 相关知识补充:内核线程切换、用户线程切换、用户内核切换需要保存哪些寄存器?

由于操作系统和编译器约定了 ABI,如下: 编译器在对 C 语言编译时,会自动 caller 标注的寄存器进行保存恢复。保存的步骤通常发生在进入函数的时候,恢复的步骤通常发生在从函数返回的时候。 内核线程切换需要保存的寄存器&#…...

QT6 + CMAKE编译OPENCV3.9

参考文档 [1] https://blog.csdn.net/rjkf_css/article/details/135676077 前提条件 配置好相关运行环境:QT6、OPENCV3.9的sources文件 OPENCV下载网页:https://opencv.org/releases/ QT6下载教程:https://blog.csdn.net/caoshangpa/article…...

Linux 常用命令——系统设置篇(保姆级说明)

系统设置类 显示当前运行的进程(ps) ps [options] [--help]# 查找指定进程格式: ps -ef | grep 进程关键字# 显示进程信息 ps -A 参数: -A 列出所有的进程 -w 显示加宽可以显示较多的资讯 -au 显示较详细的资讯 -aux 显示所有包…...

完美世界前端面试题及参考答案

如何设置事件捕获和事件冒泡? 在 JavaScript 中,可以通过addEventListener方法来设置事件捕获和事件冒泡。该方法接收三个参数,第一个参数是事件类型,如click、mousedown等;第二个参数是事件处理函数;第三个参数是一个布尔值,用于指定是否使用事件捕获机制。当这个布尔值…...

Vue3笔记——(三)hooks、路由

015 hooks 作用&#xff1a;使得代码更加模块化和可维护 Person.vue <template><div><h2>当前求和{{ sum }}</h2><button click"addFn">点我sum1</button></div> </template> <script setup lang"ts"…...

网络安全大模型和人工智能场景及应用理解

本文通过通俗易懂的方式的进行阐述&#xff0c;大家读完觉得有帮助记得及时关注和点赞&#xff01;&#xff01;&#xff01; 一、网络安全大模型的概述 网络安全大模型是一种用于识别和应对各种网络安全威胁的模型。它通过分析网络数据包、网络行为等信息&#xff0c;识别潜在…...

python-leetcode-从中序与后序遍历序列构造二叉树

106. 从中序与后序遍历序列构造二叉树 - 力扣&#xff08;LeetCode&#xff09; # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right r…...

NLP模型大对比:Transformer > RNN > n-gram

结论 Transformer 大于 RNN 大于 传统的n-gram n-gram VS Transformer 我们可以用一个 图书馆查询 的类比来解释它们的差异&#xff1a; 一、核心差异对比 维度n-gram 模型Transformer工作方式固定窗口的"近视观察员"全局关联的"侦探"依赖距离只能看前…...

MySQL查询优化(三):深度解读 MySQL客户端和服务端协议

如果需要从 MySQL 服务端获得很高的性能&#xff0c;最佳的方式就是花时间研究 MySQL 优化和执行查询的机制。一旦理解了这些&#xff0c;大部分的查询优化是有据可循的&#xff0c;从而使得整个查询优化的过程更有逻辑性。下图展示了 MySQL 执行查询的过程&#xff1a; 客户端…...

[STM32 - 野火] - - - 固件库学习笔记 - - -十三.高级定时器

一、高级定时器简介 高级定时器的简介在前面一章已经介绍过&#xff0c;可以点击下面链接了解&#xff0c;在这里进行一些补充。 [STM32 - 野火] - - - 固件库学习笔记 - - -十二.基本定时器 1.1 功能简介 1、高级定时器可以向上/向下/两边计数&#xff0c;还独有一个重复计…...

Antd React Form使用Radio嵌套多个Select和Input的处理

使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理&#xff0c;需要多层嵌套和处理默认事件和冒泡&#xff0c;具体实现过程直接上代码。 实现效果布局如下图 代码 <Formname"basic"form{form}labelWrap{...formItemLayoutSpan(5, 19)}onFinish{on…...

固有频率与模态分析

目录 引言 1. 固有频率&#xff1a;物体的“天生节奏” 1.1 定义 1.2 关键特点 1.3 实际意义 2. 有限元中的模态分析&#xff1a;给结构“体检振动” 2.1 模态分析的意义 2.2 实际案例 2.2.1 桥梁模态分析 2.2.2 飞机机翼模态分析 2.2.3 具体事例 3. 模态分析的工具…...

视频多模态模型——视频版ViT

大家好&#xff0c;这里是好评笔记&#xff0c;公主号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本文详细解读多模态论文《ViViT: A Video Vision Transformer》&#xff0c;2021由google 提出用于视频处理的视觉 Transformer 模型&#xff0c;在视频多模态领域有…...

2859.计算K置位下标对应元素的和

示例 1&#xff1a;输入&#xff1a;nums [5,10,1,5,2], k 1 输出&#xff1a;13 解释&#xff1a;下标的二进制表示是&#xff1a; 0 0002 1 0012 2 0102 3 0112 4 1002 下标 1、2 和 4 在其二进制表示中都存在 k 1 个置位。 因此&#xff0c;答案为 nums[1] nums[…...

Redis 教程

REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。 Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 它通常被称为数据结构服务器&…...

2024 CVPR Highlight Learning-Feedback

图像增强 Towards Robust Event-guided Low-Light Image Enhancement: A Large-Scale Real-World Event-Image Dataset and Novel Approach 解决的主要问题是低光照条件下的图像增强 通过多尺度整体融合分支提取事件和图像的结构和纹理信息&#xff0c;并引入信噪比&#xff0…...

maven、npm、pip、yum官方镜像修改文档

文章目录 Maven阿里云网易华为腾讯云 Npm淘宝腾讯云 pip清华源阿里中科大华科 Yum 由于各博客繁杂&#xff0c;本文旨在记录各常见镜像官网&#xff0c;及其配置文档。常用镜像及配置可评论后加入 Maven 阿里云 官方文档 setting.xml <mirror><id>aliyunmaven&l…...

UE求职Demo开发日志#15 思路与任务梳理、找需要的资源

1 思路梳理 因为有点无从下手&#xff0c;就梳理下最终形态. 基地的建设我是想单独一个场景&#xff0c;同一个关卡中小怪会每次来都会刷&#xff0c;小解密一次性的&#xff0c;关键的Boss和精英怪不会重复刷&#xff0c;同时场景里放一些资源可收集&#xff0c;基地建设锁定区…...

设置jmeter外观颜色

设置jmeter外观颜色 方法&#xff1a; 步骤一、点击顶部选项 ->外观&#xff0c;这里提供了不同的主题&#xff0c;可选自己喜欢的风格。 步骤二、选择后&#xff0c;弹框提示点击Yes。...

《一文读懂!Q-learning状态-动作值函数的直观理解》

在人工智能的强化学习领域&#xff0c;Q-learning算法是一颗耀眼的明星&#xff0c;被广泛应用于机器人控制、游戏AI开发、自动驾驶等诸多前沿领域。而想要真正掌握Q-learning算法&#xff0c;理解其核心概念——状态 - 动作值函数&#xff0c;是绕不开的关键一步。这篇文章就带…...

Angular 2 表单深度解析

Angular 2 表单深度解析 引言 Angular 2作为现代前端开发的框架之一,以其灵活性和强大的功能赢得了众多开发者的青睐。在Angular 2中,表单处理是其中一个重要且复杂的部分。本文将深入解析Angular 2的表单,从基础知识到高级应用,旨在帮助开发者更好地理解和运用Angular 2…...

使用kitty terminal遇到的‘xterm-kitty‘: unknown terminal type.

解决办法 方式一 export TERMxterm-256color使永久生效 echo export TERMxterm-256color >> ~/.zshrc # 如果用 zsh&#xff0c;如果使用的是bash就修改为bashrc source ~/.zshrc #同理如果是ssh下遇到该问题&#xff0c;参考 https://sw.kovidgoyal.net/kitty/faq/…...

Dest1ny漏洞库:用友 U8 Cloud ReleaseRepMngAction SQL 注入漏洞(CNVD-2024-33023)

大家好&#xff0c;今天是Dest1ny漏洞库的专题&#xff01;&#xff01; 会时不时发送新的漏洞资讯&#xff01;&#xff01; 大家多多关注&#xff0c;多多点赞&#xff01;&#xff01;&#xff01; 0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP&#xff0c;主要聚…...

代码随想录|动态规划 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组

300.最长递增子序列 题目 参考文章 思路&#xff1a;dp[i]表示i之前包括i的以nums[i]结尾的最长递增子序列的长度 因为没有连续&#xff0c;所以每一个元素都要比较&#xff0c;从而得到结果 两个递增子序列一定分别以nums[j]为结尾 和 nums[i]为结尾&#xff0c; 要不然这个比…...

Flutter_学习记录_导航和其他

Flutter 的导航页面跳转&#xff0c;是通过组件Navigator 和 组件MaterialPageRoute来实现的&#xff0c;Navigator提供了很多个方法&#xff0c;但是目前&#xff0c;我只记录我学习过程中接触到的方法&#xff1a; Navigator.push(), 跳转下一个页面Navigator.pop(), 返回上一…...

【信息系统项目管理师-选择真题】2006下半年综合知识答案和详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第…...

面向对象编程简史

注&#xff1a;本文为 “面向对象编程简史” 相关文章合辑。 英文引文&#xff0c;机翻未校。 Brief history of Object-Oriented Programming 面向对象编程简史 Tue, May 14, 2024 Throughout its history, object-oriented programming (OOP) has undergone significant …...

快速提升网站收录:内容创作的艺术

本文来自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/15.html 快速提升网站收录&#xff0c;内容创作是关键。以下是一些关于内容创作以提升网站收录的艺术性建议&#xff1a; 一、关键词研究与优化 选择长尾关键词&#xff1a;进行深入的关键…...

高速PCB设计指南3——PCB 传输线和受控阻抗

高速PCB设计指南3——PCB 传输线和受控阻抗 1. 传输线1.1 传输线的定义1.2 传输线的分类1.3 互为传输线的情况 2. 均匀传输线的特性阻抗3. PCB中受控阻抗结构3.1 微带线&#xff08;Microstrip&#xff09;3.2 带状线&#xff08;Stripline&#xff09; 4 阻抗控制方法5. 阻抗控…...

python实现一个完整的智能教室能耗监测与管理系统的实现方案

以下是一个完整的智能教室能耗监测与管理系统的实现方案&#xff0c;主要使用Python语言&#xff0c;涵盖深度学习模型研发、教室场景适应性分析、系统架构设计、前端展示、后端服务以及测试评估等方面。 1. 数据准备 首先&#xff0c;需要收集教室的照片数据集&#xff0c;并…...

【新春特辑】2025年春节技术展望:蛇年里的科技创新与趋势预测

&#x1f525;【新春特辑】2025年春节技术展望&#xff1a;蛇年里的科技创新与趋势预测 &#x1f4c5; 发布日期&#xff1a;2025年01月29日&#xff08;大年初一&#xff09; 在这个辞旧迎新的美好时刻&#xff0c;我们迎来了充满希望的2025年&#xff0c;也是十二生肖中的蛇…...

woocommerce独立站与wordpress独立站的最大区别是什么

WooCommerce独立站与WordPress独立站的最大区别在于它们的功能定位和使用场景。 WordPress是一个开源的内容管理系统(CMS)&#xff0c;最初是作为博客平台发展起来的&#xff0c;但现在已经演变为一个功能丰富的网站构建工具。它主要用于创建动态网站&#xff0c;提供广泛的定…...

docker安装MySQL8:docker离线安装MySQL、docker在线安装MySQL、MySQL镜像下载、MySQL配置、MySQL命令

一、镜像下载 1、在线下载 在一台能连外网的linux上执行docker镜像拉取命令 docker pull mysql:8.0.41 2、离线包下载 两种方式&#xff1a; 方式一&#xff1a; -&#xff09;在一台能连外网的linux上安装docker执行第一步的命令下载镜像 -&#xff09;导出 # 导出镜…...

PTA乙级1006~1010【c++】

1006 换个格式输出整数 #include <iostream> using namespace std;int main(){int n;cin >> n;int b n / 100;int s n / 10 % 10;int g n % 10;for (int i 0; i < b; i ) cout << B;for (int i 0; i < s; i ) cout << S;for (int i 0; …...

一文掌握ADB的安装及使用

文章目录 一、什么是ADB&#xff1f;二、 安装ADB2.1 下载ADB2.2 配置环境变量 三、连接Android设备四、 常用ADB命令五、ADB高级功能5.1 屏幕截图和录制5.2 模拟按键输入5.3 文件管理5.4 系统设置管理5.5 系统操作指令5.6 日志操作指令5.7 APK操作指令5.8 设备重启和恢复 六、…...

ThinkPad E480安装Ubuntu 18.04无线网卡驱动

个人博客地址&#xff1a;ThinkPad E480安装Ubuntu 18.04无线网卡驱动 | 一张假钞的真实世界 遗憾的是虽然下面的方法可以解决&#xff0c;但是内核升级后需要重新安装。 基本信息 Ubuntu 18.04ThinkPad E480使用下面的命令查看 Linux 内核&#xff1a; $ uname -r 5.0.0-3…...

QT+mysql+python 效果:

# This Python file uses the following encoding: utf-8 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QMessageBox from PySide6.QtGui import QStandardItemModel, QStandardItem # 导入需要的类# Important: # 你需要通过以下指令把 form.ui转为ui…...

关于 SR-IOV 架构论文的总结文章

关于 SR-IOV 架构论文的总结文章 在计算机虚拟化技术不断发展的进程中,SR - IOV 架构凭借其在提升 I/O 性能、优化资源利用等方面的优势,成为众多研究关注的焦点。通过对 4 篇相关论文的研读,我们可以从多个维度深入了解 SR - IOV 架构的核心要点。 一、SR - IOV 架构的原…...

MyBatis最佳实践:提升数据库交互效率的秘密武器

第一章&#xff1a;框架的概述&#xff1a; MyBatis 框架的概述&#xff1a; MyBatis 是一个优秀的基于 Java 的持久框架&#xff0c;内部对 JDBC 做了封装&#xff0c;使开发者只需要关注 SQL 语句&#xff0c;而不关注 JDBC 的代码&#xff0c;使开发变得更加的简单MyBatis 通…...

cursor ide配置远程ssh qt c++开发环境过程记录

cursor是啥就不介绍了&#xff0c;好像是目前最好用的ai ide&#xff0c;下面主要是配置远程ssh连接linux机器进行qt5 c程序运行的配置过程记录。 一、c_cpp_properties.json 在项目根目录的.vscode目录里面新建c_cpp_properties.json文件&#xff0c;根据你的实际情况配置该文…...