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

深入 Rollup:从入门到精通(三)Rollup CLI命令行实战

准备阶段:初始化项目

  1. 初始化项目,这里使用的是pnpm,也可以使用yarn或者npm
# npm
npm init -y
# yarn
yarn init -y
# pnpm
pnpm init
  1. 安装rollup
# npm
npm install rollup -D
# yarn
yarn add rollup -D
# pnpm
pnpm install rollup -D
  1. 在根目录下新建main.js
import { add } from './src/math.js';let result = add(1, 2)console.log(result);
  1. 新建src/math.js
export function add(a, b) {return a + b;
}export function sub(a, b) {return a - b;
}
  1. 项目初始化完成,现在项目的结构应该和我这个一样。

在这里插入图片描述

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.jssrc/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

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

OpenCSG月度更新2025.1

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

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不是我们之前传统意…...

二次封装的方法

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

消息队列篇--通信协议篇--网络通信模型(OSI7层参考模型,TCP/IP分层模型)

一、OSI参考模型&#xff08;Open Systems Interconnection Model&#xff09; OSI参考模型是一个用于描述和标准化网络通信功能的七层框架。它由国际标准化组织&#xff08;ISO&#xff09;提出&#xff0c;旨在为不同的网络设备和协议提供一个通用的语言和结构&#xff0c;以…...

Python实现U盘数据自动拷贝

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

汇编的使用总结

一、汇编的组成 1、汇编指令&#xff08;指令集&#xff09; 数据处理指令: 数据搬移指令 数据移位指令 位运算指令 算术运算指令 比较指令 跳转指令 内存读写指令 状态寄存器传送指令 异常产生指令等 2、伪指令 不是汇编指令&#xff0c;但是可以起到指令的作用&#xff0c;伪…...

DeepSeek理解概率的能力

问题&#xff1a; 下一个问题是概率问题。乘车时有一个人带刀子的概率是百分之一&#xff0c;两个人同时带刀子的概率是万分之一。有人认为如果他乘车时带上刀子&#xff0c;那么还有其他人带刀子的概率就是万分之一&#xff0c;他乘车就会安全得多。他的想法对吗&#xff1f;…...

AI 浪潮席卷中国年,开启科技新春新纪元

在这博主提前祝大家蛇年快乐呀&#xff01;&#xff01;&#xff01; 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其影响力已经渗透到社会生活的方方面面。在中国传统节日 —— 春节期间&#xff0c;AI 技术也展现出了巨大的潜力&#xff0c;为中国年带…...

AI时代的网络安全:传统技术的落寞与新机遇

AI时代的网络安全&#xff1a;传统技术的落寞与新机遇 在AI技术飞速发展的浪潮中&#xff0c;网络安全领域正经历着前所未有的变革。一方面&#xff0c;传统网络安全技术在面对新型攻击手段时逐渐显露出局限性&#xff1b;另一方面&#xff0c;AI为网络安全带来了新的机遇&…...

可以称之为“yyds”的物联网开源框架有哪几个?

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

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 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代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 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&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

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

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; 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 -…...