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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务容器化部署实践(FontConfiguration.getVersion)

文章目录 前言一、整体步骤简介二、开始实战1.准备好微服务2.将各个微服务打包为镜像第一种第二种3. 将各个打包好的镜像,通过docker-compose容器编排,运行即可总结前言 docker容器化部署微服务: 将微服务容器化部署到 Docker 容器中是一个常见的做法,可以提高应用的可移…

人工智能(AI)和机器学习(ML)技术学习流程

目录 人工智能(AI)和机器学习(ML)技术 自然语言处理(NLP): Word2Vec: Seq2Seq(Sequence-to-Sequence): Transformer: 范式、架构和自注意力: 多头注意力: 预训练、微调、提示工程和模型压缩: 上下文学习、思维链、全量微调、量化、剪枝: 思维树、思维…

带你读懂什么是AI Agent智能体

一、智能体的定义与特性 定义:智能体是一个使用大语言模型(LLM)来决定应用程序控制流的系统。然而,智能体的定义并不唯一,不同人有不同的看法。Langchain的创始人Harrison Chase从技术角度给出了定义,但更…

Qt_day3_信号槽

目录 信号槽 1. 概念 2. 函数原型 3. 连接方式 3.1 自带信号 → 自带槽 3.2 自带信号 → 自定义槽 3.3 自定义信号 4. 信号槽传参 5. 对应关系 5.1 一对多 5.2 多对一 信号槽 1. 概念 之前的程序界面只能看,不能交互,信号槽可以让界面进行人机…

《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明

参考 《element plus 使用 icon 图标(两种方式)》使用 icon 升级 Vue2 升级 Vue3 项目时,遇到命名时的实心与空心点差异! ElementUI: 实心是 el-icon-more空心是 el-icon-more-outline ElementPlus: 实心是 el-icon-more-fill…

RWKV 通过几万 token 的 CoT 解决几乎 100% 的数独问题(采用 29M 参数的小模型)

RWKV 做 CoT 特别有优势,因为推理速度和显存占用与上下文无关。即使做几百万 token 的 CoT 也不会变慢或额外消耗显存。 RWKV 社区开发者 Jellyfish042 训练了一个用于解决数独谜题的专用 RWKV 模型 Sudoku-RWKV ,项目的训练代码和数据制作脚本均已开源…

postgres+timescaledb--离线安装,centos7.9

操作系统是centos7.9,使用的hper-V,安装的虚拟机环境,安装好操作系统之后,让系统不连外网后直接按下方操作安装。 方式1,使用压缩包,复杂一点。(第一种方式暂时没有安装timescaledb) 装备安装…

MyBatis xml 文件中 SQL 语句的小于号未转义导致报错

问题现象 在 MyBatis 的 xml 文件中添加了一个 SQL 语句 <select id"countXxx" resultType"int">select count(*) from t1 where count < 3 </select>启动 Spring Boot 应用程序后报错&#xff1a; Caused by: org.apache.ibatis.builde…

深入剖析输入URL按下回车,浏览器做了什么

DNS 查询 首先,是去寻找页面资源的位置。如果导航到https://example.com, 假设HTML页面被定位到IP地址为93.184.216.34 的服务器。如果以前没有访问过这个网站&#xff0c;就需要进行DNS查询。 浏览器向域名服务器发起DNS查询请求&#xff0c;最终得到一个IP地址。第一次请求…

ceph介绍和搭建

1 为什么要使用ceph存储 什么是对象存储&#xff1f; 对象存储并没有向文件系统那样划分为元数据区域和数据区域&#xff0c;而是按照不同的对象进行存储&#xff0c;而且每个对象内部维护着元数据和数据区域。因此每个对象都有自己独立的管理格式。 对象存储优点&#xff1a…

这些场景不适合用Selenium自动化!看看你踩过哪些坑?

Selenium是自动化测试中的一大主力工具&#xff0c;其强大的网页UI自动化能力&#xff0c;让测试人员可以轻松模拟用户操作并验证系统行为。然而&#xff0c;Selenium并非万能&#xff0c;尤其是在某些特定场景下&#xff0c;可能并不适合用来自动化测试。本文将介绍Selenium不…

AI大模型在尽职调查中的应用场景与客户案例

应用场景 1. 企业IPO尽职调查中的文档处理与合规审查 在券商投行进行企业IPO尽职调查过程中&#xff0c;企业需要提交大量的财务报表、历史沿革文件、法律合同等资料。这些文件涉及多个部门&#xff0c;往往存在信息分散、合规性复杂、数据量庞大等问题。思通数科的AI能力平…

[C++]内联函数和nullptr

> &#x1f343; 本系列为初阶C的内容&#xff0c;如果感兴趣&#xff0c;欢迎订阅&#x1f6a9; > &#x1f38a;个人主页:[小编的个人主页])小编的个人主页 > &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 > ✌️ &#x1f91e; &#x1…

工业4.0时代下的人工智能新发展

摘要&#xff1a;随着德国工业4.0时代以及中国制造2025的提出&#xff0c;工业智能化的改革的时代正逐渐到来&#xff0c;然而我国整体工业水平仍然处于工业2.0水平。围绕工业4.0中智能工厂、智能生产、智能物流这三大主题&#xff0c;结合国内外研究现状&#xff0c;对人工智能…

一步一步从asp.net core mvc中访问asp.net core WebApi

"从asp.net core mvc中访问asp.net core WebApi"看到这个标题是不是觉得很绕口啊&#xff0c;但的确就是要讲一讲这样的访问。前面我们介绍了微信小程序访问asp.net core webapi(感兴趣的童鞋可以看看前面的博文有关WEBAPI的搭建)&#xff0c;这里我们重点不关心如何…

【Python】关于python中overload装饰器详解

Python不像C、Java等语言可以进行函数的重载。Python是不可以进行函数重载的。下面的例子&#xff0c;虽然我们定义了三个test函数&#xff0c;但是在局部命名空间下&#xff0c;只有一个test函数&#xff0c;就是最有一个&#xff0c;也就是说最后一个test覆盖了前两个test。 …

JVM学习之路(5)垃圾回收

目录 Java垃圾回收 方法区回收 方法区的回收 堆内存回收 引用计数法和可达性分析算法 查看GC Root 五种对象引用 软引用 ​编辑 弱引用 虚引用和终结器引用 垃圾回收算法&#xff1a; 垃圾回收算法的历史和分类 垃圾回收算法的评价标准 标记清除算法 复制算法 标记整理算法 分代…

ubuntu 20.04 NVIDIA驱动、cuda、cuDNN安装

1. NVIDIA驱动 系统设置->软件和更新->附加驱动->选择NVIDIA驱动->应用更改。该界面会自动根据电脑上的GPU显示推荐的NVIDIA显卡驱动。 运行nvidia-smi: NVIDIA-SMI has failed because it couldnt communicate with the NVIDIA driver. Make sure that the lat…

Ubuntu18.04+ROS环境+moveit UR5机械臂仿真

目录 仿真环境&#xff1a; 1.下载Universal Robots机器人功能包 2.运行 Gazebo中的仿真模型 3.运行moveit运动规划 4.运行rviz并进行轨迹规划 仿真环境&#xff1a; 本文使用版本&#xff1a;Ubuntu18.04 ros版本&#xff1a;ros-melodic-desktop-full&#xff0c;安装…

C++11新特性(二)

目录 一、C11的{} 1.初始化列表 2.initializer_list 二、可变参数模版 1.语法与原理 2.包扩展 3.empalce接口 三、新的类功能 四、lambda 1.语法 2.捕捉列表 3.原理 五、句装器 1.function 2.bind 一、C11的{} 1.初始化列表 C11以后想统⼀初始化⽅式&#xff0…