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

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

相关推荐
JarvanMo3 分钟前
深度解析:如何彻底终结 Flutter 异步操作中的 BuildContext 崩溃?
前端
wxr06168 分钟前
部署Spring Boot项目+mysql并允许前端本地访问
前端·spring boot·mysql·持续部署
假装我不帅14 分钟前
jquery-validation使用
前端·javascript·jquery
怕浪猫19 分钟前
React从入门到出门第六章 事件代理机制与原生事件协同
前端·javascript·react.js
天府之绝22 分钟前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
be or not to be24 分钟前
Html-CSS动画
前端·css·html
初恋叫萱萱29 分钟前
技术基石与职场进阶:构建从Web后端到高性能架构的完整知识图谱
前端·架构·知识图谱
木木木一33 分钟前
Rust学习记录--C9 错误处理
前端·学习·rust
局外人LZ34 分钟前
libsodium.js:web端与 Node.js 的现代加密工具集,构建前端安全加密体系
前端·javascript·node.js
xkxnq40 分钟前
第二阶段:Vue 组件化开发(第 20天)
前端·javascript·vue.js