umi中同时使用antd-mobile v2和v5

708 阅读1分钟

1. 起因

  历史原因,最开始项目里使用的是antd-mobile:2.x,由于实在是太难用,我想要同时使用v5版本,参考官网的迁移指南,我们可以使用第一种方法:官网参考

  但是使用了之后发现antd-mobile-v2的样式没有被正确引用,通过查看umi的插件plugin-antd发现,在引用antd的时候配置了babel,引入了样式。所以我猜测是因为包名变成了antd-mobile-v2导致无法正确引入,所以我模仿这个插件重新修改了babel配置

2. 解决

2.1 在任意目录新建一个文件

// 比如我在项目根目录新建了文件
// \plugins\umi-plugin-am5-style\index.ts
import { IApi } from "umi";

// umi插件就是一个函数
export default function (api: IApi) {
  api.modifyBabelPresetOpts((opts) => {
   // 增加这个配置
    const imps = [{ libraryName: 'antd-mobile-v2', libraryDirectory: 'es', style: true }];
    return {
      ...opts,
      import: (opts.import || []).concat(imps),
    };
  });
}

2.2. 在umi配置

// .umirc.ts
export default defineConfig({
     // .....
    plugins: [require.resolve('./plugins/umi-plugin-am5-style'),
    antd: { mobile: false },
    // .....
})