rollup3.x+vue2打包組件的實(shí)現(xiàn)
更新時(shí)間：2023年03月22日 09:05:20 作者：知了清語
本文主要介紹了rollup3.x+vue2打包組件的實(shí)現(xiàn)，詳細(xì)的介紹了打包會存在的問題，包版本的問題，babel 轉(zhuǎn)換jsx等問題，具有一定的參考價(jià)值，感興趣的可以了解一下
vue2 和vue3 在 rollup 里面打包會存在幾種問題， 包版本的問題，babel 轉(zhuǎn)換jsx等問題
將vue2寫的組件 打成一個(gè)包，需要解決如下幾個(gè)問題
- 支持jsx
- 支持less, sass
- 導(dǎo)出多種格式的包 ES Module umd 等
先梳理完成功能所需要的最小的包清單，以及包之間的依賴關(guān)系
包的依賴關(guān)系
- 轉(zhuǎn)換css 需要使用rollup-plugin-postcss 插件 --> 需要安裝 postcss
- vue 和 vue-template-compiler 的版本需要一致， 這里是vue 2.7;
- vue2: 使用rollup-plugin-vue @5.x版本
- rollup3.x + vue3版本需要使用 rollup-plugin-vue @6.x版本 + @vue/compiler-sfc
- jsx的支持就需要下面2個(gè)包； 這2個(gè)包需要傳遞給 babel， 因此需要安裝 @rollup/plugin-babel （這里版本說明在下面）
- @vue/babel-helper-vue-jsx-merge-props ^1.4.0
- @vue/babel-preset-jsx ^1.4.0
@rollup/plugin-babel 版本說明
5.2.1 配置babel的寫法
rollup.config.js
import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'
export default defineConfig({
input: './src/index.js',
output: [
{
file: 'lib/index.esm.js',
format: 'esm',
exports: 'named'
},
{
file: 'lib/index.umd.js',
format: 'umd',
name: 'w'
}
],
plugins: [
cleandir('lib'),
vue({}),
babel({
exclude: 'node_modules/**',
presets: ['@vue/babel-preset-jsx'],
// bundled-需要顯示指明babelHelpers 配置， 沒配置，控制臺有一些warning
babelHelpers: 'bundled',
// 5.2.1 是可以不用配置 extensions
// 5.2.2 以后 需要將 vue配置進(jìn)去
// extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
}),
// 需要處理vue中的css
postcss()
],
external: [
"Vue"
]
})
6.0.3 配置jsx的寫法
@rollup/plugin-babel 6.x 版本也可以用上面的語法，主要就是 extensions 中有 .vue
rollup.config.js
import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'
export default defineConfig({
input: './src/index.js',
output: [
{
file: 'lib/index.esm.js',
format: 'esm',
exports: 'named'
},
{
file: 'lib/index.umd.js',
format: 'umd',
name: 'w'
}
],
plugins: [
cleandir('lib'),
vue({
}),
babel({
// @rollup/plugin-babel 6.0.3 如果使用 filter 就注釋掉 exclude - 互斥的
// exclude: 'node_modules/**',
presets: ['@vue/babel-preset-jsx'],
// 需要顯示指明babelHelpers 配置， 沒配置，控制臺有一些warning
babelHelpers: 'bundled',
// 5.2.1 是不需要配置 extensions 的
// 5.2.2 以后 需要將 vue配置進(jìn)去
extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
// filter @rollup/plugin-babel 在 5.3.0 版本才有
// filter配置和 exclude 配置是互斥的，需要自己去實(shí)現(xiàn)去掉 node_modules的過濾
filter: id=>{
return /(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id) && !/node_modules/.test(id)
}
}),
// 處理 vue中的 css
postcss()
],
external: [
"Vue"
]
})
6.0.3 package.json清單
{
"name": "chapter-08",
"version": "1.0.0",
"description": "",
"main": "lib/index.js",
"module": "lib/index.esm.js",
"type": "module",
"scripts": {
"build": "rollup -c"
},
"devDependencies": {
"@babel/core": "^7.21.3",
"@rollup/plugin-babel": "^6.0.3",
"@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
"@vue/babel-preset-jsx": "^1.4.0",
"postcss": "^8.4.21",
"rollup": "^3.20.0",
"rollup-plugin-cleandir": "^2.0.0",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-vue": "^5.1.9",
"vue": "2.7.10",
"vue-template-compiler": "2.7.10"
}
}
這里列舉了所有的包的版本， package.json已經(jīng)剔除了 其他非必要的字段
注意：package.json中的 type 是 module ； 也就是說， 語法需要遵循 ES Module
問題：
1、jsx語法無法識別， 按照上面的配置去調(diào)整即可
2、vue中 樣式無法被轉(zhuǎn)換，直接使用postcss轉(zhuǎn)換即可
如果已經(jīng)開始實(shí)踐使用vite打包 vue組件庫，建議直接上 vite + vue 3.x ， vite的生態(tài)已經(jīng)足夠幫你解決一些棘手的問題，避免自己逐一從 rollup 起手。
最后
網(wǎng)上很多文章，告訴你如何配置 rollup , 一次性下載很多包，雖然模仿著做了，但是，可能依舊會報(bào)錯(cuò)；
本次從包的關(guān)聯(lián)關(guān)系，包的版本說明，以及出現(xiàn)問題如何解決，記錄一次 rollup 配置 vue 打包實(shí)踐。
到此這篇關(guān)于rollup3.x+vue2打包組件的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)rollup3.x vue2打包組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了element-ui 本地化使用教程詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue3中watch如何停止監(jiān)視,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
vue的template模板是如何轉(zhuǎn)為render函數(shù)的過程
Vue從template到render函數(shù)的轉(zhuǎn)換經(jīng)歷模板解析、AST構(gòu)建、優(yōu)化、生成渲染函數(shù)等步驟,首先進(jìn)行詞法分析將模板拆解為tokens,再進(jìn)行語法分析構(gòu)建AST,然后對AST進(jìn)行靜態(tài)標(biāo)記和提升優(yōu)化,最后轉(zhuǎn)換成JavaScript渲染函數(shù),生成虛擬DOM,完成組件的渲染和更新,實(shí)現(xiàn)了模板的高效轉(zhuǎn)化2024-10-10
Vue+ElementUI創(chuàng)建一個(gè)帶有進(jìn)度顯示的文件下載和打包組件功能
如何使用 Vue 創(chuàng)建一個(gè)帶有進(jìn)度顯示和打包功能的文件下載組件,我們探討了如何導(dǎo)入必要的包,構(gòu)建組件的基礎(chǔ)結(jié)構(gòu),實(shí)現(xiàn)文件下載與進(jìn)度顯示,以及如何將文件打包為 ZIP 格式供用戶下載2024-08-08
這篇文章主要為大家介紹了vue3數(shù)組或?qū)ο筚x值不更新解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)
這篇文章主要介紹了Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)，每種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼
本篇文章主要介紹了vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家介紹了Vue3源碼分析調(diào)度器與watch用法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01