npm创建项目命令，怎么看自己发布的npm模块

开发np活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看m模块说明

开发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 项目中 项目安装相关依赖: yarn add antd && yarn add babel-plugin-import配置 .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 文件中把其他的主题依赖删掉才行。

效果如下：

最后附上我的地址 npm 模块地址 : https://www.npmjs.com/package/@zlfgege/modulegithub 仓库地址：https://github.com/zlfgege/module操作文档地址：https://zlfgege.github.io/module/#/module/73649261

《npm创建项目命令，怎么看自己发布的npm模块》来自互联网同行内容，若有侵权，请联系我们删除！