在 cra 等非 umi 项目中使用 dumi2

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

​

1. 安装模块

代码语言：javascript复制

yarn add dumi cross-env -D

1. 增加启动命令，修改 package.json。

代码语言：javascript复制

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

1. 增加配置，新建 .dumirc。

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

.dumi

1. 启动文档

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

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

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

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

umi 部署 框架 配置 同步

0 人点赞