开发npm 模块实践开发及使用dumi的坑记录一下

开发npm模块说明

开发npm 模块走了很多弯路这边,自行搭建项目模版，编辑，打包，项目体积大，使用模块多，不易于扩展和维护，开发所需的学习成本太高

后期发现 dumi 组件开发场景而生的文档工具（建议先看一下dumi官网的文档有一定的了解在看本教程）

贴上官网文档地址

通过官网的 npx @umijs/create-dumi-lib 初始化一个项目之后发现了几个坑记录一下

1.标题按照官网示例操作 vscode 提示找不到正在开发的组件类型

解决方法 1.查看项目中的 package.json 文件 typings 属性路径指向的 index.d.ts是否存在 2.如果没存在需要执行 npm run build 命令 重新编译一下 （有点恶心 ） 3.如果存在了还提示错误 那就是vscode 的问题就需要关掉重新开一下vscode 红色的提示就没了

2.把文档部署到 github 的静态页面，托管上去你的网页

执行 npm run deploy （打包文档） 该命令会创建名称为 docs-dist 的文件夹 ，这是文档的编译出来的静态文件（不包括npm模块代码） 同时创建名为 gh-pages 的远程分支，用于 github 或前台平台部署静态文档网页（该功能是封装 npm 模块 gh-pages ） 进入github 仓库 => 设置 => Pages =>Source 选择托管页面为 gh-pages分支的root 存在示例如下

注意点：

如果出现页面打开空白，控制台提示css/js 文件404 这时需要做以下配置 .umirc.ts 文件 设置 history 为hash 哈希路由 ， 同时设置base，publicPath 属性 为项目部署地址相对路径 也是 https://zlfgege.github.io/module/ 路由去掉协议和域名的地址 /module/ 这需要根据你的部署地址修改

3.安装 antd 到 dumi 项目中

1. 项目安装相关依赖: yarn add antd && yarn add babel-plugin-import
2. 配置 .fatherrc.ts 文件 extraBabelPlugins属性如下图

export default {
          
   
  esm: rollup,
  cjs: rollup, 
  extraBabelPlugins: [
    [babel-plugin-import, {
          
   
      libraryName: antd,
      libraryDirectory: es,
      style: true,
    }],
  ],
};

4.打包当前开发的模块并发布到npm

先登录npm 官网注册一个账号 （如果你不会建议先百度查一下如何发布npm 包） 执行 npm run build 命令 （dist 是打出来的包） 这时候你需要执行 release 命令 ，release 命令我做了一点修改，你需要安装 standard-version 包 standard-version 用于管理当前版本

使用图上的release 命令覆盖掉原来的release命令

该命令做了3件事情 1.打包项目：npm run build 2.更新项目版本号：npx standard-version 3.发布项目到npm 上 ： npm publish --access public 只要执行：npm run release 就可以自动更新版本号并上传到npm 模块

总结 1.更新项目文档命令 ：npm run deploy 2.更新项目到npm 上 ：npm run release

4. dumi 主题切换

在官网文档中发现了 移动端主题 dumi-theme-mobile 但是找不到切换方法

1.项目安装主题: yarn add dumi-theme-mobile 2.删除 package.json 文件中 dumi-theme-alita 默认主题 如何重新启动就好了

dumi 的开发人员说只要主题就好了 他项目会自动找到并配置上，安装了还不行,你需要到 package.json 文件中把其他的主题依赖删掉才行。

效果如下：

最后附上我的地址

1. npm 模块地址 :
2. github 仓库地址：
3. 操作文档地址：