基于Egg.js定制業務Web框架(一) - 框架擴展
前言
談到Node.js Web開發，你會想到的是什么?
- 首先是框架選型：Express、Koa、NestJS、EggJS等，需要從繁多的框架中選擇一個適合團隊的。
- 框架選好之后，需要初始化項目，安裝依賴、插件、中間件、配置常見庫;
- 假如再一次做新項目，還得從頭初始化再來一次。好一點的可以封裝一個骨架，從骨架中生成新項目，周而復始。
我們先想想這樣做的缺陷是什么?
- 如果沒有骨架，團隊成員技術選型不一致，變成遍地開花;每個新項目維護都有學習成本。
- 即便有骨架，發生一些升級也需要每個項目都統一升級一遍，后續也會導致不統一。
基于以上的原因，我們考慮的解法是：基于通用框架封裝一個統一的業務框架，將團隊用到的公共功能下沉到業務框架中。
業務框架封裝
框架選型
為了選擇合適的底層框架，小編整理了awesome-nodejs的倉庫(每個分類按github star數排序)，從Web框架部分可以看到非常豐富，那么我們如何選擇。
awesome-nodejs地址: https://github.com/huaize2020/awesome-nodejs/blob/main/README-zh-CN.md
主流的Web框架選型主要分為兩大流派，基于Express 和 基于Koa，他們都是由同一團隊打造。Express和Koa在設計思路上的區別在于：
- Express本身功能內置了很多中間件，集成度高，使用省心，上手即用;
- Koa使用精簡的內核，更輕量，使用需要使用者做技術選型按需搭建積木;
基于以上的設計思路上的差別，基于對靈活配置型的考慮，筆者選擇了 基于Koa 的 流派。但他們都太底層，對于搭建企業級業務框架還需要做較多定制。
Egg.js是什么
基于上述的訴求，最后小編選擇了Egg.js。
Egg.js地址：https://eggjs.org/zh-cn/
Egg.js是阿里開源的基于Koa2企業級Node.JS框架,其核心設計就是希望基于Egg.js孕育出更多上層框架。
引用官網的一句話
- 我們深知企業級應用在追求規范和共建的同時，還需要考慮如何平衡不同團隊之間的差異，求同存異。所以我們沒有選擇社區常見框架的大集市模式(集成如數據庫、模板引擎、前端框架等功能)，而是專注于提供 Web 開發的核心功能和一套靈活可擴展的插件機制。「——官網」
定制目標
在開始定制業務框架前，我們先設定一下需要定制的目標。
- 擴展Controller，添加API成功/失敗返回結果函數;
- 設置默認模板引擎為 pug;
- 擴展ctx，添加util, 將dayjs作為統一日期處理庫;
編碼
如果對Egg.js不太熟悉，建議可以先學習下Egg.js的基本使用。
框架初始化
通過以下命令，初始化項目。其中 --type=framework 表示框架骨架
villa-framework為框架名和項目文件夾名
- $ npm init egg --type=framework villa-framework
以下是初始化出來的目錄
- villa-framework
- ├── app
- │ ├── extend
- │ └── service
- ├── config
- │ ├── config.default.js
- │ └── plugin.js
- ├── lib
- │ └── framework.js
- ├── test
- │ ├── fixtures
- │ └── framework.test.js
- ├── README.md
- ├── index.js
- └── package.json
其中app、config目錄基本跟正常的Egg.js應用無差異，但增加了framework.js文件，對應用進行擴展。
- // lib/framework.js
- 'use strict';
- const path = require('path');
- const egg = require('egg');
- const EGG_PATH = Symbol.for('egg#eggPath');
- class Application extends egg.Application {
- get [EGG_PATH]() {
- return path.dirname(__dirname);
- }
- }
- class Agent extends egg.Agent {
- get [EGG_PATH]() {
- return path.dirname(__dirname);
- }
- }
- module.exports = Object.assign(egg, {
- Application,
- Agent,
- });
擴展Controller，添加成功失敗返回結果處理函數
- // 以下是Egg.js Controller使用的代碼
- const Controller = require('egg').Controller;
- // 未來修改為
- const Controller = require('villa-framework').Controller;
由上面源碼我們知道，Controller來自egg對象，因此我們只需要替換為我們定義的Controller即可。
- // lib/framework.js 增加
- class Controller extends egg.Controller {
- ok(data) {
- this.ctx.body = {
- success: true,
- data,
- };
- }
- fail(message, code) {
- this.ctx.body = {
- code,
- message,
- };
- }
- }
- // 導出增加Controller
- module.exports = Object.assign(egg, {
- Application,
- Agent,
- Controller,
- });
這樣用戶使用的Controller就變成框架的Controller。
模板引擎設置為 pug
安裝依賴
- $ npm i --save egg-view-pug
啟動插件
- // config/plugin.js
- exports.pug = {
- enable: true,
- package: 'egg-view-pug',
- };
設置view渲染
- // config/config.default.js
- config.view = {
- mapping: {
- '.pug': 'pug',
- },
- };
這樣應用框架就不需要再單獨安裝配置，默認擁有pug模板引擎能力。不同的業務可以根據自己的需求，默認加載并配置一些默認插件。
擴展ctx.util, 將dayjs作為統一日期處理庫
安裝依賴
- $ npm i --save dayjs
app文件夾中新建util文件，添加day.js并導出
- // app/util/dayjs.js
- 'use strict';
- const dayjs = require('dayjs');
- exports.dayjs = dayjs;
因為新增的util不會默認加載，配置自定義加載器。
- // config/config.default.js
- config.customLoader = {
- // 定義在 app 上的屬性名 app.util
- util: {
- directory: 'app/util',
- // 如果是 ctx 則使用 loadToContext
- inject: 'ctx',
- // 是否加載框架和插件的目錄
- loadunit: true,
- },
- };
這樣框架就會默認加載util。
應用創建
接下來我們創建應用，使用上面的villa-framework
初始化應用
- $ npm init egg --type=simple villa-project
- $ npm i --save villa-framework
- $ npm i
- $ npm run dev
將Egg.js上層框架修改為villa-framework
package.json中egg字段中添加 "framework": "villa-framework"
- "egg": {
- "framework": "villa-framework",
- },
修改controller進行測試
- 'use strict';
- // app/controller/home.js
- const Controller = require('villa-framework').Controller;
- class HomeController extends Controller {
- async index() {
- const { dayjs } = this.ctx.util.dayjs;
- const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
- await this.ctx.render('index.pug', { now });
- }
- renderOk() {
- this.ok('hi, egg');
- }
- renderFail() {
- this.fail('fail', 200);
- }
- }
- module.exports = HomeController;
添加路由
- 'use strict';
- // app/router.js
- /**
- * @param {Egg.Application} app - egg application
- */
- module.exports = (app) => {
- const { router, controller } = app;
- router.get('/', controller.home.index);
- router.get('/ok', controller.home.renderOk);
- router.get('/fail', controller.home.renderFail);
- };
添加首頁模板
在app中創建view文件夾，并添加index.pug
- html
- head
- title hello world
- body
- p hello world
- p #{now}
啟動后即可看到演示的結果。
打開 http:///127.0.0.1:7001
打開 http:///127.0.0.1:7001/ok
打開 http:///127.0.0.1:7001/fail
總結
以上通過實現擴展Controller，擴展ctx，以及添加默認插件，演示了對Egg.js基本的擴展。
當然對于一個完整的業務框架，還缺少很多東西，但以上提供了一種對Egg.js的擴展的思路，希望可以為你擴展提供思路。
當前系列作為《基于Egg.js定制業務Web框架》系列一， 后續將持續輸出：定制IoC容器，定制注解系統、monorepo改造、框架CLI系列，敬請關注。
框架地址：https://github.com/huaize2020/blog/tree/main/projects/villa-v1/villa-framework
應用調用地址：https://github.com/huaize2020/blog/tree/main/projects/villa-v1/villa-project
awesome-nodejs: https://github.com/huaize2020/awesome-nodejs/blob/main/README-zh-CN.md
