心路歷程：vue2.0+webpack+koa2 先後端同構實踐（一）

吐槽篇

作了vue2.0 + webpack + koa先後端同構實踐，有幾點想吐槽下：

es6

看源碼先學es6，接着還得學babel。一直沒有在正式項目中引入es6，雖然寫es6是流行、是趨勢，可是非必須，目的是讓項目在不斷迭代同時技術能平穩過渡，秉持少作就是少錯————babel相關問題也省了。

.vue

此次用了.vue文件，用.vue文件最重要的緣由是想用類是fis中同名依賴的方案，不想在js裏面寫一句require（style.css）如此醜爆了的代碼，最後發如今vscode裏面對.vue文件的js不作語法校驗（用的是eslint），又得查資料（目前依然沒有解決）。

vue-loader有兩點很方便：

1. scope

2. 不用去手動去寫css、template的依賴

關於第二點，我以爲帶來一個問題，在vscode中作eslint語法檢查或者格式化html內的css、js。目前格式化還勉強能夠，可是elint語法檢查尚未沒有解決。

extract-text-webpack-plugin有個坑（不知道算不算bug）須要特別注意Order in output CSS file
大體緣由應該是在引入了路由後致使的，不用.vue文件在這種場景下同樣會有問題。

vue2.0

vue2.0的初步嘗試，要在服務端渲染，必須用新的方法render來代替template，那麼問題又來了，官方例子中在render中用的是jsx（和react的jsx相近），並且和寫vue模版綁定方式有區別，也沒找到雙向綁定的方案，若是加上vuex使用單向數據流好像沒什麼問題。還有就是，不能格式化代碼了，沒找到能夠js中混用的jsx的格式化插件，或者像相似fis裏的__inline功能的插件（忽然好懷念fis）

順帶吐槽下1.0，在綁定事件的時候發現一個坑

<div @anyevent="anymethod
 "></div>

經過this.$emit('anyevent')沒法觸發anymethod。找了我好半天才看出端倪
最後發現是由於恰好在anymethod後換行了，方法名後面多了一個空格沒看出來。
刪除空格後就正常了，但這算不算vue的bug呢？

koa2

vue2.0提供了寫入流的接口，防止編譯字符串過大而引起阻塞，好東西得用啊，but，問題又來了

http://koa.bootcss.com/#context
Koa 不支持 直接調用底層 res 進行響應處理。請避免使用如下 node 屬性：

• res.statusCode

• res.writeHead()

• res.write()

• res.end()

koa裏提供的api禁止調用底層的方法寫流（不是徹底禁止）。又得找方案。

webpack

vue2.0和koa的開發體驗很不錯，但構建工具卻十分不省心，用了幾周webpack，依然對它沒有好感，fis3以前一直用的挺好。https://www.zhihu.com/questio...

fis3

至於爲何沒有繼續用fis3，最主要是幾個痛點：

• fis的構建流程，容易理解，過程可控，但到深刻使用發現有些流程並不合理，好比爲何要先單文件編譯，好比壓縮、加md5，爲何不等打包階段後對最後對產出物進行這樣的編譯的呢，雖然能夠經過配置達到效果，但這個使得fis的配置複雜度增長，若是必定要這樣，反而以爲gulp這種基於任務的方式更靈活。

• fis不是專門作打包的工具，因此webpack這方面確實更勝一籌。我的以爲有了打包方案，seajs，requirejs,或者modjs這類前端加載器成了雞肋。

• 至於生態比不上webpack，對我來講只是瘙癢，最後仍是看如何適應用戶需求，提高開發體驗.

大小寫

開發時，用的是window系統，遷移到linux服務器上編譯源碼時，發現找不到vuex模塊，原來是window不區分大小寫，因此編譯經過了

import Vuex from 'Vuex'  // 錯誤的寫法vuex的包名是小寫的
import Vuex from 'vuex'  // 正確的寫法

node 版本選擇

線上運行的是Node v5.12.0 (Stable)

開始的選型是Node v4.4.7 (LTS)，考慮到強依賴的第三方包須要支持NPM 3，考慮到穩定性不敢太激進的使用最新的6.x，則總選了最新的stable

大體的思路不算嚴謹，由於目前只是用來開發輔助功能，對node研究不是太深，只能暫定這個方案。

ES6的支持

Node v5.12.0 (Stable)對ES6兼容性還有一些問題
例如: let const，須要在嚴格模式下才能使用