初體驗egg-vue-singal-page

浮華似水流年了誰發表於2018-03-27

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體驗,有不對的地方還望指正。