一种vue2/3代码复用解决思路

前言

因为团队里同时存在vue2和vue3的项目,日常开发中经常需要在vue2下开发好,然后复制到vue3的项目里再改成对应的语法,非常麻烦且无趣。在这个背景下,我们探索了一种基于构建的代码复用方案,即:在开发时只用一种语法(最好是vue3),通过打包成两种产物提供给不同的项目消费。

解决思路

要实现上面所说的效果,我们需要解决两个问题

  1. 只用一种语法开发:我们希望可以用vue3的setup script + composition api的方式来开发。

vue2并不支持setup script,在vue2下使用这个特性,我们可以借助unplugin-vue2-script-setup来实现。

refcomputed这些API,在vue2下是从@vue/composition-api中引入,在vue3下则是直接从vue里引入。这种写法上的差异,借助vue-demi可以抹平。

  1. 搭建两条构建流水线:我们要同时在项目里安装两个版本的vue-loadervue以及对应的compiler。

安装同一个包的不同版本,我们可以使用npm/yarn alias

在打包的时候,手动注入对应的环境变量。例如在打包vue2产物时,VUE_VERSION = 2,通过process.env.VUE_VERSION来获取,这样就可以知道当前是打包哪个版本的产物从而选择对应的loader,plugin。如果不想写过多的判断逻辑也可以直接写两个配置文件,在build的时候分别指定对应文件即可

在构建工具的选择上,因为是基于vue技术栈,我们选择vite

最终实现

先新建一个空白目录

bash 复制代码
mkdir demo
cd demo
yarn init -y

安装依赖

bash 复制代码
# 安装vue的不同版本
yarn add vue2@npm:vue@2.6.14 vue3@npm:vue@3 -D

# 安装vue-demi
yarn add vue-demi -D

# 安装vite以及打包vue3/vue2需要的插件
yarn add vite @vitejs/plugin-vue@4.3.4 vite-plugin-vue2 -D

# 安装支持vue2使用setup script的插件
yarn add unplugin-vue2-script-setup -D

# 安装编译vue2需要的compiler,版本和vue版本保持一致
yarn add vue-template-compiler@2.6.14 -D

# 安装ts以及node的类型文件包
yarn add typescript @types/node@14 -D

编写vite配置,在根目录下新建vite.config.ts文件

typescript 复制代码
import { defineConfig } from 'vite'
// 编译vue2需要的插件
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
// 支持vue2 setup script语法需要的插件
import Vue2ScriptSetup from 'unplugin-vue2-script-setup/vite'
// 编译vue3需要的插件
import Vue3 from '@vitejs/plugin-vue'

const isVue2 = process.env.VUE_VERSION === '2'
const isVue3 = process.env.VUE_VERSION === '3'

console.log(`compiler target is ${isVue2 ? 'vue2' : 'vue3'}`)

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      vue: isVue2 ? 'vue2' : 'vue3',
    }
  },
  build: {
    target: 'es2015',
    outDir: isVue2 ? 'dist/vue2' : 'dist/vue3',
    lib: {
      entry: './src/build.ts',
      formats: ['es', 'cjs'],
      fileName(format, _entryName) {
        return `${format}/index.js`
      },
    },
    rollupOptions: {
      external: ['vue', '@vue/composition-api/dist/vue-composition-api.mjs'],
    }
  },
  plugins: [
    isVue2 && Vue2(),
    isVue2 && Vue2ScriptSetup({}),

    isVue3 && Vue3({
      compiler: require('vue3/compiler-sfc')
    }),
  ],
})

package.json文件里添加上对应的scripts

json 复制代码
"scripts": {
  "dev": "vue-demi-switch 3 && VUE_VERSION=3 vite",
  "build": "yarn build:vue2 && yarn build:vue3",
  "build:vue2": "vue-demi-switch 2 && VUE_VERSION=2 vite build",
  "build:vue3": "vue-demi-switch 3 && VUE_VERSION=3 vite build"
},

在终端里执行yarn build,可以看到dist目录下就生成了对应的产物了

总结

这个方案还有非常多需要完善的地方,例如生成.d.ts的类型定义文件、组件单独打包支持按需加载。而且还有一个非常致命的问题:无法使用已有的UI库,因为这类组件库通常也是针对不同的vue版本有不同的包并且组件的API也有差别,如果要使用需要一个类似vue-demi这样的胶水层来兼容。

如果大家有更好的方案请不吝赐教!

相关推荐
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
鱼樱前端8 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆10 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅11 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水12 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了12 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry13 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户261245834016114 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川15 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术16 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model