心路历程：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，须要在严格模式下才能使用