源码地址

  1. https://github.com/alibaba/hooks
  2. https://ahooks.js.org/

启动

  1. # 初始化
  2. npm run init
  4. # dev 启动
  5. npm start

对应 package.json 内 scripts 定义命令，可以看到整个项目是使用 dumi 来生成文档的：

  1. "scripts": {
  2.     // 初始化
  3.     "init": "rm -rf node_modules && yarn install && yarn run clean && yarn run bootstrap && yarn run build",
  5.     // 启动
  6.     "start": "yarn run dev",
  8.     // 实际 dev 执行这条，可以看出用的是 dumi
  9.     "dev": "dumi dev",
  11.     // 在 init 都会被使用
  12.     "bootstrap": "lerna bootstrap",
  13.     "clean": "lerna clean --yes",
  14.     "build": "lerna run build"
  15. },

目录结构 & 项目概况

  • 主要关注以下几个关键目录即可，可暂时不深究，一个 hooks 内，都会包含有测试用例 / demo / 中英文档 / 源码，几个部分：

    1. ahooks
    2. .
    3. .
    4. .
    5. ├── config/                   // dumi 配置
    6. │    ├── config.ts            // dumi 配置
    7. │    └── hooks.ts             // hooks menus 配置
    8. .
    9. .
    10. ├── docs/                     // 内含 "指南" 相关文档
    11. │    ├── ..            
    12. │    └── ..             
    13. .
    14. .
    15. ├── packages/                 // 内含 "hooks" 相关文档 + 源码 + 测试用例
    16. │    ├── hooks/   
    17.   │         │    ├── src/   
    18. │    │        │    ├── useHover/                              // 其中一个 hooks   
    19. │      │    │         │      ├── __tests__/              // 测试用例   
    20. │      │    │         │      ├── demo/                          // hooks 对应的 demo，会被 md 文档加载进去展示  
    21. │      │    │         │      ├── index.ts                  // 源码   
    22. │      │    │         │      ├── index.en-US.md    // 英文文档   
    23. │      │    │         │      └── index.zh-CN.md    // 中文文档
    24. │    │    │         └── ..                                     // 其他 hooks 也是类似这样的结构
    25. │    │        └── ..  
    26. │    └── use-url-state/   
    27. .
    28. .

  • hooks 内 md 文档怎么和 demo 例子打通的，使用的是 https://d.umijs.org/zh-CN/guide/basic#%E5%A4%96%E9%83%A8-demo截屏2021-12-28 下午5.48.59.png

  • 截屏2021-12-28 下午5.47.29.png
  • hooks 内 md 顶部定义 title，以及左侧 title 名称：https://d.umijs.org/zh-CN/guide/basic#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E5%88%86%E7%BB%84%E5%92%8C%E6%A0%87%E9%A2%98截屏2021-12-28 下午5.53.19.png

截屏2021-12-28 下午5.52.02.png

  • 更多细节可仔细查看 dumi 文档，以及 config/config.ts 配置，暂不深究

整体架构