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)錯；
本次從包的關(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)文章
vue使用openlayers實(shí)現(xiàn)移動點(diǎn)動畫
這篇文章主要為大家詳細(xì)介紹了vue使用openlayers實(shí)現(xiàn)移動點(diǎn)動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下2023-11-11
VSCode創(chuàng)建Vue項(xiàng)目的完整步驟教程
Vue是一個(gè)輕量級、漸進(jìn)式的Javascript框架,如果想要要開發(fā)全新的Vue項(xiàng)目,建議項(xiàng)目構(gòu)建工具vue-cli,下面這篇文章主要給大家介紹了關(guān)于VSCode創(chuàng)建Vue項(xiàng)目的完整步驟,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue項(xiàng)目識別不到@別名問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對數(shù)據(jù)的修改不會立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了簡易vuex4核心原理及實(shí)現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue.js分頁組件實(shí)現(xiàn)：diVuePagination的使用詳解
這篇文章主要介紹了Vue.js分頁組件實(shí)現(xiàn)：diVuePagination的使用詳解,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了解決Vue @submit 提交后不刷新頁面問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了Vue.js中的v-on(事件處理)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue 虛擬DOM的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10