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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
做好這三個(gè)關(guān)鍵點(diǎn)就可以更好的實(shí)現(xiàn)前端業(yè)務(wù)組件庫

對于前端同學(xué)來說， 業(yè)務(wù)組件庫肯定不陌生，很多前端團(tuán)隊(duì)都會(huì)選擇建設(shè)業(yè)務(wù)組件庫來解決

10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有延川免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

  1. 業(yè)務(wù)組件跨項(xiàng)目復(fù)用的問題

  2. 同時(shí)統(tǒng)一代碼實(shí)現(xiàn)，統(tǒng)一代碼質(zhì)量

從而提高業(yè)務(wù)的開發(fā)效率。但是我發(fā)現(xiàn)埋在明確需求之后，開始調(diào)研技術(shù)方案時(shí)，很多同學(xué)并不清楚要調(diào)研哪些技術(shù)點(diǎn)，怎么找到某個(gè)具體方向的解決方案，找到方案之后都需要試哪些case, 以及怎么把這些方案集成在一起等等。

其實(shí)不用想那么復(fù)雜，你只需要按照以下三個(gè)技術(shù)實(shí)現(xiàn)的關(guān)鍵點(diǎn)搞定就可以了。

  • 第一步："搭地基"--業(yè)務(wù)組件庫的整體架構(gòu)設(shè)計(jì)

  • 第二步："建主體結(jié)構(gòu)"--業(yè)務(wù)組件庫的基礎(chǔ)技術(shù)設(shè)計(jì)

  • 第三步:"粉刷外立面"-- 業(yè)務(wù)組件庫的對外文檔服務(wù)

你一定覺得這三個(gè)點(diǎn)還是太宏觀了，不好理解，所以接下來，我就分別介紹這三個(gè)關(guān)鍵點(diǎn)到底是什么。你可以參考這些關(guān)鍵點(diǎn)來進(jìn)行相關(guān)技術(shù)調(diào)研

一. 業(yè)務(wù)組件庫的整體架構(gòu)設(shè)計(jì)

對于業(yè)務(wù)組件庫的整體架構(gòu)設(shè)計(jì)而言， 核心問題是業(yè)務(wù)組件庫的代碼時(shí)如何來組織和管理 。

首先，我們把代碼倉庫建好。業(yè)界一般會(huì)把同一類組件庫用單個(gè)倉庫的形式維護(hù)，并且把組件開發(fā)成NPM包的形式，這里的重點(diǎn)是，**你要考慮把所有的組件打包成一個(gè)大的NPM包，還是分割是一個(gè)個(gè)獨(dú)立的小NPM包 。**不要小看這個(gè)問題， 這兩種選擇會(huì)使倉庫的目錄結(jié)構(gòu)有不小的差異，進(jìn)一步又會(huì)影響到后面組件的開發(fā)，構(gòu)建，發(fā)布，實(shí)現(xiàn)的技術(shù)設(shè)計(jì)

單包架構(gòu)

是什么

如果你選擇把所有的組件看成一個(gè)整體，一起打包發(fā)布。這叫做 單包架構(gòu) 。單個(gè)倉庫，單個(gè)包，統(tǒng)一維護(hù)統(tǒng)一管理。比如Antd

優(yōu)點(diǎn)

它最大的優(yōu)點(diǎn)是可以通過相對路徑實(shí)現(xiàn)組件與組件的引用，公共代碼之間的引用。

缺點(diǎn)

缺點(diǎn)就是組件完全耦合在了一起，必須把它作為一個(gè)整體統(tǒng)一發(fā)包。就算只改一個(gè)組件的一個(gè)非常小的功能，都要對整個(gè)包發(fā)布更新。

比如說 Antd，它就是作為一個(gè)整體的包來盡進(jìn)行管理的。選擇使用單包架構(gòu)的話，那么你就必須提供按需加載的能力，以降低使用者的成本，你可以考慮支持 ES Modules 的 Tree shaking 的功能來實(shí)現(xiàn)按需加載的能力。當(dāng)然你也可以選擇另外一種方案，叫做"多包架構(gòu)"

多包架構(gòu)

是什么

每個(gè)組件彼此獨(dú)立，單獨(dú)打包發(fā)布，單個(gè)倉庫多個(gè)包，統(tǒng)一維護(hù)單獨(dú)管理。

 
 
 
 
    
  
  
  
  
  1. . 
    2. 
  
  
  
  
  2. ├── lerna.json 
    3. 
  
  
  
  
  3. ├── package.json 
    4. 
  
  
  
  
  4. └── packages/ # 這里將存放所有子 repo 目錄 
    5. 
  
  
  
  
  5.    ├── project_1/  # 組件1的包 
    6. 
  
  
  
  
  6.    │   ├── index.js 
    7. 
  
  
  
  
  7.    │   ├── node_modules/ 
    8. 
  
  
  
  
  8.    │   └── package.json 
    9. 
  
  
  
  
  9.    ├── project_2/   # 組件2的包 
    10. 
  
  
  
  
  10.    │   ├── index.js 
    11. 
  
  
  
  
  11.    │   ├── node_module/ 
    12. 
  
  
  
  
  12.    │   └── package.json 
    13. 
  
  
  
  
  13.    ... 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. 制代碼 
    16.

優(yōu)點(diǎn)

它最大的優(yōu)勢是組件發(fā)布靈活，并且天然支持按需使用，

缺點(diǎn)

缺點(diǎn)就是組件與組件之間物理隔離。對于相互依賴，公共代碼抽象等場景，就只能通過NPM包引用的方式來實(shí)現(xiàn)。

--

在這些場景下的開發(fā)統(tǒng)一發(fā)布，相對來說沒那么方便，多包架構(gòu)在業(yè)界稱之為 "Monorepo".

在前端領(lǐng)域，我們一般使用第三方庫 Lerna 來維護(hù)這樣的架構(gòu)，Lerna針對包之間有依賴的場景做了一些特殊優(yōu)化，開發(fā)模式下，它會(huì)把所有存在依賴關(guān)系的包通過軟鏈的形式連在一起，就可以很方便的本地開發(fā)聯(lián)調(diào)。所以這就要求你考慮清楚，

  • 組件庫之間的組件是否有相互依賴的情況，如果有這種情況，就可以通過Lerna來進(jìn)行處理

  • 如果組件之間依賴特別驗(yàn)證，也可選擇"單包架構(gòu)"

二. 業(yè)務(wù)組件庫的基礎(chǔ)技術(shù)能力

當(dāng)你確定了整體架構(gòu)之后，就可以開始具體的功能點(diǎn)實(shí)現(xiàn)了。業(yè)務(wù)組件庫要求整體框架提供五點(diǎn)基礎(chǔ)的技術(shù)能力

1. 構(gòu)建能力

這需要我們可以提供構(gòu)建產(chǎn)物的能力，這里有很多選擇，可以選擇Webpack，Rollup Glup Grunt..... 構(gòu)建組件庫推薦Rollup， 構(gòu)建項(xiàng)目推薦Webpack. 這里需要特別注意產(chǎn)物的格式要求，像我們常用的cjs, esm,umd格式。