不用vux-loader，无侵入性的使用vux

[forzgc]

背景

最近想在一个使用vux+vuecli4的的旧项目中集成unocss，结果发现unocss在webpack4下有些问题，只能升级webpack5解决。在升级的webpack和相关依赖的过程中，webpack报了一个即将废除的api的警告，排查发现是vux-loader用到，不过对使用vux没什么影响，依然是可以正常使用vux的。但是在这个过程中发现vux-loader的逻辑实在是复杂，作为一个组件库侵入性太大了。然后看了下vux的组件源代码都挺规范的，想着能否去掉vux-loader，将vux变成一个与打包工具无关无侵入性的组件库。

分析

vux组件需要用到vux-loader的一些原因是组件使用了vue没有的能力，主要是i18n。这需要借助vux-loader在构建的过程进行处理，将其变成一个正常的vue组件。恰好我的项目不需要国际化，如果需要用到也可以使用真正的vue-i18n来实现，也就是可以去掉组件中i18n的代码，恰好拥有i18n代码的组件并不多，改起来并不麻烦。那么去掉这部分代码后，vux基本就可以直接使用了。

补丁

这种削减功能的修改不可能合并进vux的代码里。所以只能在本地使用，不过可以借助patch-package库给vux打补丁的方式将修改在自己的项目固定下来，patch-package的用法大家可以自己了解下。

修改组件源码

1. 去除i18n代码：i18n代码包括 <i18n>块和$t函数， <i18n>块是locale配置。修改方式是将$t('xxx')，换成 <i18n>块中对应的文本，全部替换后删除<i18n>块。大概有十几个组件。
2. 去除vux-loader注入的变量判断逻辑，主要是 V_LOCALE、V_SSR、SUPPORT_SSR_TAG，当然也可以通过打包工具注入这三个变量，这里我都用不到，所以就用了简单粗暴的方式直接去掉。
3. 去除 index.js 中的 console.warn
4. 在vux的package.json中添加 "sideEffects": false ，实现webpack Tree Shaking

生成补丁文件，也可以使用我修改的

npx patch-package --exclude='nothing' vux

vux+2.11.1.patch

应用补丁文件

在自己项目的package.json的scripts里添加

"postinstall": "patch-package"

主题颜色配置

https://doc.vux.li/zh-CN/development/theme.html
原本是通过vux-loader读取less文件配置less loader实现的，这个可以在vue.config.js中使用lessOptions实现（less-loader@6）

vue.config.js

css: {
      loaderOptions: {
        less: {
          lessOptions: {
            modifyVars: {
             // 这里自定义
            },
          },
        },
      },

完成

没有vux-loader之后，理论上vux也可以在vite中使用了，不过我没试，有需要的可以自己试试

[wiphone-wu]

你好，你是fork一份vux，然后去除里面的vux-loader依赖？还是在你的vux+vuecli4旧项目里去除vux-loader依赖？

[forzgc]

@wiphone-wu
我是在旧项目中去除了vux-loader，然后最近升级到了vite + vue2.7，目前vux使用没问题