初體驗egg-vue-singal-page

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

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

相關文章