1、背景
公司有多個前端項目，每個項目獨立部署，各個項目里可能會使用相同的組件或者頁面。對于這樣的組件或者頁面如何管理呢？我們可以把公共的組件或者頁面抽離，單獨存放在一個項目里，然后在其他項目里引入這個公共的項目
2、方案
2.1 創建一個公共組件項目commonpack（名字自己定義），如下圖
outPages目錄里是公共組件pageA和pageB，然后在根目錄下創建index.js,向外暴露組件pageA和pageB。index.js文件里面代碼如下
import pageA from './outPages/pageA'
import pageB from './outPages/pageB'
export {
pageA,
pageB
}
2.2 創建一個標準的前端項目packageone,packagetwo，那么packageone,packagetwo如何來引入公共組件項目commonpack里的組件pageA和pageB呢？有3個方案。
方案一：npm發布引用
公共組件項目commonpack的組件編寫完成后，將其發布到npm。開發packageone,packagetwo的人員通過npm install命令將commonpack以node_module的方式引入
npm install commonpack --save
另外，每次改動代碼再次發布時，需要修改package.json文件中的版本號，不然發布不成功。
這種方法在開發階段不便捷，改個公共組件，改完還得發包，發完后其他項目使用還得從新安裝。
方案二：npm link
首先進入commonpack包，在控制臺輸入
npm link
這會創建一個軟連接，并保存到目錄C:\Users\Administrator\AppData\Roaming\npm\node_modules下面。
然后進入packageone和packagetwo，在控制臺輸入
npm link commonpack
這就將這個公共的項目通過軟連接的方式引入到項目里面來了。下圖可以看到在node_modules中common包和其他的包文件夾樣式是不一樣的，common文件夾只是一個軟鏈接。
這時修改commonpack項目下面的任意代碼都會實時生效，不用打包，不用更新引入包，也不用重啟。
需要注意的是，當項目包依賴更新后，也就是執行了 npm install xxx 之后，需要重新link common項目。而且使用npm link后本地package.json里沒有記錄，無法直觀的查看本地包的引用。
方案三：npm本地file引用（推薦）
分別進入packageone和packagetwo，在控制臺輸入命令：
npm install ../commonpack/
其中/commonpack/是commonpack的相對路徑，這里也可以輸入絕對路徑。
這樣就將commonpack這個工程以node_module的方式引入到packageone和packagetwo項目中了。可以正常使用commonpack在index.js中導出的組件了。
命令執行完后，package.json里會多一條記錄
同樣這時修改common項目下面的任意代碼都會實時生效，不用打包，不用更新引入包，也不用重啟。而且在package.json中有引入記錄。
3、舉例
我們在packageone項目里引入公共組件pageA和pageB
效果如下
