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

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

相关推荐
@小红花23 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵26 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲40 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年44 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html