一种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这样的胶水层来兼容。

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

相关推荐
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
YAY_tyy2 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
m0_748461395 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
珍珠奶茶爱好者5 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy5 小时前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js
羊羊小栈6 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star7 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1837 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
不一样的少年_8 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js