1倦逐、背景
公司有多個(gè)前端項(xiàng)目几晤，每個(gè)項(xiàng)目獨(dú)立部署，各個(gè)項(xiàng)目里可能會(huì)使用相同的組件或者頁面禽炬。對(duì)于這樣的組件或者頁面如何管理呢涧卵？我們可以把公共的組件或者頁面抽離，單獨(dú)存放在一個(gè)項(xiàng)目里腹尖，然后在其他項(xiàng)目里引入這個(gè)公共的項(xiàng)目
2柳恐、方案
2.1 創(chuàng)建一個(gè)公共組件項(xiàng)目commonpack（名字自己定義），如下圖
outPages目錄里是公共組件pageA和pageB热幔，然后在根目錄下創(chuàng)建index.js,向外暴露組件pageA和pageB乐设。index.js文件里面代碼如下
import pageA from './outPages/pageA'
import pageB from './outPages/pageB'
export {
pageA,
pageB
}
2.2 創(chuàng)建一個(gè)標(biāo)準(zhǔn)的前端項(xiàng)目packageone,packagetwo，那么packageone,packagetwo如何來引入公共組件項(xiàng)目commonpack里的組件pageA和pageB呢绎巨？有3個(gè)方案近尚。
方案一：npm發(fā)布引用
公共組件項(xiàng)目commonpack的組件編寫完成后，將其發(fā)布到npm场勤。開發(fā)packageone,packagetwo的人員通過npm install命令將commonpack以node_module的方式引入
npm install commonpack --save
另外戈锻，每次改動(dòng)代碼再次發(fā)布時(shí)介汹，需要修改package.json文件中的版本號(hào)，不然發(fā)布不成功舶沛。
這種方法在開發(fā)階段不便捷嘹承，改個(gè)公共組件，改完還得發(fā)包如庭，發(fā)完后其他項(xiàng)目使用還得從新安裝叹卷。
方案二：npm link
首先進(jìn)入commonpack包，在控制臺(tái)輸入
npm link
這會(huì)創(chuàng)建一個(gè)軟連接坪它，并保存到目錄C:\Users\Administrator\AppData\Roaming\npm\node_modules下面骤竹。
然后進(jìn)入packageone和packagetwo，在控制臺(tái)輸入
npm link commonpack
這就將這個(gè)公共的項(xiàng)目通過軟連接的方式引入到項(xiàng)目里面來了往毡。下圖可以看到在node_modules中common包和其他的包文件夾樣式是不一樣的蒙揣，common文件夾只是一個(gè)軟鏈接。
這時(shí)修改commonpack項(xiàng)目下面的任意代碼都會(huì)實(shí)時(shí)生效开瞭，不用打包懒震，不用更新引入包，也不用重啟嗤详。
需要注意的是个扰，當(dāng)項(xiàng)目包依賴更新后，也就是執(zhí)行了 npm install xxx 之后葱色，需要重新link common項(xiàng)目递宅。而且使用npm link后本地package.json里沒有記錄，無法直觀的查看本地包的引用苍狰。
方案三：npm本地file引用（推薦）
分別進(jìn)入packageone和packagetwo办龄，在控制臺(tái)輸入命令：
npm install ../commonpack/
其中/commonpack/是commonpack的相對(duì)路徑，這里也可以輸入絕對(duì)路徑淋昭。
這樣就將commonpack這個(gè)工程以node_module的方式引入到packageone和packagetwo項(xiàng)目中了俐填。可以正常使用commonpack在index.js中導(dǎo)出的組件了响牛。
命令執(zhí)行完后玷禽，package.json里會(huì)多一條記錄
同樣這時(shí)修改common項(xiàng)目下面的任意代碼都會(huì)實(shí)時(shí)生效，不用打包呀打，不用更新引入包矢赁，也不用重啟。而且在package.json中有引入記錄贬丛。
3撩银、舉例
我們?cè)趐ackageone項(xiàng)目里引入公共組件pageA和pageB
效果如下
