緣起
項目組用到了vue angularjs angular 等多種js框架业筏，一些組件零散的分布在各個子項目中。有些項目是從別的部門收編過來的，現(xiàn)在統(tǒng)一維護截歉，如何去管理這些零散的組件而咆，做到組件的復用霍比。項目組當前的解決方案如下：
- webpack配置成多入口，需要復用的組件單獨打成入口chunk暴备。app中使用動態(tài)的script標簽插入到頁面中悠瞬，暴露全局變量在window下。（傳統(tǒng)的js包的用法）
- iframe嵌套webpack插件html-webpack-plugin打出來的html使用涯捻。可以防止命名沖突
在現(xiàn)有的基礎上我能想到的一些優(yōu)化
- 暴露到全局的變量名的優(yōu)化浅妆。統(tǒng)一命名規(guī)則
子系統(tǒng)_包名_方法名 - 使用npm私服verdaccio，把組件發(fā)布成node_modules包（使用webpack 打包成umd）npm發(fā)布的包名不能重復障癌，可以有效控制組件重名問題
直到我看到teambit / bit這個項目
他說
Bit is an open-source cli tool for collaborating on isolated components across projects and repositories.
Use Bit to distribute discrete components from a design library or a project into a standalone reusable package and utilize it across applications.
You can set up your own server for components collaboration, or use the bit.dev cloud hosting for private and public components sharing.
（翻譯：bit是開源的命令行工具凌外，用來解決跨項目和跨倉庫的組件協(xié)作。使用它可以將分散在各個項目中組件分發(fā)到獨立的可重用的包中涛浙，您可以設置自己的服務器來進行組件協(xié)作康辑，也可以使用bit.dev云托管進行私有和公共組件共享。
）
這跟我在工作中遇到的問題一致
- 組件在各個子項目中分散轿亮，代碼庫分散
- 沒有統(tǒng)一管理
- 沒有分發(fā)成獨立的組件庫
- 界面風格領導要求各項目統(tǒng)一
- 能跟各種框架
ts js vue angularjs react融合
他可以聚合管理組件疮薇，且跟我當前的理念一致
- 組件不是無中生有，暗度陳倉我注，憑空想象按咒，憑空捏造的
- 項目還沒啟動，搞個UI小組專門做組件仓手，強制各個子項目使用他的組件胖齐，做出來的組件質(zhì)量不高，沒人敢用嗽冒，誰用誰是小白鼠呀伙。讓你改個BUG，不如我重寫來的快添坊，子項目組件對業(yè)務有高度定制化剿另，在設計的時候根本考慮不到，你來適配組件就不通用，組件通用后我需要搞一堆參數(shù)來配置雨女。在巨大的人力財力投入下（寫組件的一般都是三年開發(fā)經(jīng)驗起步的工程師谚攒，比較貴），又造了個類似于iview,elementUI之類的輪子氛堕，關鍵還沒人家質(zhì)量高馏臭，氣不氣！Ｋ现伞＠ㄈ濉（吐槽下我之前的項目組）
- 組件化，是在需要重用的時候不寫第二遍锐想，不Ctrl+C V,而是封裝抽象出來
盤他
1.安裝bit(客戶端)
npm install bit-bin --global
yarn global add bit-bin
2.bit git??
我猜這工具作者參考了git的設計帮寻，組件有版本管理，不然干嘛取這個名字
3.bit 如何工作
- bit 分為服務器跟客戶端赠摇，跟git類似固逗，協(xié)作嘛，總是要個服務器的藕帜。
- bit 組件由三個部分組成烫罩。源代碼（包含文檔與資源），依賴樹耘戚，工具與配置嗡髓。
- bit 組件需要制定一個唯一的入口
4.bit生命周期
- 創(chuàng)建組件
初始化bit空間：
bit init
添加組件bit add ./src/components/*
- 打包編譯
安裝編譯器
bit import bit.envs/compilers/babel --compiler
--compiler命令代表安裝的這個bit包作為編譯器使用
bit build [my-component-name]
- 發(fā)布版本
打版本號：
bit tag [my-component-name] [version]
不加版本號，是自增收津。不寫組件名是全部組件饿这。這個命令會重新編譯bit build的。
- 導出到遠程服務器
bit export [remote-server]不加remote-server 默認是發(fā)布到bit.dev
- 安裝組件
作為node_modules依賴安裝npm install @bit/owner.collection.namespace.namespace.comp-id - 導入組件
bit import
導入后可以修改撞秋。此時package.json中的組件指向的是本地文件长捧，而不是node_modules中。
修改然后再發(fā)布新版本吻贿，此時遠程服務器上的組件就有新版本了串结。
這里達到了多個項目同時管理一個組件了
5.bit.dev
這個是bitteam提供的一個組件托管服務器，可以理解成git跟github的關系
可惜bit暫不支持私有化部署
也就是說沒有類似于gitlab的bitlab項目可以提供給咱們使用舅列，看不到組件聚合展示
但是bit支持自己的遠程倉庫一個啟動ssh協(xié)議的服務器就可以了（win10自帶SSH客戶端,SSH服務要單獨安裝肌割，下一篇文章寫《win10下安裝OpenSSH服務器》），有l(wèi)inux系統(tǒng)會方便些
添加遠程倉庫 bit remote add ssh://bit-username@bit-server:/opt/bit/first-scope
導出bit組件到遠程倉庫 bit export first-scope
說這么多的概念不如整個例子
- 下載 https://github.com/teambit/bit-vue-tutorial 這個項目
- 安裝項目依賴
npm i
image.png - 初始化 bit工作空間
bit init帐要，提問是否幫助bit改進把敞，是否發(fā)送錯誤日志，我這里都選的否
image.png -
bit add跟蹤我們的組件
image.png
報錯了榨惠，沒成功奋早，說是沒有找不到組件的入口盛霎，實際上我們要導出的是兩個組件，一個 product-list 一個top-bar耽装，將這些文件當一個組件處理肯定是不對的愤炸，咱們這么處理下
bit add ./src/components/ProductList/* --id product-list --main ProductList.vue
- 看下狀態(tài)
bit status
image.png
6.編譯打包bit tag，這里是vue單文件掉奄，官方提供了編譯器給我們用规个，我們搞了兩個組件，要告訴bit打包哪一個挥萌，否則加上--all全部打版本绰姻。
image.png
沒有去安裝vue的編譯器，是因為他這DEMO已經(jīng)幫我們配置了編譯器引瀑，否則我們需要執(zhí)行bit import bit.envs/compilers/vue --compiler
image.png
image.png
7.發(fā)布組件bit export這里要在https://bit.dev/上注冊用戶，并創(chuàng)建組件集合榨馁。我這里alasq是用戶名alasq-ui是集合名稱憨栽，也可以叫namespace 。注冊好用戶 先bit login一下翼虫，后面去export就不用輸入賬號密碼了屑柔。
- 看下成果
總結
bit這個項目的創(chuàng)意確實能解決項目中的實際問題，但是我在公司內(nèi)網(wǎng)的環(huán)境下珍剑，基本上無法正常使用它的功能掸宛。主要原因是@bit/XXX 下面包是部署在他們自己的bit.dev服務上的，而不是托管在npm服務上招拙，而內(nèi)網(wǎng)下不能訪問他們的服務唧瘾。如果能訪問到他們的網(wǎng)絡也需要設置下npm config set @bit:registry https://node.bit.dev
Bit距離推廣開來還差一個BitLab
bit適用于前端項目集群，適合體量很大的公司（BAT之類的）
但是這種公司用的工具都是需要能私有化部署的别凤。
而小型企業(yè)總共就那么幾個前端項目,沒必要用他饰序。
