Rollup 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别

news2025/2/5 9:57:42

一、前置知识

没接触过前端模块化概念的同学可先参考：JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM

二、什么是 Rollup ？

Rollup 工具可以将代码转成不同模块，实现一套代码多端（浏览器/Node）引入。比如通过一句命令将代码打包为：

  1. 浏览器（代码通过 Script 标签引入）
rollup main.js --file bundle.js --format iife
  1. AMD（兼容 requirejs.js 框架）
rollup main.js --file bundle.js --format amd
  1. CommonJS（Node.js 代码通过 CJS 方式引入）
rollup main.js --file bundle.js --format cjs
  1. UMD （浏览器、AMD、CJS 均支持，是目前最常见的模块选择方式）
rollup main.js --file bundle.js --format umd --name "myBundle"

后面会提到每个命令的作用，这里了解即可。

三、Rollup 的应用场景和好处

  1. 如果你的项目是以插件或库给用户引入使用，Rollup 是最佳选择，它可以将代码转成不同的模块，然后用户根据自身项目模块语法来引入你的代码。

  2. Rollup 支持 Tree-shaking ，只打包引用代码，无引用的一律甩掉。

  3. 你的项目可以肆无忌惮地使用 ESM 写法，Rollup 将会自动编译，再结合 Babel 美滋滋。

四、Rollup 与 Webpack/Vite 的区别

  1. Rollup 将 JS 代码转成不同的引入模块形式，如果要处理其它语言需要借助插件。

  2. Webpack 将 JS 代码进行打包压缩，同时拥有着 CSS/JS/HTML/Font 等其它语言插件的生态丰富圈。

  3. 组件库或插件适合用 Rollup 打包、大型项目适合用 Webpack 或 Vite 。

五、Rollup 与 Babel 的区别

  1. Rollup 可将 JS 代码变成多种模块来引入运行。

  2. Babel 可将高级 JS 语法代码转成低级版本兼容运行。

六、Rollup 使用教程

6.1 准备工作

  1. 新建项目： rollup-example

  2. 项目结构：
    在这里插入图片描述

  3. src/main.js 代码：

    const user = () => {
  return {
    name: 'Jack'
  }
}
export { user };

  4. 全局安装 Rollup：

    npm install rollup -g

6.2 使用命令行

6.2.1 使用 CLI 打包

rollup ./src/main.js --file lib.js --format cjs

解释：

  1. ./src/main.js 是目标即入口文件。
  2. --file lib.js 是输出的产物文件名。
  3. --format cjs 是需要转换的模块格式，这里我们采用 CJS，表示只用于 Node.js

打包后的产物：
在这里插入图片描述

6.2.2 参数命令说明

-o === --file === output 输出产物的文件名。
-d === --dir === 输出产物的目录名，一般在开启 code spliting 代码分割技术后才用到。
-f === --format === 打包模块格式。
-w === --watch === 启动监听模式，当项目代码有变动时，自动执行打包命令。
-c === --config === rollup.config.js 指向配置文件。

其它参数命令可参考官方文档。

6.3 使用配置文件

当频繁使用打包命令且参数量越来越多时，Rollup 支持配置文件的方式，例如：

// rollup.config.js
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
export default {
	input: 'src/main.js', // 目标入口
	// 同一个目标入口可以编译多种产物形式。
	output: [
		{
			file: 'bundle.js', // 产物文件名。
			format: 'cjs', // 产物模块格式。
			
		},
		{
			file: 'bundle.min.js',
			format: 'iife',
			// output-plugin（构建完成后的插件）：
			// 做一些收尾工作，比如 terser 插件可将代码变量/函数名全部压缩转义为 a,b,c,d 的精简版本形式，俗称“混淆”，防止外部人员窥探源码。
			plugins: [terser()] 
		}
	],
	// compliling-plulgin（rollup 执行编译时的插件）: 
	// 帮助我们在写代码的过程中享受一些特殊语法糖和特殊处理。
	plugins: [
		// 支持识别 import json 数据。
		json(),
		// 支持 Babel （记得要在 babel.config.js 中配置下 preset ）
		resolve(),
		babel({ babelHelpers: 'bundled' })
	],
	// 告诉哪个 NPM 模块打包过程种直接全量 import，不采用 tree-shaking 。
	external: ['lodash']
};

最后执行 rollup -c 即可，更多配置选项可参考官方文档 。

提示：命令行参数的优先级比配置选项更高。

七、Rollup 支持打包 Vue 模板 或 Vue TSX

构建一个组件库时，通常需要借助框架来快速完成，比如我想构建一套 Vue 语法的组件库，能够给其它 Vue 项目引入使用。接下来我将以 Vue3 的两种写法来作为演示。

7.1 准备工作

  1. 新建 rollup-vue-example 项目并使用 npm init -y 初始化。

  2. 项目结构如下：
    在这里插入图片描述

  3. 为了使项目全面支持 ESM 模块语法，在 package.json 中新增："type": "module"，以便本地运行项目时 node 不会报错。

  4. main.js 入口代码如下：

    import Vue from 'vue';
import App from './src/App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

  5. src/App.vue 代码如下

    <template>
  <div>Hello,world</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup(props) {
    return {}
  }
})
</script>
<style lang="scss" scoped>
</style>

  6. rollup.config.js 配置文件如下：

    export default {
  input: 'main.js',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [],
};

7.2 打包 Vue 模板

要想让 Rollup 识别 .vue 文件，得分几个步骤完成：

7.2.1 安装以下两个插件：

npm i rollup-plugin-vue @vue/compiler-sfc

其中 rollup-plugin-vue 是我们想要的插件，@vue/compiler-sfc 是 rollup-plugin-vue 需要的依赖（后面会讲它的用处）。

7.2.2 调整 rollup.config.js 配置：

import vue from 'rollup-plugin-vue';
export default {
  input: 'main.js',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    vue({
      css: true, // 提取 css 为单个文件。
      compileTemplate: true, // 编译 vue 模板。
    })
  ],
};

7.2.3 执行：

rollup -c

编译后的 dist/index.js 产物如下：
在这里插入图片描述

你可能会问，为什么 .vue 源码会被编译，而不像 js 代码那样原封不动的输出？

这是因为 .vue 语法本身就不能直接在浏览器或 node 上面跑，于是刚刚的 @vue/compiler-sfc 依赖就排上用场了，它可以识别 .vue 文件并编译成可执行的 JS 对象代码。

不信可以在产物里找找看哪个不是 JS 能识别的，若能找到；我请你喝可口可乐。

你可能还会问，那为啥本地项目就能跑起 vue 模板的代码呢？这是因为编译期间，如 vue-cli or vite 偷偷将它们转为可执行的 JS 脚本，只是我们没感知到而已~

7.3 打包 Vue JSX

Vue3 除了语法上发生了变化，它还支持 JSX 写法，我们又不得不继续卷到底！
与 Vue 模板相比，Rollup 支持 Vue JSX 需要多点配置量，但问题不大。

7.3.1 准备工作

我们继续沿用刚刚的 rollup-vue-example 项目来作为演示，这里稍微改动下即可：

  1. 新增 src/App.tsx 文件，内容如下：
import { defineComponent } from 'vue';
const App = defineComponent({
  setup() {
    const Greet = () => <div>Hello,world</div>
    return <Greet />
  }
});
export default App
  1. 改变 main. 引入文件方式：
import Vue from 'vue';
import App from './src/App.tsx'; // 引入 tsx 。
new Vue({
  render: (h) => h(App),
}).$mount('#app');

7.3.2 安装依赖包：

npm i @rollup/plugin-babel @babel/core @vue/babel-preset-jsx

解释：

  • @rollup/plugin-babel 能够让 Rollup 支持 Babel 。
  • @babel/core 引入 babel 的核心编译包。
  • @vue/babel-preset-jsx Vue 自家实现的 Vue JSX babel 插件 。

对 Babel 概念不熟的可以阅读前面写过的 JS & 介绍 Babel 的使用及 presets & plugins 的概念
。

7.3.2 调整 rollup.config.js 配置：

import vue from 'rollup-plugin-vue';
// 新增
import { babel } from '@rollup/plugin-babel';
export default {
  input: 'main.js',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    vue({
      css: true, // 提取 css 为单个文件。
      compileTemplate: true, // 编译 vue 目标。
    }),
    // 新增
    babel({
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      presets: ['@vue/babel-preset-jsx'], // 让 babel 加载 Vue JSX babel 插件。
    })
  ],
};

7.3.3 执行：

roolup -c

编译后的 dist/index.js 产物如下：
在这里插入图片描述
你可能会问，.tsx 采用的就是 JS 语法呀，产物为什么也会发生变化呢？
错！！！TSX 不是 JS，它们是 JS + HTML 的混合体，看看里面的标签便知，浏览器是无法执行这段代码的，依然需要转成可执行的JS 对象。

八、Rollup 常用插件集合

========compiling plugin=========

@rollup/plugin-commonjs 支持在 ESM 中引入 CJS代码。

@rollup/plugin-typescript 支持识别 .ts 文件。

@rollup/plugin-json 能够导入 import .json 文件。

@rollup/plugin-babel 支持 Babel

@rollup/plugin-node-resolve 提供更全面的路径解析

========output plugin=========
@rollup/plugin-terser 将代码变量混淆，转成 a,b,c,d, …的形式。

查看更多插件

----------------------------------------------------------------结尾----------------------------------------------------------------

参考文献：
https://rollup-plugin-vue.vuejs.org/#what-does-rollup-plugin-vue-do
https://rollupjs.org/introduction/
https://rollupjs.org/tutorial/
https://adostes.medium.com/authoring-a-javascript-library-that-works-everywhere-using-rollup-f1b4b527b2a9

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/761609.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringBoot的静态资源文件访问问题

SpringBoot的静态资源文件访问问题

一、采用默认的文件存放位置&#xff1a; Spring Boot 对静态资源映射提供了默认配置&#xff0c; 默认将 /** 所有访问映射到以下目录&#xff1a; classpath:/static classpath:/public classpath:/resources classpath:/META-INF/resources在如上路径的文件可以被直接访问…
阅读更多...
Havoc！新的开源命令和控制C2框架

Havoc！新的开源命令和控制C2框架

工具介绍 Havoc是一款现代化可扩展的后渗透命令控制框架&#xff0c;可作为Cobalt Strike和Brute Ratel等付费选项的替代方案。 关注【Hack分享吧】公众号&#xff0c;回复关键字【230618】获取下载链接 Havoc包含各种各样的模块&#xff0c;允许渗透测试人员&#xff08;和黑…
阅读更多...
Rust 数据类型 之 结构体（Struct）

Rust 数据类型 之 结构体（Struct）

目录 结构体&#xff08;Struct&#xff09; 定义与声明 结构体定义 结构体实例 结构体分类 单元结构体&#xff08;Unit Struct&#xff09; 元组结构体&#xff08;Tuple Struct&#xff09; 具名结构体&#xff08;Named Struct&#xff09; 结构体嵌套 结构体方法…
阅读更多...
华为云ROMA Connect 的智能集成 – 现代企业数字化转型的新利器

华为云ROMA Connect 的智能集成 – 现代企业数字化转型的新利器

在当今数字信息智能化的时代&#xff0c;人工智能技术逐渐深入企业的生产流程和实践中。人工智能的应用成为现代企业数字化转型的新利器。华为云的ROMA Connect作为企业级的融合集成服务 EiPaaS平台&#xff0c;从今年开始也进入了人工智能技术&#xff0c;针对几个主要的企业集…
阅读更多...
新一代iPaaS全域融合集成平台ROMA Connect HDC.Cloud 2023内容值得再读！

新一代iPaaS全域融合集成平台ROMA Connect HDC.Cloud 2023内容值得再读！

华为云下一代ROMA Connect HDC.Cloud 2023 精彩内容摘要&#xff1a; 7月9号 分论坛上嘉宾分享一站式融合集成平台解决的用户痛点、应用场景、新一代全域升级的新特性、以及伙伴分享案例干活 ROMA Connect 展台提供开发者体验全新升级版ROMA Connect的 AI智能集成 HDC.Cloud…
阅读更多...
华为OD机试真题 Java 实现【战场索敌】【2023 B卷 100分】，深度优先搜索dfs算法，这眼花缭乱的，你这是“战场索鬼”吧？

华为OD机试真题 Java 实现【战场索敌】【2023 B卷 100分】，深度优先搜索dfs算法，这眼花缭乱的，你这是“战场索鬼”吧？

目录 专栏导读一、题目描述二、输入描述三、输出描述四、深度优先搜索dfs五、解题思路六、Java算法源码七、效果展示1、输入2、输出3、说明4、如果增加目标敌人数量K为55、来&#xff0c;上强度 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于…
阅读更多...
从零开始 Spring Cloud 4：Nacos

从零开始 Spring Cloud 4：Nacos

从零开始 Spring Cloud 4&#xff1a;Nacos 图源&#xff1a;laiketui.com Nacos 是 Alibaba 研发的用于 Spring Cloud Alibaba 的服务注册中心组件&#xff0c;符合 Spring Cloud 官方标准&#xff0c;同样被 Spring Cloud 官方接纳&#xff0c;所以我们可以在 Spring Cloud …
阅读更多...
FPGA XDMA 中断模式实现 PCIE3.0 测速试验 提供工程源码和QT上位机源码

FPGA XDMA 中断模式实现 PCIE3.0 测速试验 提供工程源码和QT上位机源码

目录 1、前言2、我已有的PCIE方案3、PCIE理论4、总体设计思路和方案XDMA简介XDMA中断模式QT上位机及其源码 5、vivado工程详解6、上板调试验证7、福利&#xff1a;工程代码的获取 1、前言 PCIE&#xff08;PCI Express&#xff09;采用了目前业内流行的点对点串行连接&#xf…
阅读更多...
同步和异步的区别

同步和异步的区别

同步&#xff0c;可以理解为在执行完一个函数或方法之后&#xff0c;一直等待系统返回值或消息&#xff0c;这时程序是处于阻塞的&#xff0c;只有接收到返回的值或消息后才往下执行其他的命令&#xff1b; 异步&#xff0c;执行完函数或方法后&#xff0c;不必阻塞性地等待返回…
阅读更多...
缓存服务使用总结

缓存服务使用总结

1、介绍 分布式缓存方案缓存服务搭建 2、分布式缓存方案&#xff08;重点掌握&#xff09; 2.1、什么是缓存 通常将数据从数据库中同步一份到内存中&#xff0c;客户端直接从内存中查询数据&#xff0c;减少了和数据库的交互次数&#xff0c;提高查询性能&#xff08;因为内…
阅读更多...
什么是 WebSocket？Java 中如何实现 WebSocket？

什么是 WebSocket？Java 中如何实现 WebSocket？

什么是 WebSocket&#xff1f;Java 中如何实现 WebSocket&#xff1f; WebSocket 简介 WebSocket 是一种新型的网络协议&#xff0c;它允许客户端和服务器之间进行双向通信&#xff0c;可以实现实时数据交互。WebSocket 协议是基于 HTTP 协议的&#xff0c;使用标准的 TCP 连…
阅读更多...
java项目之（超市管理系统ssm+mysql+jsp）

java项目之（超市管理系统ssm+mysql+jsp）

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的超市管理系统。技术交流和部署相关看文章末尾&#xff01; 目录 开发环境&#xff1a; 后端&#xff1a; 前端&#xff1a; 数据库&…
阅读更多...
【MySQL系列】深入学习数据类型

【MySQL系列】深入学习数据类型

「前言」文章内容大致是数据库的数据类型。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、数据类型分类二、数值类型2.1 tinyint类型2.2 bit类型2.3 小数类型2.3.1 float类型2.3.2 decimal类型 2.4 字符串类型2.4.1 char类型2.4.2 varchar类型2.4.3 …
阅读更多...
高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用

高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用

能源是国民经济发展和人民生活必须的重要物质基础。在过去的200多年里&#xff0c;建立在煤炭、石油、天然气等化石燃料基础上的能源体系极大的推动了人类社会的发展。但是人类在使用化石燃料的同时&#xff0c;也带来了严重的环境污染和生态系统破坏。近年来&#xff0c;世界各…
阅读更多...
如何快速又高质量的输出PDF实验报告？

如何快速又高质量的输出PDF实验报告？

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 PDF文档的打印在很多应用场景中都会被使用到&#xff0c;最为常见的就是实验室信息管理…
阅读更多...
rockchip linux Vendor storage 及SN添加

rockchip linux Vendor storage 及SN添加

前言 在产品开发过程中，最后都会为产品编辑一个产品编号方便于管理和维护，而SN（Series Number）就是用于产品的生产编号。但是在linux中，并没有专门管理串码的驱动。 Vendor storage 是rockchip 被设计用来存储 SN，MAC，LAN，BT 等 vendor data。特征如下： 唯一的访问…
阅读更多...
一些有意思的SCI

一些有意思的SCI

Gardner J K, Knopoff L. Is the sequence of earthquakes in Southern California, with aftershocks removed, Poissonian?[J]. Bulletin of the seismological society of America, 1974, 64(5): 1363-1367. [原文] 该论文的abstract只有一个单词&#xff1a;Yes。 目前该论…
阅读更多...
MySQL索引使用原则，什么是覆盖索引、索引下堆、离散度……这些概念你弄明白了吗

MySQL索引使用原则，什么是覆盖索引、索引下堆、离散度……这些概念你弄明白了吗

文章目录 一、索引失效的场景二、列的离散度三、联合索引最左匹配1、什么时候用联合索引2、什么是覆盖索引 四、索引条件下推&#xff08;ICP&#xff09; 一、索引失效的场景 MySQL索引失效的场景&#xff0c;什么情况下会造成MySQL索引失效 二、列的离散度 什么是列的离散…
阅读更多...
【Nacos】实战之配置中心加载多个配置文件

【Nacos】实战之配置中心加载多个配置文件

目录 复习未拆分前的yaml文件拆分配置文件dataSource.yamlmybatis.yamlother.yaml 微服务同时加载多个远程配置文件修改配置文件 复习 导入依赖在子模块里面创建 bootstrap.yaml 文件bootstrap.yaml 文件 添加需要的远程配置信息开始拆分以前的配置信息 未拆分前的yaml文件 拆…
阅读更多...
服务器数据库被360后缀勒索病毒攻击怎么解决，勒索病毒解密

服务器数据库被360后缀勒索病毒攻击怎么解决，勒索病毒解密

随着网络攻击日益猖獗&#xff0c;数据库遭遇勒索病毒的攻击已成为常见现象。而360后缀勒索病毒是一种恶意软件&#xff0c;它将加密数据库中的文件&#xff0c;并要求受害者支付赎金才能获得解密密钥。近日&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器被360后…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023