库打包工具 rollup
库打包工具 rollup
摘要
**概念:**rollup是一个模块化的打包工具
注:实际应用中,rollup更多是一个库打包工具
与Webpack的区别:
文件处理:
- rollup 更多专注于 JS 代码,并针对 ES Module 进行打包
- webpack 通常可以通过各种 loader 处理多种文件及其对应的依赖关系
应用场景:
- 在实际项目开发中,通常使用webpack(比如react、angular项目都是基于webpack的)
- 在对库文件进行打包时,通常会使用rollup(比如vue、react、dayjs源码本身都是基于rollup的,Vite底层使用Rollup)。
概念
官方对rollup的定义:
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
Rollup是一个JavaScript的模块化打包工具,可以帮助我们编译小的代码到一个大的、复杂的代码中,比如一个库或者一个应用程序;
我们会发现Rollup的定义、定位和webpack非常的相似:
- Rollup也是一个模块化的打包工具,但是Rollup主要是针对ES Module进行打包的,webpack则通常可以通过各种loader处理各种各样的文件,以及处理它们的依赖关系。
- rollup更多时候是专注于处理JavaScript代码的(当然也可以处理css、font、vue等文件)。
- rollup的配置和理念相对于webpack来说,更加的简洁和容易理解; 在早期webpack不支持tree shaking时,rollup具备更强的优势。
webpack和rollup各自的应用场景:
通常在实际项目开发中,我们都会使用webpack(比如react、angular项目都是基于webpack的)
在对库文件进行打包时,我们通常会使用rollup(比如vue、react、dayjs源码本身都是基于rollup的,Vite底层使用Rollup)。
Rollup的基本使用
安装rollup:
# 全局安装
npm install rollup -g
# 局部安装
npm install rollup -D
创建main.js文件,打包到bundle.js文件中:
参数:
-f
: format
-f cjs // commonjs,支持node环境
-f iife // 立即执行函数表达式
-f amd // amd,支持amd环境
-f umd // umd,支持通用的模块化环境
# 打包浏览器的库
npx rollup ./src/main.js -f iife -o dist/bundle.js # 打包AMD的库
npx rollup ./src/main.js -f amd -o dist/bundle.js# 打包CommonJS的库
npx rollup ./src/main.js -f cjs -o dist/bundle.js # 打包通用的库(必须跟上name)
npx rollup ./src/main.js -f umd --name mathUtil -o dist/bundle.js
Case: 打包index为bundle.js
指令如下所示:
nathanchen@NathansMacBook-Pro rollup % npx rollup ./lib/index.js -f umd --name mathUtil -o dist/bundle.js./lib/index.js → dist/bundle.js...
created dist/bundle.js in 22ms
index.js
function foo() {console.log("foo excetion")
}export {foo
}
bundle.js
(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :typeof define === 'function' && define.amd ? define(['exports'], factory) :(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.mathUtil = {}));
})(this, (function (exports) { 'use strict';function foo() {console.log("foo excetion");}exports.foo = foo;}));
Rollup的配置文件
我们可以将配置信息写到配置文件中rollup.config.js
文件。
module.exports = {// 入口input: "./lib/index.js",// 出口output: {format: "umd",name: "nathanUtils",file: "./build/bundle.umd.js"},
}
执行命令即可,-c
指的是使用配置文件:
npx rollup -c
我们可以对文件进行分别打包,打包出更多的库文件(用户可以根据不同的需求来引入)。
module.exports = {// 入口input: "./lib/index.js",// 出口output: [{format: "umd",name: "nathanUtils",file: "./build/bundle.umd.js"},{format: "amd",name: "nathanUtils",file: "./build/bundle.amd.js"},{format: "cjs",name: "nathanUtils",file: "./build/bundle.cjs.js"},{format: "iife",name: "nathanUtils",file: "./build/bundle.browser.js"},]
}
解决commonjs和第三方库问题
**问题背景:**引入第三方包,比如 Lodash,进行打包时,发现没有对 引入包 进行打包。
原因:
默认 lodash 没有被打包是因为它使用的是 commonjs,rollup默认情况下只会处理 ES Module
解决方案:
安装解决commonjs的库:
npm install @rollup/plugin-commonjs -D
安装解决node_modules的库:
npm install @rollup/plugin-node-resolve -D
npx rollup -c
进行打包即可,可以发现 Lodash 被打包进入 bundle.js
不过在实际应用中,我们一般排除打包依赖包,当用户使用时包时,让他们自己进行安装即可
rollup.config.js
module.exports = {output: [{format: "umd",name: "nathanUtils",file: "./build/bundle.umd.js",globals: {lodash: "_" // 给 lodash 全局命名为 _}},],external: ["lodash"],
}
Babel 转换代码
**需求:**如果我们希望将ES6转成ES5的代码,可以在rollup中使用babel。
安装rollup对应的babel插件:
npm install @rollup/plugin-babel -D
修改配置文件:
配置 rollup.config.js
配置 babelHelpers
,不让 Babel 处理 node_modules
// 使用代码转换和压缩
const babel = require('@rollup/plugin-babel')module.exports = {...plugins: [babel({babelHelpers: "bundled",exclude: /node_modules/})]
}
配置babel.config.js
module.exports = {presets: ["@babel/preset-env"]
}
产物:
打包前 babel.config.js
import { sum, mul } from './utils/math'const foo = () => {console.log("foo excetion")
}export {foo,sum,mul
}
打包后 bundle.js
(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :typeof define === 'function' && define.amd ? define(['exports'], factory) :(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.mathUtil = {}));
})(this, (function (exports) { 'use strict';function sum(num1, num2) {return num1 + num2}function mul(num1, num2) {return num1 * num2}function foo() {console.log("foo excetion");}exports.foo = foo;exports.mul = mul;exports.sum = sum;}));
Teser 代码压缩
如果我们希望对代码进行压缩,可以使用@rollup/plugin-terser
npm install @rollup/plugin-terser -D
配置terser:babel.config.js
const terser = require('@rollup/plugin-terser')module.exports = {...plugins: [terser()]
}
打包后 bundle.js
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).nathanUtils={})}(this,(function(e){"use strict";e.foo=function(){console.log("foo excetion")},e.mul=function(e,n){return e*n},e.sum=function(e,n){return e+n}}));
处理css文件
如果我们项目中需要处理css文件,可以使用postcss:
npm install rollup-plugin-postcss postcss -D
配置postcss的插件:可以补充安装下 postcss-preset-env
,处理下样式兼容性问题
const postcss = require('rollup-plugin-postcss')module.exports = {...plugins: [postcss({ plugins: [require("postcss-preset-env")]})]
}
处理vue文件
处理vue文件我们需要使用rollup-plugin-vue插件
注意:默认情况下我们安装的是vue2.x的版本,所以我这里指定了一下rollup-plugin-vue的版本;
npm install rollup-plugin-vue @vue/compiler-sfc -D
使用vue的插件:vue()
打包vue报错:
在我们打包vue项目后,运行会报如下的错误:
Uncaught ReferenceError: process is not defined
这是因为在我们打包的vue代码中,用到 process.env.NODE_ENV,所以我们可以使用一个插件 rollup-plugin-replace
设置它对应的值:
npm install @rollup/plugin-replace -D
配置插件信息:
replace({'process.env.NODE_ENV': JSON.stringify('production')
})
搭建本地服务器
第一步:使用rollup-plugin-serve搭建服务
npm install rollup-plugin-serve -D
rollup.config.js
module.exports = {...plugins: [...serve({port: 8000,open: true,contentBase: '.' // 服务当前文件夹})]
}
第二步:当文件发生变化时,自动刷新浏览器
npm install rollup-plugin-livereload -D
第三步:启动时,开启文件监听
npx rollup -c -w
效果:
区分开发环境
我们可以在 package.json
中创建一个开发和构建的脚本:
"scripts": {"build": "rollup -c --environment NODE_ENV:production","serve": "rollup -c --environment NODE_ENV:development -w"
},
rollup.config.js
if (isProduction) {plugins.push(terser())
} else {const extraPlugins = [serve({port: 8000,open: true,contentBase: '.' // 服务当前文件夹}),]plugins.push(...extraPlugins)
}
相关文章:

库打包工具 rollup
库打包工具 rollup 摘要 **概念:**rollup是一个模块化的打包工具 注:实际应用中,rollup更多是一个库打包工具 与Webpack的区别: 文件处理: rollup 更多专注于 JS 代码,并针对 ES Module 进行打包webpa…...
unplugin-vue-components 库作用
一、基本概念与用途 1. 自动导入 Vue 组件 unplugin - vue - components是一个用于 Vue 项目的插件,主要功能是自动导入组件,从而减少在 Vue 组件中手动导入其他组件的繁琐过程。 在大型 Vue 项目中,往往会有许多自定义组件或者第三方组件…...
LinkedList和单双链表。
java中提供了双向链表的动态数据结构 --- LinkedList,它同时也实现了List接口,可以当作普通的列表来使用。也可以自定义实现链表。 单向链表:一个节点本节点数据下个节点地址 给定两个有序链表的头指针head1和head2,打印两个链表…...

AI与OCR:数字档案馆图像扫描与文字识别技术实现与项目案例
文末有免费工具可在线体验,或者网络搜索关键词“思通开源AI能力平台” 一、扫描与图像预处理 技术实现过程 在纸质档案的数字化过程中,首先需要使用高精度扫描仪对纸质文档进行扫描,生成高清的数字图像。这一步骤是整个OCR流程的基础…...

Spring boot 读模块项目升级为spring cloud 项目步骤以及问题
1.结构说明 bean 模块 ,public 模块, client 模块, erp模块,system 主模块。 2.环境说明以及pom 原本环境 新环境 mysql 5.7 -------------- mysql 8.0 maven 3.9.6 jdk 8 -----------…...

时序数据库之influxdb和倒排索引以及LSM-TREE
一、时序数据库的特点 1、时序数据库用作打点,用来做监控使用,属于写多读少的场景,而且由于时间不可逆,几乎不可能出现更新的操作。而且监控数据一般只会查询最近几分钟数据,冷热数据查询频率非常明显。因此非常贴合ES…...

如何避免消息的重复消费问题?(消息消费时的幂等性)
如何避免消息的重复消费问题 1、 消息的幂等性1.1、概念1.2、产生业务场景 2、全局唯一IDRedis解决消息幂等性问题2.1、application.yml配置文件2.2、生产者发送消息2.3、消费者接收消息2.4、pom.xml引入依赖2.5、RabbitConfig配置类2.6、启动类2.7、订单对象2.8、测试 1、 消息…...
【Java SE】类与对象
现实世界中,随处可见的一个事物实体就是对象,而类就是同一类事物(或对象)的统称,由一个类构造对象的过程称为创建这个类的一个实例(instance),即: 类(class&…...
基于springboot的公益服务平台的设计与实现
文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于springboot的公益服务平台的设计与实…...
Tomcat(6) 什么是Servlet容器?
Servlet容器是Java EE技术中的一个关键组件,它负责管理和执行Servlet。Servlet容器提供了运行时环境,使得Servlet能够接收和响应来自客户端的HTTP请求。以下是Servlet容器的详细解释,以及一些相关的代码示例。 Servlet容器的主要功能 加载和…...
用js去除变量里的html标签
要用 JavaScript 去除字符串中的 HTML 标签,你可以使用正则表达式。以下是一个简单的示例代码: function removeHTMLTags(str) {return str.replace(/<[^>]*>/g, ); }// 示例 var str <p>This is <b>bold</b> text with <…...

Vue3+element-plus摘要
1.如果自己电脑vue版本是vue2版本,下面将详细介绍如何在vue2版本基础上继续安装 vue3版本且不会影响vue2版本的使用 1-1 在c盘或者别的盘建一个文件夹vue3 1-2 在这个文件夹里使用WINR 打开终端 输入命令 npm install vue/cli 安装完即可 1-3 然后进入此文件夹中的n…...
Android Studio 将项目打包成apk文件
第一步:选择Build -> Generate Signed APK 会出现: 我们选择 Create new… 然后选择你要存放密钥的地方 点击ok之后,则选择好了文件,并生成了jks文件了。 点击ok之后, 会出现: 选择release…...

贪心算法day2(最长递增子序列)
目录 1.最长递增子序列 方法一:动态规划 方法二:贪心二分查找 1.最长递增子序列 链接:. - 力扣(LeetCode) 方法一:动态规划 思路:我们定义dp[i]为最长递增子序列,那么dp[j]就是…...

arcgis pro 学习笔记
二维三维集合在一起,与arcgis不同 一、首次使用,几个基本设置 1.选项——常规里面设置自动保存时间 2.新建工程文件,会自动加载地图,可以在选项里面设置为无,以提高启动效率。 3.设置缓存位置,可勾选每次…...
OpenGL 进阶系列06 - OpenGL变换反馈(TransformFeedback)
一:概述 变换反馈(Transform Feedback)是 OpenGL 中的一项技术,允许你将顶点着色器的输出(例如变换后的顶点数据)直接传输到缓冲区,而不是将结果渲染到屏幕上。它在图形计算中非常有用,尤其在粒子系统、模拟、几何处理等场景中,可以用来获取顶点处理的中间结果,并将其…...

elementUI 点击弹出时间 date-picker
elementUI的日期组件,有完整的UI样式及弹窗,但是我的页面不要它的UI样式,点击的时候却要弹出类似的日期选择器,那怎么办呢? 以下是elementUI自带的UI风格,一定要一个输入框来触发。 这是我的项目中要用到的…...

【浙江大学大模型系列】启真医疗大模型(国内大模型)
启真大模型是一款专注于医疗领域的AI大模型,它坚持“数据知识双轮驱动”的技术路线,通过大模型技术和医学知识库的紧密结合,致力于推动大模型技术在医疗行业的落地和应用实践。 启真大模型的特点在于其强大的数据整合能力和医学知识库的支持。…...
NestJS 项目中如何使用 class-validator 进行数据验证
前言 在现代Web开发中,数据验证是必不可少的一环,它不仅能够确保数据的准确性,还能提高系统的安全性。在使用NestJS框架进行项目开发时,class-validator与class-transformer这两个库为我们提供了方便的数据验证解决方案。 本文将…...

【AI抠图整合包及教程】Meta SAM2:引领图像和视频分割技术的新纪元
在人工智能的浪潮中,Meta公司再次以Segment Anything Model 2(SAM 2)引领了图像和视频分割技术的新纪元。SAM 2的发布不仅为计算机视觉领域的研究和发展注入了新的活力,还预示着这一技术将在多个行业中找到广泛的应用场景。这一创…...

大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...

376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
安卓基础(Java 和 Gradle 版本)
1. 设置项目的 JDK 版本 方法1:通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分,设置 Gradle JDK 方法2:通过 Settings File → Settings... (或 CtrlAltS)…...
比特币:固若金汤的数字堡垒与它的四道防线
第一道防线:机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”(Hashing)就是一种军事级的加密术(SHA-256),能将信函内容(交易细节…...

uni-app学习笔记二十七--设置底部菜单TabBar的样式
官方文档地址:uni.setTabBarItem(OBJECT) | uni-app官网 uni.setTabBarItem(OBJECT) 动态设置 tabBar 某一项的内容,通常写在项目的App.vue的onLaunch方法中,用于项目启动时立即执行 重要参数: indexnumber是tabBar 的哪一项&…...