egg在koa框架的基礎上進行了封裝,並集合了現今熱門的vue、react框架,支援服務端渲染,可以說是全端開發的一個優秀實踐。關於demo和api,可以在官網自行檢視。這裡只對本人覺得比較有意思的一些點進行總結。
打包、構建
egg為了統一前後端程式碼的構建,對webpack進行了進一步的封裝,稱之為easywebpack,內建了一些常用的loader、plugin,簡化了站點的基礎配置。
module.exports = {
egg: true,
framework: 'vue',
entry: {
include: ['app/web/page'],
exclude: ['app/web/page/[a-z]+/component'],
loader: {
client: 'app/web/framework/vue/entry/client-loader.js',
server: 'app/web/framework/vue/entry/server-loader.js',
}
},
alias: {
},
dll: [],
loaders: {},
plugins: {
serviceworker: true
},
done() {
}
};
複製程式碼
其中framework對應其內建的幾個打包方案,entry為構建的入口,entry.loader是入口的載入模板,在這裡是指'app/web/page'下面所有的vue檔案都會使用這個loader進行載入,如果是服務端渲染則使用server-loader,反之為client-loader,這兩者有一個關聯的紐帶store,下面再介紹。在服務端渲染,通常需要資料在渲染的時候就要準備好,這時候可以給vue的檢視一個自定義的特殊方法preFetch(你喜歡就好)通過promise來確保資料返回再渲染檢視。
vue檢視可能在前端渲染,也可能再後端渲染,這裡可以說是Vue初始化起點。因此也可以在這裡載入一些公共的filter、directive、component等。
store狀態統一
一套程式碼,支援前後端渲染,區別在於view的渲染交給服務端還是客戶端,對於資料最好始終保持一致。那在服務端初始了store裡面的一個list之後,如何保證在客戶端也能獲取到這個list的資料? 這裡主要運用了vuex的這個方法
//替換 store 的根狀態,僅用狀態合併或時光旅行除錯。
replaceState(state: Object)
複製程式碼
egg在服務端渲染後轉成html時,會把當前的store.$state物件轉成json,插一段script標籤到html裡,把服務端的state傳送到客戶端,儲存在一個window下的全域性變數裡,在客戶端執行時再把它的值初始化到客戶端的store裡
if (options.store) {
options.store.replaceState(Object.assign({}, window.__INITIAL_STATE__, options.store.state));
} else if (window.__INITIAL_STATE__) {
options.data = Object.assign(window.__INITIAL_STATE__, options.data && options.data());
}
複製程式碼
easywebpack內建變數
easywebpack內建了一些全域性變數,可以讓你在編譯的過程中做一些定製需求 http://hubcarl.github.io/easywebpack/webpack/env/
靈活的後端服務開發
egg內建了controller、service、router模組,而且都可以擴充基類,活生生的java風格,controller裡可以通過ctx變數訪問當前的req、rep、config等。定時任務、服務擴充、還有各種配置,基本上滿足了服務層的介面開發,再加上無縫的前後端同步渲染,可以說把體驗和技術都完美地結合了。
只是粗淺地介紹了egg的demo體驗,有不對的地方還望指正。