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

Posted GitLqr

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
  ],
);

注意:

  1. 需要将 variant() 放置到插件列表最前,才能与其他插件更好的兼容。
  2. 修改 mcsCurrent 的值即可切换渠道,dev 模式下会自动重新部署。

3、源码目录

  1. src 同级目录下创建 variants/main 目录,存放项目的默认工程源码。
  2. variants 目录下创建渠道目录(如:channelAchannelB),作为各渠道差异性源码。

说明:假设工程需要上线 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/",
        ,
      ,
    ),
  ],
);

注意:

  1. mcsDefine 中定义的全局变量跟在 vite 的 define 选项中定义的效果是一样的,但是 mcsDefine 能更好的管理各个渠道各自的变量。
  2. vite-plugin-variant 会自动在 variants/main 目录下根据当前渠道的全局变量生成 variant-env.d.ts,防止 TypeScript 编译报错。

在代码中可以直接使用:

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

5、其他

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

四、Demo

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

如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号:FSA全栈行动, 这将是对我最大的激励. 公众号不仅有Android技术, 还有ios, Python等文章, 可能有你想要了解的技能知识点哦~

以上是关于vite - 多渠道差异化打包插件的主要内容,如果未能解决你的问题,请参考以下文章

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

webpack拓展篇(六十八):bundle 和 bundless 的差异

为啥这两种变体之间的速度差异如此之大?

借腾讯开源 VasDolly,谈谈 Android 签名和多渠道打包的原理!

Android工程中共主线差异化打包方案说明

手把手教你使用gradle mulchannel插件,进行多渠道打包