原因：將入口文件?轉為 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 添加全局變量名稱

注： 每一個外部依賴，都要有一個全局變量名稱。