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

前言

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

解决思路

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

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

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

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

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

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

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

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

最终实现

先新建一个空白目录

mkdir demo
cd demo
yarn init -y

安装依赖

# 安装vue的不同版本
yarn add vue2@npm:[email protected] vue3@npm:vue@3 -D

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

# 安装vite以及打包vue3/vue2需要的插件
yarn add vite @vitejs/[email protected] vite-plugin-vue2 -D

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

# 安装编译vue2需要的compiler，版本和vue版本保持一致
yarn add [email protected] -D

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

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

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

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

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