vite - 多渠道差异化打包插件

欢迎关注微信公众号：[FSA全栈行动 👋]

为了让 vite 项目支持多渠道差异化打包（如同 Android 工程变体），我做了一个 vite 插件：

# 一、简介

vite-plugin-variant 是一个管理多渠道差异化源码的 vite 插件，与其他 vite 插件不同，vite-plugin-variant 的原理是从多渠道源码目录中过滤出当前渠道的所有源码文件，然后对 src 目录进行更新，即从多渠道源码(MCS)到当前渠道源码(FCS)的过程，而不再是基于 src 目录做文章，所以与其他 vite 插件可以很好的兼容。

MCS：多渠道源码（multi-channel src）
FCS：最终渠道源码（final channel src）

# 二、特性

支持添加、删除、更新文件即时生效（HMR）
支持动态切换渠道
支持定义多渠道全局变量
支持各种 vite 工程（包括 uniapp）

# 三、使用

# 1、安装

npm i vite-plugin-variant -D

# 2、配置

在 vite.config.ts 中添加配置：

import variant from "vite-plugin-variant";

export default defineConfig({
  plugins: [
    variant({
      mcsCurrent: "channelA", // 当前渠道
      mcsDefine: {
        channelA: {}, // 渠道A 的全局变量 ....
        channelB: {}, // 渠道B 的全局变量 ....
      },
    }),
    // other plugins
  ],
});

注意：

需要将 variant() 放置到插件列表最前，才能与其他插件更好的兼容。

修改 mcsCurrent 的值即可切换渠道，dev 模式下会自动重新部署。

# 3、源码目录

在 src 同级目录下创建 variants/main 目录，存放项目的默认工程源码。
在 variants 目录下创建渠道目录（如：channelA、channelB），作为各渠道差异性源码。

说明：假设工程需要上线 2 个不同的渠道，分别是华为和小米，它们各自显示的 logo 图片不同，那么可以在各自的渠道目录下放置各自的 logo 图片，如果有一个渠道没有放置 logo 图片，则使用 main 目录下默认的 logo 图片，其他源码文件同理。

# 4、全局变量

在 vite.config.ts 中配置各渠道的全局变量：

export default defineConfig({
  plugins: [
    variant({
      mcsCurrent: "huawei",
      mcsDefine: {
        xiaomi: {
          WEBSITE: "https://www.mi.com/",
        },
        huawei: {
          WEBSITE: "https://www.huawei.com/",
        },
      },
    }),
  ],
});

注意：

mcsDefine 中定义的全局变量跟在 vite 的 define 选项中定义的效果是一样的，但是 mcsDefine 能更好的管理各个渠道各自的变量。

vite-plugin-variant 会自动在 variants/main 目录下根据当前渠道的全局变量生成 variant-env.d.ts，防止 TypeScript 编译报错。

在代码中可以直接使用：

import { ref } from "vue";
const flavor = ref(FLAVOR);
const website = ref(WEBSITE);

# 5、其他

因为多渠道源码都在 variants 目录下，而 src 作为 vite-plugin-variant 的输出目录，其下文件会随时变化，故建议在 .gitignore 文件中将 src 目录忽略。
vite-plugin-variant 会自动在 tsconfig.json 的 include 选项中插入必要的规则，避免 variants 目录下代码不被 TypeScript 识别从而提示报错。

# 四、Demo

vite-plugin-variant 提供了 2 个简单 Demo 为开发者提供参考：

#vite #plugin #variant #vite-plugin-variant #多渠道 #差异化 #变体

← uniapp - tensorflowjs 之小程序环境集成 vue - Vue2兼容低版本浏览器→