在 Egg 里面,有插件,也有框架,前者還包括了 path 和 package 兩種加載模式,那我們應(yīng)該如何選擇呢?
本文將以實(shí)例的方式,一步步給大家演示下,如何漸進(jìn)式地進(jìn)行代碼演進(jìn)。
全部的示例代碼可以參見 eggjs/examples/progressive。
最初始的狀態(tài)
假設(shè)我們有一段分析 UA 的代碼,實(shí)現(xiàn)以下功能:
通過之前的教程,大家一定可以很快地寫出來,我們快速回顧下:
對應(yīng)的代碼參見 step1。
目錄結(jié)構(gòu):
example-app ├── app │ ├── extend │ │ └── context.js │ └── router.js ├── test │ └── index.test.js └── package.json
|
核心代碼:
// app/extend/context.js module.exports = { get isIOS() { const iosReg = /iphone|ipad|ipod/i; return iosReg.test(this.get('user-agent')); }, };
|
插件的雛形
我們很明顯能感知到,這段邏輯是具備通用性的,可以寫成插件。
但一開始的時(shí)候,功能還沒完善,直接獨(dú)立插件,維護(hù)起來比較麻煩。
此時(shí),我們可以把代碼寫成插件的形式,但并不獨(dú)立出去。
對應(yīng)的代碼參見 step2。
新的目錄結(jié)構(gòu):
example-app ├── app │ └── router.js ├── config │ └── plugin.js ├── lib │ └── plugin │ └── egg-ua │ ├── app │ │ └── extend │ │ └── context.js │ └── package.json ├── test │ └── index.test.js └── package.json
|
核心代碼:
- app/extend/context.js 移動到 lib/plugin/egg-ua/app/extend/context.js。
- lib/plugin/egg-ua/package.json 聲明插件。
{ "eggPlugin": { "name": "ua" } }
|
- config/plugin.js 中通過 path 來掛載插件。
// config/plugin.js const path = require('path'); exports.ua = { enable: true, path: path.join(__dirname, '../lib/plugin/egg-ua'), };
|
抽成獨(dú)立插件
經(jīng)過一段時(shí)間開發(fā)后,該模塊的功能成熟,此時(shí)可以考慮抽出來成為獨(dú)立的插件。
首先,我們抽出一個(gè) egg-ua 插件,看過插件文檔的同學(xué)應(yīng)該都比較熟悉,我們這里只簡單過一下:
目錄結(jié)構(gòu):
egg-ua ├── app │ └── extend │ └── context.js ├── test │ ├── fixtures │ │ └── test-app │ │ ├── app │ │ │ └── router.js │ │ └── package.json │ └── ua.test.js └── package.json
|
對應(yīng)的代碼參見 step3/egg-ua。
然后改造原有的應(yīng)用,對應(yīng)的代碼參見 step3/example-app。
- 移除 lib/plugin/egg-ua 目錄。
- package.json 中聲明對 egg-ua 的依賴。
- config/plugin.js 中修改依賴聲明為 package 方式。
// config/plugin.js exports.ua = { enable: true, package: 'egg-ua', };
|
注意:在插件還沒發(fā)布前,可以通過 npm link 的方式進(jìn)行本地測試,具體參見 npm-link。
$ cd example-app $ npm link ../egg-ua $ npm i $ npm test
|
沉淀到框架
重復(fù)上述的過程,很快我們會積累了好幾個(gè)插件和配置,并且我們會發(fā)現(xiàn),在團(tuán)隊(duì)的大部分項(xiàng)目中,都會用到這些插件。
此時(shí),就可以考慮抽象出一個(gè)適合團(tuán)隊(duì)業(yè)務(wù)場景的框架。
首先,抽象出 example-framework 框架,如上看過框架文檔的同學(xué)應(yīng)該都比較熟悉,我們這里只簡單過一下:
目錄結(jié)構(gòu):
example-framework ├── config │ ├── config.default.js │ └── plugin.js ├── lib │ ├── agent.js │ └── application.js ├── test │ ├── fixtures │ │ └── test-app │ └── framework.test.js ├── README.md ├── index.js └── package.json
|
- 對應(yīng)的代碼參見 example-framework。
- 把原來的 egg-ua 等插件的依賴,從 example-app 中移除,配置到該框架的 package.json 和 config/plugin.js 中。
然后改造原有的應(yīng)用,對應(yīng)的代碼參見 step4/example-app。
- 移除 config/plugin.js 中對 egg-ua 的依賴。
- package.json 中移除對 egg-ua 的依賴。
- package.json 中聲明對 example-framework 的依賴,并配置 egg.framework。
{ "name": "progressive", "version": "1.0.0", "private": true, "egg": { "framework": "example-framework" }, "dependencies": { "example-framework": "*" } }
|
注意:在框架還沒發(fā)布前,可以通過 npm link 的方式進(jìn)行本地測試,具體參見 npm-link。
$ cd example-app $ npm link ../egg-framework $ npm i $ npm test
|
寫在最后
綜上所述,大家可以看到我們是如何一步步漸進(jìn)地去進(jìn)行框架演進(jìn),這得益于 Egg 強(qiáng)大的插件機(jī)制、代碼的共建,以及復(fù)用和下沉,這些步驟竟然可以這么地?zé)o痛來得以完成!
- 一般來說,當(dāng)應(yīng)用中有可能會復(fù)用到的代碼時(shí),直接放到 lib/plugin 目錄去,如例子中的 egg-ua。
- 當(dāng)該插件功能穩(wěn)定后,即可獨(dú)立出來作為一個(gè) node module 。
- 如此以往,應(yīng)用中相對復(fù)用性較強(qiáng)的代碼都會逐漸獨(dú)立為單獨(dú)的插件。
- 當(dāng)你的應(yīng)用逐漸進(jìn)化到針對某類業(yè)務(wù)場景的解決方案時(shí),將其抽象為獨(dú)立的 framework 進(jìn)行發(fā)布。
- 當(dāng)在新項(xiàng)目中抽象出的插件,下沉集成到框架后,其他項(xiàng)目只需要簡單的重新 npm install 下就可以使用上,對整個(gè)團(tuán)隊(duì)的效率有極大的提升。
- 注意:不管是應(yīng)用/插件/框架,都必須編寫單元測試,并盡量實(shí)現(xiàn) 100% 覆蓋率。
更多建議: