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 添加全局变量名称

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

相关推荐
逾明27 分钟前
Electron自定义菜单栏及Mac最大化无效的问题解决
前端·electron
辰九九32 分钟前
Uncaught URIError: URI malformed 报错如何解决?
前端·javascript·浏览器
月亮慢慢圆32 分钟前
Echarts的基本使用(待更新)
前端
芜青1 小时前
实现文字在块元素中水平/垂直居中详解
前端·css·css3
useCallback1 小时前
Elpis全栈项目总结
前端
小高0071 小时前
React useMemo 深度指南:原理、误区、实战与 2025 最佳实践
前端·javascript·react.js
LuckySusu1 小时前
【js篇】深入理解类数组对象及其转换为数组的多种方法
前端·javascript
LuckySusu1 小时前
【js篇】数组遍历的方法大全:前端开发中的高效迭代
前端·javascript
LuckySusu1 小时前
【js篇】for...in与 for...of 的区别:前端开发中的迭代器选择
前端·javascript
mon_star°1 小时前
有趣的 npm 库 · json-server
前端·npm·json