日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
對(duì)比三個(gè)強(qiáng)大的組件文檔展示工具

背景

前段時(shí)間， 部門在熱火朝天的搞各類組件庫(kù)。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的博望網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

做組件庫(kù)，不可避免的就需要做組件的展示和說明， 要用到一些文檔工具。

我們項(xiàng)目里面也嘗試了幾種不同的文檔工具，今天和大家分享一些經(jīng)驗(yàn)， 希望對(duì)大家有所幫助。

正文

目前， 我們的組件庫(kù) 一共使用了三種文檔工具， 分別是：

  1. Story Book
  2. Docz
  3. Dumi

下面我會(huì)根據(jù)實(shí)際的使用情況，對(duì)這三種工具做一些對(duì)比 并給出一些結(jié)論。

1. Story Book

StoryBook 提供了一套UI組件的開發(fā)環(huán)境。

它允許你瀏覽組件庫(kù)，查看每個(gè)組件的不同狀態(tài)，以及交互式開發(fā)和測(cè)試組件， 目前支持 react、vue、angular 等前端類庫(kù)和框架。

代碼示例

 
 
 
 
    
  
  
  
  
  1. // Button.stories.tsx 
    2. 
  
  
  
  
  2. import React from 'react'; 
    3. 
  
  
  
  
  3. import { Story } from '@storybook/react'; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. // We create a “template” of how args map to rendering 
    6. 
  
  
  
  
  6. const Template: Story = (args) => ; 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. export const Primary = Template.bind({}); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. Primary.args = { 
    11. 
  
  
  
  
  11.   primary: true, 
    12. 
  
  
  
  
  12.   label: 'Primary', 
    13. 
  
  
  
  
  13. }; 
    14.

 storybook 提供可以交互的組件編寫，通過 Template.bind({}) 進(jìn)行組件的綁定，通過 args暴露可交互的屬性。

且支持的組件庫(kù)豐富，但是文檔的編寫除了需要提供示例外，還需要兼容可交互的模式。

渲染示例

比如我們的 SSC-UI-Vue-Pro 組件庫(kù)：

 
 
 
 
    
  
  
  
  
  1. import STrackingHistory from './tracking-history.vue'; 
    2. 
  
  
  
  
  2. import './style/index.less'; 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. export default { 
    5. 
  
  
  
  
  5.   title: 'Design System/展示/TrackingHistory', 
    6. 
  
  
  
  
  6.   component: STrackingHistory, 
    7. 
  
  
  
  
  7.   parameters: { 
    8. 
  
  
  
  
  8.     docs: { 
    9. 
  
  
  
  
  9.       description: { 
    10. 
  
  
  
  
  10.         component: '訂單歷史追蹤，主要按時(shí)間和狀態(tài)維度跟進(jìn)', 
    11. 
  
  
  
  
  11.       }, 
    12. 
  
  
  
  
  12.     }, 
    13. 
  
  
  
  
  13.     design: { 
    14. 
  
  
  
  
  14.       type: 'figma', 
    15. 
  
  
  
  
  15.       url: 
    16. 
  
  
  
  
  16.         'https://www.figma.com/file/zi4Lcb2H2K5JikFKeEvPD7/WMS%E5%85%B8%E5%9E%8B%E6%A8%A1%E6%9D%BFV1.1?node-id=2974%3A595', 
    17. 
  
  
  
  
  17.     }, 
    18. 
  
  
  
  
  18.   }, 
    19. 
  
  
  
  
  19.   argTypes: { 
    20. 
  
  
  
  
  20.     title: { 
    21. 
  
  
  
  
  21.       control: 'text', 
    22. 
  
  
  
  
  22.       description: '標(biāo)題內(nèi)容，必填', 
    23. 
  
  
  
  
  23.       type: { required: true }, 
    24. 
  
  
  
  
  24.     }, 
    25. 
  
  
  
  
  25.     list: { 
    26. 
  
  
  
  
  26.       control: 'object', 
    27. 
  
  
  
  
  27.       description: '歷史記錄列表', 
    28. 
  
  
  
  
  28.       type: { required: true, summary: 'array' }, 
    29. 
  
  
  
  
  29.     }, 
    30. 
  
  
  
  
  30.   }, 
    31. 
  
  
  
  
  31. }; 
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33. const Template = (args, { argTypes }) => ({ 
    34. 
  
  
  
  
  34.   components: { STrackingHistory }, 
    35. 
  
  
  
  
  35.   props: Object.keys(argTypes), 
    36. 
  
  
  
  
  36.   template: '', 
    37. 
  
  
  
  
  37. }); 
    38. 
  
  
  
  
  38.  
    39. 
  
  
  
  
  39. export const Default = Template.bind({}); 
    40. 
  
  
  
  
  40. (Default as any).args = { 
    41. 
  
  
  
  
  41.   title: 'Order Tracking History', 
    42. 
  
  
  
  
  42.   list: [ 
    43. 
  
  
  
  
  43.     { 
    44. 
  
  
  
  
  44.       time: '18:00:22', 
    45. 
  
  
  
  
  45.       date: '2021-11-23', 
    46. 
  
  
  
  
  46.       status: 'string; // 選填，缺省時(shí)不顯示', 
    47. 
  
  
  
  
  47.       statusType: 'default', 
    48. 
  
  
  
  
  48.       contents: [ 
    49. 
  
  
  
  
  49.         { 
    50. 
  
  
  
  
  50.           label: 'Message', 
    51. 
  
  
  
  
  51.           value: 'LineContent[]; // 選填，按順序展示每一行內(nèi)容', 
    52. 
  
  
  
  
  52.         }, 
    53. 
  
  
  
  
  53.         { 
    54. 
  
  
  
  
  54.           label: 'Oprater', 
    55. 
  
  
  
  
  55.           value: 'LineContent[]; // 選填，按順序展示每一行內(nèi)容', 
    56. 
  
  
  
  
  56.         }, 
    57. 
  
  
  
  
  57.       ], 
    58. 
  
  
  
  
  58.       splitLineText: 'New Order', 
    59. 
  
  
  
  
  59.     }, 
    60. 
  
  
  
  
  60.     { 
    61. 
  
  
  
  
  61.       date: '2021-1-2', 
    62. 
  
  
  
  
  62.       status: 'string; // 選填，缺省時(shí)不顯示', 
    63. 
  
  
  
  
  63.       statusType: 'default', 
    64. 
  
  
  
  
  64.       contents: [ 
    65. 
  
  
  
  
  65.         { 
    66. 
  
  
  
  
  66.           label: 'Operator', 
    67. 
  
  
  
  
  67.           value: 'LineContent[]; // 選填，按順序展示每一行內(nèi)容', 
    68. 
  
  
  
  
  68.         }, 
    69. 
  
  
  
  
  69.       ], 
    70. 
  
  
  
  
  70.     }, 
    71. 
  
  
  
  
  71.     { 
    72. 
  
  
  
  
  72.       date: '2021-11-23', 
    73. 
  
  
  
  
  73.       status: 'string; // 選填，缺省時(shí)不顯示', 
    74. 
  
  
  
  
  74.       contents: [ 
    75. 
  
  
  
  
  75.         { 
    76. 
  
  
  
  
  76.           value: 'LineContent[]; // 選填，按順序展示每一行內(nèi)容', 
    77. 
  
  
  
  
  77.         }, 
    78. 
  
  
  
  
  78.       ], 
    79. 
  
  
  
  
  79.     }, 
    80. 
  
  
  
  
  80.     { 
    81. 
  
  
  
  
  81.       date: '2021-11-23', 
    82. 
  
  
  
  
  82.       status: 'string; // 選填，缺省時(shí)不顯示', 
    83. 
  
  
  
  
  83.       statusType: 'success', 
    84. 
  
  
  
  
  84.       contents: [], 
    85. 
  
  
  
  
  85.     }, 
    86. 
  
  
  
  
  86.     { 
    87. 
  
  
  
  
  87.       date: '2021-1-23', 
    88. 
  
  
  
  
  88.       contents: [{}], 
    89. 
  
  
  
  
  89.     }, 
    90. 
  
  
  
  
  90.     { 
    91. 
  
  
  
  
  91.       date: '2021-1-3', 
    92. 
  
  
  
  
  92.     }, 
    93. 
  
  
  
  
  93.     { 
    94. 
  
  
  
  
  94.       date: '2021-11-23', 
    95. 
  
  
  
  
  95.       contents: [ 
    96. 
  
  
  
  
  96.         { 
    97. 
  
  
  
  
  97.           label: 'Message', 
    98. 
  
  
  
  
  98.         }, 
    99. 
  
  
  
  
  99.       ], 
    100. 
  
  
  
  
  100.     }, 
    101. 
  
  
  
  
  101.   ], 
    102. 
  
  
  
  
  102. }; 
    103.

2. docz

Docz 是一個(gè)高效、零配置的事件記錄工具。

Docz 基于 MDX ，有許多內(nèi)置的組件可以幫助你記錄你的事情。

它同時(shí)支持添加插件，以便于通過 Docz 流程和數(shù)據(jù)管控很多事情。

代碼示例

 
 
 
 
    
  
  
  
  
  1. // Button.mdx 
    2. 
  
  
  
  
  2. import { Playground } from 'docz' 
    3. 
  
  
  
  
  3. import { Button } from './Button' 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. # Button 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. ## Basic usage 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.    
    11. 
  
  
  
  
  11.   Click me 
    12. 
  
  
  
  
  12.  
    13.

渲染示例

這是官網(wǎng)的一個(gè)示例，可以看出代碼的示例需要寫在 Playground 標(biāo)簽里面，由此帶來(lái)一個(gè)問題，無(wú)法在代碼示例中寫引入模塊，這其實(shí)對(duì)開發(fā)者不太友好。

我們的 SSC-UI-React 組件庫(kù)使用了docz, 實(shí)際效果：

3. dumi

dumi 是一款為組件開發(fā)場(chǎng)景而生的文檔工具。

其具有開箱即用，將注意力集中在組件開發(fā)和文檔編寫上。

基于 TypeScript 類型定義，自動(dòng)生成組件 API、移動(dòng)端組件庫(kù)編寫及多語(yǔ)言支持。

代碼示例

在類型定義中：

渲染示例

總體對(duì)比

以下為三個(gè)庫(kù)的特性對(duì)比：

綜上所述，愉快地決定將 React Pro Components 組件庫(kù)文檔遷移到 dumi 中。

踩坑總結(jié)

1. React 版本不兼容問題

一通遷移操作后，我們 yarn 了一下，發(fā)現(xiàn)報(bào)錯(cuò)了:

這是 ts 報(bào)出的關(guān)于 react 類型檢查的錯(cuò)誤，一開始認(rèn)為是 ts 檢查多了，那么在tsconfig.json 配置 excluded：['node-modules']，將這個(gè)檢查去掉，但是配完了仍然不好使。

經(jīng)過一通細(xì)致的檢查，在 yarn.lock 中發(fā)現(xiàn)組件庫(kù)依賴的 react 版本是 16，而 dumi 依賴的 react 版本是*，*的版本下載了 17 版本的 react，由于兩個(gè)版本的 react 的 ts 類型不同，導(dǎo)致了類型檢查不通過。

既然如此，我們只要顯示指定 react 的版本為 16 就行了，16 在 * 的范圍，也不會(huì)導(dǎo)致 dumi 有錯(cuò)誤。

在 package.json 中加入：

 
 
 
 
    
  
  
  
  
  1. "resolutions": { 
    2. 
  
  
  
  
  2.   "@types/react": "^16.9.23" 
    3. 
  
  
  
  
  3. } 
    4.

即可。

2.文檔引用問題

由于 dumi 的文檔是面向用戶的，因此寫文檔時(shí)引入組件的方法，舉例:

如 Button 組件為:

 
 
 
 
    
  
  
  
  
  1. import { EditArea } from 'react-pro-components' 
    2.

由于這里引入的是 node_module 的包，這使得組件庫(kù)的更改無(wú)法映射到文檔中，需要添加別名映射。

在 .umirc.ts 中添加：

 
 
 
 
    
  
  
  
  
  1. const path = require('path'); 
    2. 
  
  
  
  
  2. const chainWebpack = require('webpack-chain'); 
    3. 
  
  
  
  
  3. export default { 
    4. 
  
  
  
  
  4.  // 其他配置 
    5. 
  
  
  
  
  5.   chainWebpack(memo) { 
    6. 
  
  
  
  
  6.     // 設(shè)置 alias 
    7. 
  
  
  
  
  7.     memo.resolve 
    8. 
  
  
  
  
  8.       .alias 
    9. 
  
  
  
  
  9.       .set('react-pro-components', path.resolve(__dirname, 'src', 'components')) 
    10. 
  
  
  
  
  10.   }, 
    11. 
  
  
  
  
  11. }; 
    12.

3. 其他問題

1.dumi 是否支持 api 文檔的部分屬性隱藏呢?

暫不支持

2.dumi 是否支持搜索呢?

site 模式支持，doc 模式暫不支持。

3.dumi 是否 md 文檔單獨(dú)放在組件目錄下的一個(gè)文件夾下呢?

暫不支持，需要直接放在組件目錄下，如 Button 組件：

 
 
 
 
    
  
  
  
  
  1. ├── Button 
    2. 
  
  
  
  
  2. │   └── index.md 
    3.

結(jié)論

經(jīng)多對(duì)比之后， 我們把一個(gè) React 組件庫(kù) 遷移到了 dumi, 并取得了不錯(cuò)的效果。

有需要做 React 組件庫(kù)的小伙伴可以留意下dumi.

至于 Vue 組件文檔庫(kù)， 大家就根據(jù)自己的情況靈活選擇吧。

希望這篇文章能對(duì)大家有所幫助， 謝謝。


當(dāng)前標(biāo)題：對(duì)比三個(gè)強(qiáng)大的組件文檔展示工具
轉(zhuǎn)載來(lái)源：http://m.5511xx.com/article/cdogdee.html