Vue如何解決元件相容Vue2和Vue3?

vipbic發表於2023-02-16
Vue元件
為何需要解決此類問題，在於公司的專案業務需要，以及前端技術驅動向前推進 ，需要使用Vue3開發新的元件庫，需要相容Vue2的產品(公司現階段Vue2產品為主)

vue-demi

Vue Demi（法語的一半）是一個開發實用程式，允許您為 Vue 2 和 3 編寫通用 Vue 庫，作者也是Vue開發核心人物之一

如何搭建一個Vue2/3的元件相容庫?

1.安裝一個Vue3的專案

這裡我選用的vite安裝

npm create vite@latest pm-ui-coms --template vue

安裝完成，進入目錄pm-ui-coms

npm i vue-demi -S

修改package.json檔案,檔案以下內容

{
    "publishConfig": {
        "registry": "http://192.168.1.200:8081/repository/npm-private/"
    }
}
publishConfig
釋出使用的配置

2.安裝一個Vue2的專案

vue create vue2

安裝完成，進入目錄vue2

npm i vue-demi -S

修改package.json檔案,檔案以下內容

{
    "peerDependencies": {
        "@vue/composition-api": "^1.7.1",
        "vue": "^2.6.14 || >=3.2.47"
    },
    "peerDependenciesMeta": {
        "@vue/composition-api": {
            "optional": true
        }
    }
}

在vue2以上操作完成後，如果失敗，需要重新npm install

檢驗是否安裝完成，執行此命令，如果顯示一切換到Vue2，說明成功
npx vue-demi-switch 2
peerDependencies

沒寫過npm外掛包的同學可能會有點陌生

peerDependencies的目的是提示宿主環境去安裝滿足外掛peerDependencies所指定依賴的包，然後在外掛import或者require所依賴的包的時候，永遠都是引用宿主環境統一安裝的npm包，最終解決外掛與所依賴包不一致的問題
peerDependenciesMeta
新增可選設定以消除丟失的對等依賴性警告

新增構建命令

{
    "scripts": {
        "lib": "vite build --mode lib",
        "gulp": "gulp lib"
    }
}
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import pmVueLib2 from './plugins/pmVueLib2' // 我自己寫的自動化構建+上傳
import path from 'path'; // node外掛，不用安裝一般自帶這個包

export default defineConfig({
    plugins: [vue(), pmVueLib2({versionType: 'patch'})],
    optimizeDeps: {
        exclude: ['vue-demi'] // vue-demi 如果是vite需要新增此配置
    },
    build: {
        outDir: 'lib', // 輸出的目錄
        lib: {
            entry: path.resolve(__dirname, './src/packages/install.js'), // 入口檔案
            name: 'PmUiComps', // 在瀏覽器umd模式下輸出的全域性變數
            fileName: (format) => `v3.${format}.js`, // 由formats決定輸出的檔案字尾名
            formats: ['es', 'umd'], // 輸出ES Module 和 umd
        },
        rollupOptions: {
            // 確保外部化處理那些你不想打包進庫的依賴
            external: ['vue', 'vue-demi'],
            output: {
                // 在 UMD 構建模式下為這些外部化的依賴提供一個全域性變數
                globals: {
                    vue: 'Vue',
                    "vue-demi": 'VueDemi'
                }
            }
        }
    }
})
pmVueLib2外掛

為了方便快速上傳打包，寫了一個vite外掛

const exec = require('child_process').exec; // 執行node命令，可以指定目錄
const shell = require("shelljs");  // 執行檔案操作
const chalk = require('chalk'); // 顯示彩色文字
const ora = require('ora') // 命令列loading
const pmVueLib2 = (options) => {
    // patch minor major
    const _options = Object.assign({versionType: 'patch'}, options)
    console.log(chalk.green(`?   構建vue3庫成功`))
    return {
        name: 'pmVueLib2', // 必須的，將會在 warning 和 error 中顯示
        buildEnd() {
            const spinner = ora('?   開始構建vue2庫...').start();
            exec('npm run lib', {cwd: './vue2'}, (err, stdout, stderr) => {
                if (err) {
                    console.warn(new Date(), '構建vue2庫失敗');
                } else {
                    spinner.color = 'green'
                    spinner.text = '構建vue2庫成功'
                    console.log(chalk.green(`?   構建vue2庫成功`))
                    exec('npm run gulp', {}, (err) => {
                        if (!err) {
                            shell.exec('git add .')
                            shell.exec(`git commit -m msg:自動更新元件庫`)
                            shell.exec(`git push`)
                            exec(`npm version ${_options.versionType}`, {}, (err) => {
                                if (!err) {
                                    exec('npm publish', {}, () => {
                                        spinner.color = 'yellow'
                                        spinner.text = '構建完畢，元件庫已成功上傳npm倉庫'
                                        console.log(chalk.green(`?   構建完畢，元件庫已成功上傳npm倉庫`))
                                    })
                                } else {
                                    console.log(err)
                                }
                                spinner.stop();
                            })
                        }
                    })
                }
            });
        }
    }
}
export default pmVueLib2;

元件位置

統一將元件放在common檔案下

構建庫

npm run lib

github地址

使用此倉庫開發

1.下載此專案程式碼, 在根目錄執行

npm install

2.進入vue2目錄,然後執行

npm install

3.在根目錄執行

npm run lib

相關文章