开始

本文使用umi的dumi框架实现。

起步

  1. #初始化一个文件夹
  2. $ mkdir myapp && cd myapp
  3. #下载dumi
  4. $ npx @umijs/create-dumi-lib
  5. # 安装依赖
  6. $ npm i
  7. #启动项目
  8. $ npm start
  9. #编译打包项目,输出docs-dist文件夹
  10. #安装http-server,可以使用命令 hs -o 本地查看
  11. $ npm run docs:build
  12. #构建库
  13. $ npm run build

项目编写

image.pngimage.png
src的index.ts输出所有的组件

  1. export { default as Kylethanas } from './Kylethanas';
  2. export { default as UseBoolean } from './AHooks/useBoolean';
  3. export { default as UseMap } from './AHooks/useMap';
  1. 每个目录都是一个节点,每个节点都可以有自己的子节点。
  2. 像是Ahooks目录里面2个md文件,就会有2个文本节点。
  3. 每个md里面可以引入一个tsx文件,tsx正常编写,完成组件的功能。
  4. md文件支持配置,在代码块内写配置可以生效。image.png

问题

Error: ‘default’ is not exported by node_modules/lodash.debounce/index.js…
image.png
解决方案:把依赖到的包放入dependencies。