father
father copied to clipboard
docs: 如何将 father 2 中内置的 docz 切换为 dumi 做组件库研发?
前言
dumi 是基于 Umi 的 React 组件库研发工具,能够提供开箱即用、顺滑流畅的组件研发体验,可和 father-build 一起搭配使用。
下个版本的 father 将会使用 dumi 作为内置文档工具。
迁移步骤
1. 更新依赖
移除无用的 father
依赖,改为 father-build
和 dumi
:
{
"devDependencies": {
- "father": "^2.29.6",
+ "father-build": "^1.18.2",
+ "dumi": "^1.0.34"
}
}
2. 更新启动脚本
{
"scripts": {
- "dev": "father doc dev",
+ "dev": "dumi dev",
- "build": "father build",
+ "build": "father-build"
}
}
3. 移除 .fatherrc
中的无用配置
export default {
- doc: { /* 文档配置 */ },
}
4. 替换文档写法
修改 .mdx
为 .md
,并将 Playground
或者 JSX
替换为代码块:
- import Foo from './';
- import Playground from 'docz';
# Foo
- <Playground><Foo>Hi father!</Foo></Playgrond>
+ ```jsx
+ import React from 'react';
+ import { Foo } from 'my-library'; // package.name 的配置值
+
+ export default () => Hi father! ;
+ ```
5. 替换文档配置
检查 .md
文档中顶部的 frontmatter
配置项,替换为 dumi 的配置项,例如:
- menu: A
+ group:
+ title: A
以上,大功告成,执行 npm run dev
开始全新的组件库研发体验。
如果遇到问题请直接在下方反馈。
按照上面方法从father doc 升级过来的,报错如下:
> father-build
D:\projects\xxx\node_modules\import-lazy\index.js:16
return Reflect.apply(importedModule, thisArgument, argumentsList);
^
TypeError: Function.prototype.apply was called on false, which is a boolean and not a function
按照上面方法从father doc 升级过来的,报错如下:
> father-build D:\projects\xxx\node_modules\import-lazy\index.js:16 return Reflect.apply(importedModule, thisArgument, argumentsList); ^ TypeError: Function.prototype.apply was called on false, which is a boolean and not a function
重新用回 father,命令改回 “father build” 后可以成功打包。
只切换 doc 部分不应该会影响到 build 的功能,有复现仓库吗
不想迁移咋办?我能用旧版吗?
能,卸载 father,手动安装 docz 最新版 + father-build