深入 Rollup:从入门到精通(三)Rollup CLI命令行实战
准备阶段:初始化项目
- 初始化项目,这里使用的是pnpm,也可以使用yarn或者npm
# npm
npm init -y
# yarn
yarn init -y
# pnpm
pnpm init
- 安装rollup
# npm
npm install rollup -D
# yarn
yarn add rollup -D
# pnpm
pnpm install rollup -D
- 在根目录下新建main.js
import { add } from './src/math.js';let result = add(1, 2)console.log(result);
- 新建src/math.js
export function add(a, b) {return a + b;
}export function sub(a, b) {return a - b;
}
- 项目初始化完成,现在项目的结构应该和我这个一样。
1. rollup -h
-
作用
rollup -h
查看CLI命令提示,也可以直接省略为rollup
。 -
动手试一下
# 方法一
npx rollup
# 方法二
npx rollup -h
# 方法三
npx rollup --help
2. rollup -v
-
作用
查看安装的rollup版本号。
D:\projects\rollup-cli-example>npx rollup -v
rollup v4.32.0
- 动手试一下
npx rollup -v
3. rollup -c
-
作用
手动指定构建时的配置文件
-
rollup -c
默认使用
根目录
下的rollup.config.js
,如果没有该文件(文件名称必须为rollup.config.js),则会报错 -
rollup -c [配置文件名称]
使用指定的配置文件,例如
rollup -c rollup.config.dev.js
,如果没有该文件,则会报错 -
动手试一下
查看dist/bundle.js,可以看到生成的bundle.js文件是main.js和src/math.js合并后的文件,并且生成的代码没有sub()函数,是因为tree shaking过滤掉了
// 1.main.js
import { add } from './src/math.js';let result = add(1, 2)
console.log(result);// 2.src/math.js
export function add(a, b) {return a + b;
}export function sub(a, b) {return a - b;
}// 3. 配置文件 rollup.config.js
export default {input: "main.js",output: {file: "dist/bundle.js"}
}
# 2. 使用 CLI命令 进行打包
npx rollup -c
4. rollup -i [入口文件]
-
作用
指定构建时的入口文件。
-
动手试一下
rollup -i main.js
指定main.js
为构建的入口文件,控制台输出结果为构建后的结果,可以看到,rollup将main.js
和src/math.js
的内容合并在一起了。注:如果没有 -o 指定输出文件,则构建的结果直接输出在控制台,而不是文件中
D:\projects\mini-vite\examples\rollup-cli-example>npx rollup -i main.js main.js → stdout...
function add(a, b) {return a + b;
}let result = add(1, 2);console.log(result);
5. rollup -f [cjs|esm|umd|…]
-
作用
格式化输出构建的文件内容。
-
动手试一下
rollup -i main.js -f umd # 输出格式为umd
rollup -i main.js -f esm # 输出格式为esm
rollup -i main.js -f cjs # 输出格式为commonjs
6. rollup -o [输出文件]
-
作用
指定输出文件。
-
动手试一下
rollup -i main.js -o dist/bundle.js # 入口文件:main.js 输出文件 dist/bundle.js
7. rollup -d [输出目录]
-
作用
指定输出文件的路径,输出文件默认为入口文件名。
-
动手试一下
rollup -i main.js -d dist # 入口文件:main.js 输出目录 dist
8. rollup -e [外部依赖]
-
作用
./src/math.js
被当作外部依赖,打包bundle.js时,math.js的内容不会打包进bundle.js,而是保留import。 -
适用场景
适用于引入一个第三方的库,且该库通过cdn的方式引入(在浏览器中),而不直接打入项目中,例如lodash。
-
动手试一下
可以看到,和上面不同的时,add函数并没有打包进bundle.js文件,而是被当作外部依赖,保留了引入的操作。
npx rollup -i main.js -f esm -e ./src/math.js -o dist/bundle.js
9. rollup -m [inline]
- 作用
--sourcemap
是 Rollup CLI 中的一个选项,用于生成源映射文件。源映射文件(.map 文件)可以帮助开发人员在调试过程中查看原始源代码,而不是编译后的代码。
当你构建项目并开启了 --sourcemap
选项,Rollup 会生成一个 .map
文件,这个文件包含了源代码和编译后的代码之间的映射关系。这样,即使你在浏览器中调试的是压缩或转换后的代码,开发者工具仍然能够显示原始的源代码,这样调试起来更容易。
- 动手试一下
# 用法一
rollup -m
rollup --sourcemap # 生成独立的 .map 文件,方便调试压缩/转译后的代码。# 用法二 inline
rollup -m inline
rollup --sourcemap inline # 将 Source Map 内联到输出文件中,适合小型项目。# 用法三 hidden
rollup -m hidden
rollup --sourcemap hidden # 生成 .map 文件但不添加引用注释,适合生产环境。
-
为什么使用
--sourcemap
:- 调试方便:如果没有源映射,压缩后的代码难以理解和调试。开启源映射后,浏览器的开发者工具可以展示原始代码和调试信息。
- 错误追踪:通过源映射,可以准确地定位到源代码中的错误行,避免混淆和丢失调试信息。
-
生成的文件:
-
如果启用了
--sourcemap
,Rollup 会生成一个.map
文件,通常是与输出的.js
文件同名,只是扩展名是.js.map
。 -
例如,如果输出文件是
dist/bundle.js
,源映射文件将是dist/bundle.js.map
。
-
10. rollup -w
- 作用
通过watch的方式构建项目,当入口文件发生变化时,会自动重新构建。在开发library的时候,这个选项比较有用。
- 试一下
npx rollup -i main.js -o dist/bundle.js -f esm -w
相关文章:

深入 Rollup:从入门到精通(三)Rollup CLI命令行实战
准备阶段:初始化项目 初始化项目,这里使用的是pnpm,也可以使用yarn或者npm # npm npm init -y # yarn yarn init -y # pnpm pnpm init安装rollup # npm npm install rollup -D # yarn yarn add rollup -D # pnpm pnpm install rollup -D在…...

wangEditor富文本编辑器,Laravel上传图片配置和使用
文章目录 前言步骤1. 构造好前端模版2. 搭建后端存储3. 调试 前言 由于最近写项目需要使用富文本编辑器,使用的是VUE3.0版本所以很多不兼容,实际测试以后推荐使用wangEditor 步骤 构造好前端模版搭建后端存储调试 1. 构造好前端模版 安装模版 模版安…...
chrome源码剖析—进程通信
Chrome 浏览器采用多进程架构(multi-process architecture),这种架构使得每个浏览器标签、扩展、插件、GPU 渲染等都在独立的进程中运行。为了确保不同进程之间的高效通信,Chrome 使用 进程间通信(IPC, Inter-Process …...
JJJ:linux时间子系统相关术语
文章目录 墙上时间内核管理的各种时间无时钟滴答模式(tickless mode 或 no-tick mode)简要介绍具体实现动态时钟滴答 Dynamic Ticks完全无时钟滴答(Full Tickless) nohz sleep单触发模式 oneshot mode 墙上时间 真实世界的真实时…...

0 基础学运维:解锁 K8s 云计算运维工程师成长密码
前言:作为一个过来人,我曾站在技术的门槛之外,连电脑运行内存和内存空间都傻傻分不清,完完全全的零基础。但如今,我已成长为一名资深的k8s云计算运维工程师。回顾这段历程,我深知踏上这条技术之路的艰辛与不…...
大一计算机的自学总结:位运算的应用及位图
前言 不仅异或运算有很多骚操作,位运算本身也有很多骚操作。(尤其后几个题,太逆天了) 一、2 的幂 class Solution { public:bool isPowerOfTwo(int n) {return n>0&&n(n&-n);} }; 根据二进制表示数的原理&#…...

计算机毕业设计Django+Tensorflow音乐推荐系统 机器学习 深度学习 音乐可视化 音乐爬虫 知识图谱 混合神经网络推荐算法 大数据毕设
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...

AI 图片涌入百度图库
在这个信息爆炸的时代,我们习惯了通过搜索引擎来获取各种想要的信息和图片。然而,现在打开搜索引擎看到的却是许多真假难辨的信息——AI图片,这部分数据正以惊人的速度涌入百度图库,让小编不禁想问:未来打开百度图库不…...

可爱狗狗的404动画页面HTML源码
源码介绍 可爱狗狗的404动画页面HTML源码,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果 效果预览 源码获取 可爱狗狗的404动画页面HTML源码...

【微服务与分布式实践】探索 Dubbo
核心组件 服务注册与发现原理 服务提供者启动时,会将其服务信息(如服务名、版本、所在节点的网络地址等)注册到注册中心。服务消费者则可以从注册中心发现可用的服务提供者列表,并与之通信。注册中心会存储服务的信息,…...

OpenCSG月度更新2025.1
1月的OpenCSG取得了一些亮眼的成绩 在2025年1月,OpenCSG在产品和社区方面继续取得了显著进展。产品方面,推出了AutoHub浏览器自动化助手,帮助用户提升浏览体验;CSGHub企业版功能全面升级,现已开放试用申请,…...

C++封装红黑树实现mymap和myset和模拟实现详解
文章目录 map和set的封装map和set的底层 map和set的模拟实现insertiterator实现的思路operatoroperator- -operator[ ] map和set的封装 介绍map和set的底层实现 map和set的底层 一份模版实例化出key的rb_tree和pair<k,v>的rb_tree rb_tree的Key和Value不是我们之前传统意…...

二次封装的方法
二次封装 我们开发中经常需要封装一些第三方组件,那么父组件应该怎么传值,怎么调用封装好的组件原有的属性、插槽、方法,一个个调用虽然可行,但十分麻烦,我们一起来看更简便的方法。 二次封装组件,属性怎…...

消息队列篇--通信协议篇--网络通信模型(OSI7层参考模型,TCP/IP分层模型)
一、OSI参考模型(Open Systems Interconnection Model) OSI参考模型是一个用于描述和标准化网络通信功能的七层框架。它由国际标准化组织(ISO)提出,旨在为不同的网络设备和协议提供一个通用的语言和结构,以…...

Python实现U盘数据自动拷贝
功能:当电脑上有U盘插入时,自动复制U盘内的所有内容 主要特点: 1、使用PyQt5创建图形界面,但默认隐藏 2、通过CtrlAltU组合键可以显示/隐藏界面 3、自动添加到Windows启动项 4、监控USB设备插入 5、按修改时间排序复制文件 6、静…...

汇编的使用总结
一、汇编的组成 1、汇编指令(指令集) 数据处理指令: 数据搬移指令 数据移位指令 位运算指令 算术运算指令 比较指令 跳转指令 内存读写指令 状态寄存器传送指令 异常产生指令等 2、伪指令 不是汇编指令,但是可以起到指令的作用,伪…...
DeepSeek理解概率的能力
问题: 下一个问题是概率问题。乘车时有一个人带刀子的概率是百分之一,两个人同时带刀子的概率是万分之一。有人认为如果他乘车时带上刀子,那么还有其他人带刀子的概率就是万分之一,他乘车就会安全得多。他的想法对吗?…...

AI 浪潮席卷中国年,开启科技新春新纪元
在这博主提前祝大家蛇年快乐呀!!! 随着人工智能(AI)技术的飞速发展,其影响力已经渗透到社会生活的方方面面。在中国传统节日 —— 春节期间,AI 技术也展现出了巨大的潜力,为中国年带…...
AI时代的网络安全:传统技术的落寞与新机遇
AI时代的网络安全:传统技术的落寞与新机遇 在AI技术飞速发展的浪潮中,网络安全领域正经历着前所未有的变革。一方面,传统网络安全技术在面对新型攻击手段时逐渐显露出局限性;另一方面,AI为网络安全带来了新的机遇&…...

可以称之为“yyds”的物联网开源框架有哪几个?
有了物联网的发展,我们的生活似乎也变得更加“鲜活”、有趣、便捷,包具有科技感的。在物联网(IoT)领域中,也有许多优秀的开源框架支持设备连接、数据处理、云服务等,成为被用户们广泛认可的存在。以下给大家…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...