请问有方法在已有项目中添加 dumi 嘛？ #161

phyzess · 2020-04-28T06:23:29Z

Question

看文档都是用脚手架新起一个项目，如果想要在一个已有项目中引入dumi 来进行项目文档的编写和生成应该怎么做？

项目未使用 umi

xiaohuoni · 2020-04-28T06:50:52Z

这里应该有手动初始化 https://d.umijs.org/guide/getting-started#%E6%89%8B%E5%8A%A8%E5%88%9D%E5%A7%8B%E5%8C%96

phyzess · 2020-04-28T07:56:41Z

我尝试过这个文档里面的 npm i dumi -D，packages.json 里配置了script， "dumi:dev: dumi dev"，然后在根目录下新建了 docs/index.md
但是跑起来以后是一个空白页面

xiaohuoni · 2020-04-28T09:20:38Z

package.json

{
  "name": "dumi-demo",
  "scripts": {
    "dev": "dumi dev"
  },
  "dependencies": {
    "dumi": "^1.0.20"
  }
}

docs/index.md

# 这是什么？

<div style="font-size:50px">Dumi</div>

xiaohuoni · 2020-04-28T09:21:23Z

@phyzess cc

phyzess · 2020-04-28T10:02:40Z

@xiaohuoni 那可能是我项目里面有什么问题？

dev跑起来以后 .umi 下面的目录与脚手架在空目录下起的相比，缺少了一些文件夹

xiaohuoni · 2020-04-30T03:59:41Z

需要等待PR合并，发新版本。#163 可以参考这个

如何在cra等非 umi 项目中使用 dumi？

安装模块。

yarn add dumi cross-env -D

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

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

增加配置，新建 config/config.js。

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

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

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

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

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

.umi

主要是 cross-env APP_ROOT=dumi 把 dumi 的默认目录和项目的 src 隔离开来。

GloriaCHL · 2020-05-06T09:53:43Z

需要等待PR合并，发新版本。#163 可以参考这个

如何在cra等非 umi 项目中使用 dumi？

安装模块。
yarn add dumi cross-env -D
增加启动命令，修改 package.json。
  "scripts": {
    "dumi": "cross-env APP_ROOT=dumi dumi dev",
    "dumi-build": "cross-env APP_ROOT=dumi dumi build"
  },
增加配置，新建 config/config.js。
export default {
    chainWebpack(memo) {
        memo.plugins.delete('copy');
    },
}
新建文档目录 dumi/docs/，这里的 dumi 目录即第二步中配置的环境变量，你可以随意同步修改。

新建文档 dumi/docs/index.md。
# 这是一个 Dumi 结合 create-react-app 的 Demo
将 dumi 的临时文件添加到 .gitignore 中。
.umi
主要是 cross-env APP_ROOT=dumi 把 dumi 的默认目录和项目的 src 隔离开来。

请问用 antd pro 4 初始化的项目也需要这样配置吗？找了圈好像没有相关的使用说明

zhaoyao91 · 2020-05-06T16:43:25Z

需要等待PR合并，发新版本。#163 可以参考这个

如何在cra等非 umi 项目中使用 dumi？

安装模块。
yarn add dumi cross-env -D
增加启动命令，修改 package.json。
  "scripts": {
    "dumi": "cross-env APP_ROOT=dumi dumi dev",
    "dumi-build": "cross-env APP_ROOT=dumi dumi build"
  },
增加配置，新建 config/config.js。
export default {
    chainWebpack(memo) {
        memo.plugins.delete('copy');
    },
}
新建文档目录 dumi/docs/，这里的 dumi 目录即第二步中配置的环境变量，你可以随意同步修改。

新建文档 dumi/docs/index.md。
# 这是一个 Dumi 结合 create-react-app 的 Demo
将 dumi 的临时文件添加到 .gitignore 中。
.umi
主要是 cross-env APP_ROOT=dumi 把 dumi 的默认目录和项目的 src 隔离开来。

这样配置之后，无法引用 src 中的组件

xiaohuoni · 2020-05-07T01:21:41Z

@GloriaCHL umi的项目就不用了吧？这么做是为了规避public中有一个index.html文件，会覆盖产物。pro 初始化的项目，不太理解你的使用场景。

xiaohuoni · 2020-05-07T01:23:07Z

@zhaoyao91 是 @ 别名引用的方式应该不行，你可以在config里面配置一个别名。如果还不行，可以另开一个issues。需要再定位一下。可能是 umi 的问题了。

GloriaCHL · 2020-05-07T02:05:57Z

@GloriaCHL umi的项目就不用了吧？这么做是为了规避public中有一个index.html文件，会覆盖产物。pro 初始化的项目，不太理解你的使用场景。

就是我的项目是从 ant design pro 开始的意思。想弄个组件管理平台，之前考虑storybook，不过发现生态不同太难了，然后就看到umi有对应的dumi，就想说在ant design pro 4的项目里加个dumi做组件管理。

可以给个在 ant design pro 使用的方案吗？按你上面那个cra的方案是可以运行的，但有上面那位兄台@zhaoyao91 的问题，不能别名，只能绝对路径。所以觉得不是很优雅。

xiaohuoni · 2020-05-07T02:35:14Z

应该可以使用别名的吧？只是不能使用内置的 @,因为内置的 @ 对应的是src，使用 APP_ROOT=dumi 之后，可能就是 dumi/src，但是你期望的应该是上一层的 src 。可以尝试一下添加一个别名，对应到 src 目录。不知道，重复定义 @ 会不会覆盖原来的。 https://umijs.org/zh-CN/config#alias

GloriaCHL · 2020-05-07T02:56:17Z

应该可以使用别名的吧？只是不能使用内置的 @,因为内置的 @ 对应的是src，使用 APP_ROOT=dumi 之后，可能就是 dumi/src，但是你期望的应该是上一层的 src 。可以尝试一下添加一个别名，对应到 src 目录。不知道，重复定义 @ 会不会覆盖原来的。 https://umijs.org/zh-CN/config#alias

这个我试过的，别名指向dumi文件夹里的目录，为了回避'@'用的是'$$'，没成。

感觉最好的场景还是像项目里的 model 文件那样可以自己嗅探出来组织。不过如果目前还无法做到的话，也只能先写绝对路径了。

可以总结性地说下 ant design pro 里怎么使用 dumi 吗？上面说了那么多太零散了，容易迷糊。还是说依然是使用上面说的 cra 那种方法就可以了？

GloriaCHL · 2020-05-11T02:16:09Z

我按照上面所说的CRA方法在 ant design pro 里建了个 dumi 文件夹，在里面构建了个dumi服务。用绝对路径引用主项目的tsx文件没问题，但是tsx文件中的别名引用组件就识别不了，报了错。

这个有什么办法解决吗？

PeachScript · 2020-05-11T03:33:36Z

默认 @ 是指向 {cwd}/src 的，如果嵌套到子文件夹下，需要手动配置 config.alias 为 { '@': path.join(__dirname, '../../src') }

GloriaCHL · 2020-05-11T07:15:30Z

默认 @ 是指向 {cwd}/src 的，如果嵌套到子文件夹下，需要手动配置 config.alias 为 { '@': path.join(__dirname, '../../src') }

按你说的设置可以通过别名拿到dumi外部的组件了，但是又来了个新的错误╮(╯▽╰)╭

如果把组件移到 dumi 文件夹内部是没问题的。

hopperhuang · 2020-05-11T10:14:49Z

借楼同问，我现在有一个umi项目(web项目,非组件库)，想通过dumi 为项目添加文档说明，请问我该如何配置，有相关的文档说明否？
@xiaohuoni

PeachScript · 2020-05-11T16:30:40Z

看起来成了个棘手的问题…这周试试看，可行的话出个 example

ThinCats · 2020-06-06T18:15:51Z

借楼同问，我现在有一个umi项目(web项目,非组件库)，想通过dumi 为项目添加文档说明，请问我该如何配置，有相关的文档说明否？
@xiaohuoni

前面的步骤和上面一样，创建dumi文件夹，作为dumi的APP_ROOT
只不过要注意三点

如果需要在dumi内使用umi项目的组件，需要向webpack添加一些rule，参考如何在demo中引用一个外部的自己的组件 #151
经过个人测试，要想在dumi中使用alias @，直接在config.alias里设置是失败的，最好手动在chianWebpack里设置，参考代码

in dumi/.umirc.ts

export default defineConfig({
    // other config entry
    chainWebpack(memo) {
      memo.module
        .rule('js')
        .include.add(resolve(__dirname, '..'))
        .end()
        .exclude.add(/node_modules/)

      memo.resolve
        .alias
        .set('@', resolve(__dirname, '../src'))
    }
})

如果失败，尝试修改主项目.umirc.ts中的config.nodeModulesTransform.type = 'all'，提高兼容性，可见 https://umijs.org/zh-CN/config#nodemodulestransform-31

分离有一个好处，主项目与dumi项目生成的src/.umi不会相互影响

xjl271314 · 2020-09-01T11:22:36Z

现有项目中集成已经跑了起来了,但是再dumi下的components中引用原有项目的组件报错了。

import AppTipBanner from 'components/AppTipBanner';

想要加载原有项目中的组件需要手动去配置loader么?

xiaohuoni · 2020-09-02T03:04:32Z

看起来这个配置会有用

import { join } from 'path';
export default {
  chainWebpack: (config: any) => {
    config.module
      .rule('js')
      .test(/\.(js|mjs|jsx|ts|tsx)$/)
      .include.add(join(__dirname, '..', '..', 'src')).end()
      .exclude.add(/node_modules/).end()
      .use('babel-loader')
  },
  alias: {
    'xxx': join(__dirname, '..', '..', 'src')
  }
};

xjl271314 · 2020-09-02T09:58:24Z

@xiaohuoni 是的昨天我加上这个配置并单独抽离出来加载可以使用了感觉现有的文档还有有些简单一些问题不太好查阅。

顺便问下我在 extraBabelPlugins: []中配置的 ES11相关语法的plugin 实际并没有起作用

是否需要在类似上述的情况在memo运行环境时添加对应的options参数??

    config.module
    .rule('js')
    .test(/\.(js|mjs|jsx|ts|tsx)$/)
    .include.add(path.join(__dirname, '..', '..', 'src')).end()
    .exclude.add(/node_modules/).end()
    .use('babel-loader')
    .options({
        presets: [
            ['@babel/preset-env', { targets: { browsers: ['safari >= 7', 'ie >= 9'] } }],
            '@babel/preset-react',
        ],
        plugins: [
            '@babel/plugin-proposal-optional-chaining',
        ]
    });

原有项目中的一些组件使用了可选链语法在导入到md文件jsx渲染中报错。

xjl271314 · 2020-09-03T03:51:23Z

@xiaohuoni 是的昨天我加上这个配置并单独抽离出来加载可以使用了感觉现有的文档还有有些简单一些问题不太好查阅。

顺便问下我在 extraBabelPlugins: []中配置的 ES11相关语法的plugin 实际并没有起作用

是否需要在类似上述的情况在memo运行环境时添加对应的options参数??
    config.module
    .rule('js')
    .test(/\.(js|mjs|jsx|ts|tsx)$/)
    .include.add(path.join(__dirname, '..', '..', 'src')).end()
    .exclude.add(/node_modules/).end()
    .use('babel-loader')
    .options({
        presets: [
            ['@babel/preset-env', { targets: { browsers: ['safari >= 7', 'ie >= 9'] } }],
            '@babel/preset-react',
        ],
        plugins: [
            '@babel/plugin-proposal-optional-chaining',
        ]
    });
原有项目中的一些组件使用了可选链语法在导入到md文件jsx渲染中报错。

已解决之前的配置只解决了src目录下的loader问题没有包含原有的整个项目的解析。

NuoHui · 2020-09-10T08:41:54Z

背景

我们也是在已有的项目(自己搭建的React项目)集成dumi来做组件文档，然后按照上面提示去搭建可以跑起来。

问题

我在readme中引入已有项目的组件，提示我无法识别 interface，也无法resolve组件中图片(组件中有些通过webpack的alias引入的图片等)，请问怎么解决上述问题。

chainWebpack这样解析loader还是不行，是我配置错了吗

 .rule('tsx')
      .test(/\.tsx?$/)
      .use('awesome-typescript-loader')
      .end()
      .rule('js')
      .test(/\.js?$/)
      .use('babel-loader')
      .end()

dream-approaching · 2020-11-13T01:56:29Z

按照配置配完，效果是可以的，只是为什么会自动生成node_modules并且好像死循环了，虽然只是快捷方式，但还是看着很别扭

还有一个疑问：这种方式我要怎么把组件放入dumi-lib中引用？

xydegithub · 2021-02-20T07:43:08Z

按照配置配完，效果是可以的，只是为什么会自动生成node_modules并且好像死循环了，虽然只是快捷方式，但还是看着很别扭

还有一个疑问：这种方式我要怎么把组件放入dumi-lib中引用？

真的是循环嵌套！

xiaohuoni · 2021-02-20T09:45:35Z

@dream-approaching 兄弟，你这给一个重现库，我看看，应该是bug。正确的表现不是这样子的

xydegithub · 2021-02-22T01:12:25Z

@dream-approaching 兄弟，你这给一个重现库，我看看，应该是bug。正确的表现不是这样子的

直接用npx @umijs/create-dumi-lib生成的就有这个问题，node_modules里循环的展示了；还有demo写在md里，react好像引不了，导致createelement方法为空报错

xiaohuoni · 2021-02-22T09:33:37Z

没复现出来，别用demo文件夹试试。

xydegithub · 2021-02-23T01:13:09Z

没复现出来，别用demo文件夹试试。

不用demo也不行啊,循环还是存在。（先前说的createelement问题突然又没有了）

xiaohuoni · 2021-02-24T07:49:51Z

给个在线库吧？

dream-approaching · 2021-02-25T03:31:30Z

按照配置配完，效果是可以的，只是为什么会自动生成node_modules并且好像死循环了，虽然只是快捷方式，但还是看着很别扭
给个在线库吧？

我之前有问题这个项目分支废弃了，刚刚重新在cra项目中按照上面的文档添加dumi，发现问题可能出现在windows下，因为公司的电脑是windows的

用windows系统：执行npm run dumi后，node_modules下循环嵌套了
用windows下的linux子系统：执行npm run dumi后，node_modules正常

我把这个demo放github仓库了：https://github.com/dream-approaching/dumi-loop-demo

我有一些其他疑问可以帮忙看下吗 @xiaohuoni

场景(在cra项目中使用dumi)

在cra项目中package.json 的 script中新增

"dumi": "cross-env APP_ROOT=dumi dumi dev",
"dumi-build": "cross-env APP_ROOT=dumi dumi build",

在根目录新建dumi文件夹
.......(参考上方的文档步骤，不一一列出了)

疑问

1、在其他issus中看到，package.json需要添加dumi-lib，应该是添加到根目录的 package.json 中吗，还是要在 dumi 文件夹下新建 package.json 文件再安装 dumi-lib ？我暂时是放在根目录下了
2、在dumi/components新建了一个组件 Com ，然后在 index.js 中导出，最开始用dumi的时候，是可以通过 import { Com } from 'dumi-lib'; 引用 Com组件的，但是在当前项目下不行了，还会报错 Can't resolve './locale' in '**/**/**/node_modules/dumi-lib/dist' ，网上说要安装 moment ，但试了还是不行，可以帮忙解答下吗

PeachScript · 2021-02-25T09:12:23Z

循环软连接是正常情况，这是 dumi 为了确保 import x from '组件库包名' 能找到正确的 TS 类型定义做的处理

dumi-lib 只是个代称，并非需要安装的依赖，实际上是我们自己的组件库名称

其他问题请另开 issue 提出

xiaohuoni · 2021-02-25T09:36:28Z

我一直想重现这个图片中的情况，没成功。

xiaohuoni · 2021-02-25T09:40:20Z

这个issues 太长了。还有问题的，提供在线仓库，重新提个新的issues吧。

phyzess added the question Further information is requested label Apr 28, 2020

xiaohuoni closed this as completed Apr 28, 2020

xiaohuoni reopened this Apr 30, 2020

xiaohuoni closed this as completed Apr 30, 2020

xiaohuoni reopened this Apr 30, 2020

xiaohuoni mentioned this issue Apr 30, 2020

fix: use dev variables dumi no work #163

Merged

PeachScript closed this as completed in #163 May 6, 2020

xiaohuoni reopened this May 7, 2020

xiaohuoni mentioned this issue May 12, 2020

bug: 不能和create-react-app配套使用 #121

Closed

GloriaCHL mentioned this issue May 12, 2020

bug: [plugin-locale] #177

Closed

Echosjj mentioned this issue Sep 16, 2020

我引入less-loader 就会报错No loader specified，帮忙看一下> @xiaohuoni 是的昨天我加上这个配置并单独抽离出来加载可以使用了感觉现有的文档还有有些简单一些问题不太好查阅。 #322

Closed

PeachScript mentioned this issue Oct 19, 2020

umi项目中、结合dumi生成业务文档说明 #349

Closed

xiaohuoni closed this as completed Feb 25, 2021

umijs locked as too heated and limited conversation to collaborators Feb 25, 2021

请问有方法在已有项目中添加 dumi 嘛？ #161

请问有方法在已有项目中添加 dumi 嘛？ #161

Comments

phyzess commented Apr 28, 2020

Question

xiaohuoni commented Apr 28, 2020

phyzess commented Apr 28, 2020

xiaohuoni commented Apr 28, 2020

package.json

docs/index.md

xiaohuoni commented Apr 28, 2020

phyzess commented Apr 28, 2020

xiaohuoni commented Apr 30, 2020 • edited Loading

如何在cra等非 umi 项目中使用 dumi？

GloriaCHL commented May 6, 2020

如何在cra等非 umi 项目中使用 dumi？

zhaoyao91 commented May 6, 2020

如何在cra等非 umi 项目中使用 dumi？

xiaohuoni commented May 7, 2020

xiaohuoni commented May 7, 2020

GloriaCHL commented May 7, 2020 • edited Loading

xiaohuoni commented May 7, 2020

GloriaCHL commented May 7, 2020

GloriaCHL commented May 11, 2020

PeachScript commented May 11, 2020

GloriaCHL commented May 11, 2020

hopperhuang commented May 11, 2020

PeachScript commented May 11, 2020

ThinCats commented Jun 6, 2020

xjl271314 commented Sep 1, 2020

xiaohuoni commented Sep 2, 2020

xjl271314 commented Sep 2, 2020 • edited Loading

xjl271314 commented Sep 3, 2020

NuoHui commented Sep 10, 2020 • edited Loading

背景

问题

dream-approaching commented Nov 13, 2020

xydegithub commented Feb 20, 2021

xiaohuoni commented Feb 20, 2021

xydegithub commented Feb 22, 2021 • edited Loading

xiaohuoni commented Feb 22, 2021 • edited Loading

xydegithub commented Feb 23, 2021 • edited Loading

xiaohuoni commented Feb 24, 2021

dream-approaching commented Feb 25, 2021

场景(在cra项目中使用dumi)

疑问

PeachScript commented Feb 25, 2021

xiaohuoni commented Feb 25, 2021

xiaohuoni commented Feb 25, 2021

xiaohuoni commented Apr 30, 2020 •

edited

Loading

GloriaCHL commented May 7, 2020 •

edited

Loading

xjl271314 commented Sep 2, 2020 •

edited

Loading

NuoHui commented Sep 10, 2020 •

edited

Loading

xydegithub commented Feb 22, 2021 •

edited

Loading

xiaohuoni commented Feb 22, 2021 •

edited

Loading

xydegithub commented Feb 23, 2021 •

edited

Loading