dumi集成Antd（独立样式）发布npm和发布到github

需求：需要基于Antd开发业务组件，但是项目中可能也会应用于antd的基础组件，所以我们需要将自己的组件设置新的前缀名，以及不影响项目中的antd配置以及样式发布到npm仓库，最后再部署自己的组件文档。

1.根据dumi官网初始化项目，并且在antd官网下载依赖并引入样式到我们项目中

2.首先dumi初始化的项目打包其实是分为文档打包和组件打包，文档打包配置主要在.umirc.ts而npm打包配置主要在.fatherrc.ts

注入Antd Less变量

• 因为我们需要组件使用的antd样式和项目antd样式区分，所以我们修改了antd类名前缀

antd不得不承认很强大，提供了我们修改less变量，其中就有修改类名前缀，当时查看antd源码时，还纳闷为什么要把生成前缀单独拎出来封装成一个函数。具体使用方法参考antd官网全局配置文档。
因为dumi只提供了一个入口文件，但是这个入口文件是暴露我们组件的，所以我选择在每个组件最外层都会包裹ConfigProvider 标签，例如：

image.png

• 接下来我们需要在打包时注入Less变量
  1.文档打包时我们需要注入Less变量，所以在umirc.ts注入
  image.png

2.组件打包时我们需要注入Less变量，所以在fatherrc.ts注入
关键问题就在这，我们一般打包组件都会使用esm的方式进行打包，而esm使用的bundleless构建代码，而bundleless他不会同bundle一样将我们所有凡是依赖到的东西追根溯源全部打包在一起，他只会将这些引入方式放在构件好的代码里。交给浏览器去处理，这有一个很好地对比图，budleless就是快。这有介绍可以看看CJS,AMD,UMD,ESM都是什么

image.png

所以这时候我们就面临一个问题，我们想把我们注入了less变量的，也就是修改的antd类名前缀的样式进行打包。这样我们就可以在项目中引入我们组件库的样式，而不是从项目中再去注入antd的less变量，如果在项目中注入@ant-prefix的话，那么我们项目如果要使用antd的话，就会造成影响。项目中的antd样式就无法与我们组件库独立配置的antd样式进行隔离。

所以我最终解决方案是：ESM和UMD（UMD需要注入我们的less变量）都进行打包处理，项目中引入UMD打包后的样式文件，如此才可以进行项目中antd与组件库中antd样式隔离。fatherrc.ts如下图配置：

image.png

打包后文件如下图

image.png

这里有个需要优化的建议，如果是我们本身组件库应用到了第三方的依赖，需要在package.json把这些依赖放在peerDependencies，因为如果放在peerDependencies中，我们使用npm下载组件库的时候，npm会对比peerDependencies中的依赖，宿主项目的package.json如果有同样的包，那么npm就不会重复下载依赖，组件库就会直接依赖于宿主项目下载的依赖包

3.发布到github page

dumi已经集成好了，直接运行npm run docs:deploy即可build文档和在当前repo上创建gh-pages分支并且push上去。

• 首先我们需要在github上创建个repo，然后选择public。例如我的github账户名叫:lxulxu555，所以我的仓库名叫lxulxu555.github.io

  
  image.png

• 然后点击settings-pages，选择分支，以及根目录

image.png

• 然后点击actions就可以看到build的结果

  
  image.png

• 然后再次回到Settings-pages界面，访问该页面（action build成功后，需要等一会才能看到最新效果）

  
  image.png