一箭双雕，玩转Vue开发新姿势

2023-10-23 22:18:10

使用构建方案实现 Vue2 和 Vue3 的代码复用

前言

在当今前端开发领域，Vue 凭借其轻量级和易于上手的特点，深受开发者喜爱。然而，随着 Vue 的不断更新迭代，同时存在 Vue2 和 Vue3 两个版本，给开发者带来了一定的挑战。为了解决同时维护两个版本代码带来的费时、费力且易出错的问题，本文介绍一种通过构建的方式实现一套代码生成 Vue2/3 两种产物的代码复用方案。

方案介绍

构建工具选择

构建工具是方案实施的关键，在主流构建工具 Webpack 和 Rollup 中，我们推荐使用功能强大的 Webpack。它支持各种插件，可满足不同场景的构建需求。

打包工具选择

在打包工具方面，我们推荐使用 Babel，它能将最新版本的 JavaScript 代码编译成兼容旧浏览器的代码，并支持多种语法和特性。

具体步骤

安装必要工具和依赖。
创建 Webpack 配置文件。
创建 Rollup 配置文件。
运行构建命令。
将构建产物复制到 Vue2 和 Vue3 项目中。
在 Vue2 和 Vue3 项目中使用构建产物。

示例代码

// Webpack 配置文件
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

// Rollup 配置文件
module.exports = {
  input: './src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
};

// Vue2 中使用构建产物
import Vue from '@vue/runtime-dom'
import { reactive } from '@vue/reactivity'

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

// Vue3 中使用构建产物
import { createApp } from '@vue/runtime-core'
import { reactive } from '@vue/reactivity'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')