vue | rollup 打包 | 配置 rollup.config.js 文件,更改 rollup的行为

++原因:将入口文件 转为 esm umd 两种格式,要配置 rollup++

Rollup 已内置到 vite 工具中,

命令行打包,参数多,麻烦------》解决:创建配置文件,js 写的,rollup.config.js


配置 rollup.config.js文件:

input 输入文件

output 输出文件:file 文件路径、format 格式

Rollup 运行配置 文件:npx rollup --config rollup.config.js

导出格式

exports.xxx = xxx => common.js的格式

export**{ xxx }** =>es module格式 ------》与平时写的代码无异。

如何测试导出的格式
  1. 修改导入文件,用于测试导出格式

  2. 运行代码 npx rollup --config rollup.config.js

**3. ①配置格式 cjs,**exports.xxx = xxx => common.js的格式

②配置 es module格式,

export{ xxx } => es module格式 ------》与平时写的代码无异。


使用插件,打包过程中 更改 rollup 的行为------》使用 rollup 官方插件,在 rollup.config.js 中配置

复杂项目要灵活处理,有时直接处理 会报错。

可以使用插件,在打包的关键过程中 更改 rollup的行为

Rollup 官方支持的插件

例子:官方的 json 插件,支持将 json 文件转为 es6 modules

安装:npm install @rollup/plugin-json --save-dev

使用:在配置文件中 rollup.config.js中 配置。

如 json:添加 import json from '@rollup/plugin-json';,并添加插件**plugins:[ json() ]**选项。

示范:测试,读取 json 文件中的 version字段

导出的文件,成功取到version字段


vite 创建生产版本:1. 库模式 2. 自定义构建

库模式构建:vite.config.js 文件下 -> build选项-> lib 选项 -> ++entry++++入口文件、name 暴露的全局变量、fileName 包文件名、formats 格式++

配置完成后,重新运行npm run build-only


自定义构建:vite.config.js -> build选项 -> rollupOptions 选项

不打包的依赖:处理不想打包进库的依赖

问题: 打包文件过大

解决:将部分不需要用的依赖摘出去,如vue

步骤:vite.config.ts ->build 选项 -> 添加rollupOptions选项 ->external: [' 要排除在外的依赖 ']

例子:不打包 vue 依赖,重新运行:npm run build-only,打包体积显著减少。


报错:output.exports: "named"output.globals 全局变量名称------》解决:在++vite.config.ts++ ++文件中,++ ++build++ ++下++ ++配置++ ++rollupOptions选项++ ++,里头添加++ ++output字段++ ++,进行exports 和 globals 的配置。++

步骤:vite.config.ts ->build 选项 -> 添加rollupOptions选项 ->output选项 -> 添加 exports 表示既有具名导出也有默认导出,globals 给 vue 添加全局变量名称

注: 每一个外部依赖,都要有一个全局变量名称。

相关推荐
前端小巷子1 分钟前
跨标签页通信(五):IndexedDB
前端·面试·浏览器
LaoZhangAI2 分钟前
2025全面评测:Flux AI图像生成器6大模型全解析【专业测评】
前端·后端
PioneerWang3 分钟前
useContext及其原理解析
前端
用户7161912821765 分钟前
告别繁琐的路由配置:vite-plugin-convention-routes 让你的 Vue 项目更优雅
前端
小桥风满袖5 分钟前
Three.js-硬要自学系列34之专项学习几何体
前端·css·three.js
今阳6 分钟前
鸿蒙开发笔记-17-ArkTS并发
android·前端·harmonyos
BUG收容所所长7 分钟前
深入理解 AJAX,从 XMLHttpRequest 到现代 Fetch API
前端·javascript·ajax
Sun_light10 分钟前
「一文看懂 JS 深浅拷贝,彻底告别面试踩坑!」
前端·javascript
YG90811 分钟前
微信小程序页面传参乱码问题如何解决?
前端·javascript
用户75794199497012 分钟前
Vue+Vite项目中图片路径解析问题总结
前端