初體驗egg-vue-singal-page

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