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

库打包工具 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

效果:

image.png




区分开发环境

我们可以在 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流程的基础&#xf…...

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 标签&#xff0c;你可以使用正则表达式。以下是一个简单的示例代码&#xff1a; function removeHTMLTags(str) {return str.replace(/<[^>]*>/g, ); }// 示例 var str <p>This is <b>bold</b> text with <…...

Vue3+element-plus摘要

1.如果自己电脑vue版本是vue2版本&#xff0c;下面将详细介绍如何在vue2版本基础上继续安装 vue3版本且不会影响vue2版本的使用 1-1 在c盘或者别的盘建一个文件夹vue3 1-2 在这个文件夹里使用WINR 打开终端 输入命令 npm install vue/cli 安装完即可 1-3 然后进入此文件夹中的n…...

Android Studio 将项目打包成apk文件

第一步&#xff1a;选择Build -> Generate Signed APK 会出现&#xff1a; 我们选择 Create new… 然后选择你要存放密钥的地方 点击ok之后&#xff0c;则选择好了文件&#xff0c;并生成了jks文件了。 点击ok之后&#xff0c; 会出现&#xff1a; 选择release&#xf…...

贪心算法day2(最长递增子序列)

目录 1.最长递增子序列 方法一&#xff1a;动态规划 方法二&#xff1a;贪心二分查找 1.最长递增子序列 链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 方法一&#xff1a;动态规划 思路&#xff1a;我们定义dp[i]为最长递增子序列&#xff0c;那么dp[j]就是…...

arcgis pro 学习笔记

二维三维集合在一起&#xff0c;与arcgis不同 一、首次使用&#xff0c;几个基本设置 1.选项——常规里面设置自动保存时间 2.新建工程文件&#xff0c;会自动加载地图&#xff0c;可以在选项里面设置为无&#xff0c;以提高启动效率。 3.设置缓存位置&#xff0c;可勾选每次…...

OpenGL 进阶系列06 - OpenGL变换反馈(TransformFeedback)

一:概述 变换反馈(Transform Feedback)是 OpenGL 中的一项技术,允许你将顶点着色器的输出(例如变换后的顶点数据)直接传输到缓冲区,而不是将结果渲染到屏幕上。它在图形计算中非常有用,尤其在粒子系统、模拟、几何处理等场景中,可以用来获取顶点处理的中间结果,并将其…...

elementUI 点击弹出时间 date-picker

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

【浙江大学大模型系列】启真医疗大模型(国内大模型)

启真大模型是一款专注于医疗领域的AI大模型&#xff0c;它坚持“数据知识双轮驱动”的技术路线&#xff0c;通过大模型技术和医学知识库的紧密结合&#xff0c;致力于推动大模型技术在医疗行业的落地和应用实践。 启真大模型的特点在于其强大的数据整合能力和医学知识库的支持。…...

NestJS 项目中如何使用 class-validator 进行数据验证

前言 在现代Web开发中&#xff0c;数据验证是必不可少的一环&#xff0c;它不仅能够确保数据的准确性&#xff0c;还能提高系统的安全性。在使用NestJS框架进行项目开发时&#xff0c;class-validator与class-transformer这两个库为我们提供了方便的数据验证解决方案。 本文将…...

【AI抠图整合包及教程】Meta SAM2:引领图像和视频分割技术的新纪元

在人工智能的浪潮中&#xff0c;Meta公司再次以Segment Anything Model 2&#xff08;SAM 2&#xff09;引领了图像和视频分割技术的新纪元。SAM 2的发布不仅为计算机视觉领域的研究和发展注入了新的活力&#xff0c;还预示着这一技术将在多个行业中找到广泛的应用场景。这一创…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...

计算机系统结构复习-名词解释2

1.定向&#xff1a;在某条指令产生计算结果之前&#xff0c;其他指令并不真正立即需要该计算结果&#xff0c;如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方&#xff0c;那么就可以避免停顿。 2.多级存储层次&#xff1a;由若干个采用不同实现技术的存储…...

用 FFmpeg 实现 RTMP 推流直播

RTMP&#xff08;Real-Time Messaging Protocol&#xff09; 是直播行业中常用的传输协议。 一般来说&#xff0c;直播服务商会给你&#xff1a; ✅ 一个 RTMP 推流地址&#xff08;你推视频上去&#xff09; ✅ 一个 HLS 或 FLV 拉流地址&#xff08;观众观看用&#xff09;…...

使用 uv 工具快速部署并管理 vLLM 推理环境

uv&#xff1a;现代 Python 项目管理的高效助手 uv&#xff1a;Rust 驱动的 Python 包管理新时代 在部署大语言模型&#xff08;LLM&#xff09;推理服务时&#xff0c;vLLM 是一个备受关注的方案&#xff0c;具备高吞吐、低延迟和对 OpenAI API 的良好兼容性。为了提高部署效…...