隨著公司前端項(xiàng)目的增多, 大家會(huì)發(fā)現(xiàn)各個(gè)項(xiàng)目中很多資源都是是大同小異的闲孤，這就引發(fā)了一個(gè)話題，如何跨項(xiàng)目共用前端資源, 這里的資源泛指前端涉及到的所有靜態(tài)資源, 常見(jiàn)的有 HTML/CSS/JS/圖片等等.
所謂共用前端資源, 就是將公共的前端資源提取出來(lái), 例如公共樣式/公共邏輯/公共組件/公共圖片資源等等, 讓多個(gè)項(xiàng)目來(lái)引用, 避免復(fù)制多份, 避免重復(fù)開(kāi)發(fā), 統(tǒng)一管理和維護(hù)潮尝。只要更新公共資源,其他引用的項(xiàng)目就可以同步更新诉探，提升開(kāi)發(fā)效率陈辱，降低開(kāi)發(fā)成本丰滑。
自研方案 npm 和 Webpack
想共用前端資源, 必須先將公用的前端資源以包的形式統(tǒng)一地管理起來(lái), 形成一個(gè)公共倉(cāng)庫(kù), 在項(xiàng)目中聲明依賴(lài)的前端資源包, 通過(guò)工具來(lái)下載依賴(lài)的具體資源文件。
開(kāi)發(fā)時(shí)使用模塊打包器分析出具體的依賴(lài)文件, 打包出項(xiàng)目依賴(lài)的所有前端資源腺劣。
因此我們需要一個(gè)包管理器和模塊打包器, 即可實(shí)現(xiàn)夢(mèng)寐以求地共用前端資源绿贞。
包管理器: npm
npm is the package manager for JavaScript manage dependencies in your projects
管理項(xiàng)目級(jí)別的依賴(lài), 必要時(shí)搭建一套 npm 私服
模塊打包器: Webpack
Webpack is a module bundler for modern JavaScript applications it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
構(gòu)建工具分析并打包依賴(lài), 現(xiàn)在你可以放心大膽地修改和刪除項(xiàng)目歷史遺留的靜態(tài)資源文件了
任何資源都可以視為一種依賴(lài), 在構(gòu)建時(shí)分析出資源的引用關(guān)系
如果某個(gè)資源是僵尸資源, 刪除后不會(huì)引發(fā)構(gòu)建失敗, 因?yàn)橐呀?jīng)沒(méi)有任何文件引用(依賴(lài))它了
在沒(méi)有構(gòu)建工具分析依賴(lài)的年代,你只能通過(guò)全局搜索的方式來(lái)確定一個(gè)文件還有沒(méi)有用,但可能還是沒(méi)有辦法下達(dá)刪除的決定(萬(wàn)一其他項(xiàng)目引用了呢?)
接下來(lái), 共用前端資源的關(guān)鍵就是將公共的模塊發(fā)布到 npm 里面, 然后就是在各個(gè)項(xiàng)目聲明依賴(lài)實(shí)際使用了。
實(shí)際使用的方式就落在了: 如何通過(guò) Webpack 在 HTML/CSS/JS 文件中引用 npm 模塊(即 node_modules 文件夾), 或者是 npm 模塊中的文件
HTML:
<!-- 引用 npm 模塊 ionicons 中的文件 -->
<img src="~ionicons/dist/svg/ios-sunny.svg" width="50" height="50">
復(fù)制代碼
CSS:
/* 導(dǎo)入 npm 模塊: normalize.css, 會(huì)自動(dòng)去找 main 文件 */
@import url(~normalize.css);
.test-npm-res {
? ? /* 引用 npm 模塊 ionicons 中的文件 */
? ? background-image: url(~ionicons/dist/svg/ios-partly-sunny-outline.svg);
}
復(fù)制代碼
JS:
// 導(dǎo)入 npm 模塊 ionicons 中的文件
import svg from 'ionicons/dist/svg/ios-sunny-outline.svg';
復(fù)制代碼
示例
我們只需要關(guān)注使用的模塊, 不再需要關(guān)注模塊的依賴(lài)了
共用靜態(tài)資源文件: 在各個(gè)項(xiàng)目中引用公共的公司 Logo 圖片
將公共靜態(tài)資源在 npm 上發(fā)布為一個(gè) company-common-res 的模塊包
