在 cra 等非 umi 项目中使用 dumi2

dumi 是一个基于 Umi 的静态站点框架,可以快速编写组件文档和 Demo。如果项目是使用 Umi 搭建的,使用 dumi 非常简单,只需要安装 dumi 并在 src 目录下创建 .md 文件即可。但如果项目是使用 cra (create-react-app) 或其他技术栈搭建的,就需要做一些额外的配置。本文将介绍如何在 cra 等非 umi 项目中使用 dumi。

1. 安装模块

yarn add dumi cross-env -D

2. 增加启动命令,修改 package.json

"scripts": {
  "dumi": "cross-env APP_ROOT=dumi dumi dev",
  "dumi-build": "cross-env APP_ROOT=dumi dumi build"
},

3. 增加配置,新建 .dumirc

export default {
  chainWebpack(memo) {
    memo.plugins.delete('copy');
  },
};

4. 新建文档目录 dumi/docs/,这里的 dumi 目录即第二步中配置的环境变量,你可以随意同步修改。

5. 新建文档 dumi/docs/index.md

# 这是一个 Dumi 结合 create-react-app 的 Demo

6. 将 dumi 的临时文件添加到 .gitignore 中

.dumi

7. 启动文档

现在你可以运行 yarn dumi 命令来启动文档,访问 http://localhost:8000/ 即可查看。如果想要构建文档并部署到 GitHub Pages 或其他平台,你可以运行 yarn dumi-build 命令来生成静态文件,并根据部署平台的要求进行相应的配置。

通过上面的步骤,就可以在 cra 等非 umi 项目中使用 dumi 来编写和调试组件文档了。

当然,这只是一个基本的入门教程,dumi 还有很多强大的功能和特性等待你去探索和利用。如果你想了解更多关于 dumi 的信息,可以访问它的官方网站 https://d.umijs.org/ 。

未经允许不得转载:Web前端开发资源网 » 在 cra 等非 umi 项目中使用 dumi2

推荐阅读:

百度站长平台https站点提交sitemap显示“抓取失败”的解决方法

HTML引入文件的绝对路径、相对路径、根目录

CSS中的background属性与margin和padding内外边距的关系总结

input[type=file]去掉“未选择任何文件”及样式改进

分享一些实用的Chrome DevTools技巧

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)