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

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

相关推荐
工程师老罗16 分钟前
Image(图像)的用法
java·前端·javascript
swipe1 小时前
把 JavaScript 原型讲透:从 `[[Prototype]]`、`prototype` 到 `constructor` 的完整心智模型
前端·javascript·面试
问道飞鱼1 小时前
【前端知识】React 组件生命周期:从底层原理到实践场景
前端·react.js·前端框架·生命周期
CHU7290352 小时前
定制专属美丽时刻:美容预约商城小程序的贴心设计
前端·小程序
浩~~2 小时前
反射型XSS注入
前端·xss
AwesomeDevin2 小时前
AI时代,我们的任务不应沉溺于与 AI 聊天,🤔 从“对话式编程”迈向“数字软件工厂”
前端·后端·架构
harrain3 小时前
antvG2折线图和区间range标记同时绘制
前端·javascript·vue.js·antv·g2
德育处主任Pro3 小时前
从重复搭建到高效生产,RollCode的H5开发新范式
前端
蜡台3 小时前
SPA(Single Page Application) Web 应用(即单页应用)架构模式 更新
前端·架构·vue·react·spa·spa更新
网络点点滴4 小时前
组件通信-作用域插槽
前端·javascript·vue.js