VUE+TS+WEBPACK框架的项目实践

一、作者简介

WONDER专注于框架的研究，致力于提升效能，解放生产力。包括但不限于设计流程化，重构流程化，前端流程化，基于数据流、状态流的自动化测试。致力于基于javascript语言的全平台解决方案的研究（包括前端(vue为核心)，后端(thinkjs为核心)，终端(weex为核心、小程序为辅助)），目标以「技术引擎」的思想为业务侧提供强劲动力和生产力。

二、前言

很久以前在WONDER读书的时候，大家经常用记事本写原生代码的能力作为一个人写代码能力的评判标准。会对用jQuery+Dreamweaver（那个时候还没有Webstorm这种神器）嗤之以鼻。回到现在，特别厉害的大神对一些框架也嗤之以鼻，对于一些框架的使用心得都拉入了演讲主题的黑名单。

这些现象的本质是什么，在于牛X的人认为使用这些框架的人「没啥技术含量」，显得不够牛X，逼格不够。但站在项目的角度和团队的一致性角度，逼格高低who care。质量和效率才是第一位的要素。框架的深入研究和合理运用才是大势。我们期待有一天，动动鼠标就可以完成以前可能需要加班加点才能干的活，剩下的时间陪陪家人，陪陪爱人，养养花花草草。

另外随着最近AI智能的兴起，可以预见智能编程和云编程是未来的大势所趋。让我们开始打好基础，迎接未来的变迁。

三、框架的选型

没有什么框架是全能的，都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。我们个性化业务是基于移动端的多页面应用。我们综合考虑之后，决定使用vuejs+typescript+webpack2来作为现在和将来的核心主框架，未来的演变也基于此基础。

1、为什么使用vuejs

早些年，前端的MVVM框架呈现爆发式的增长，比如angular，react，vuejs，avalon，meteor。对比过这些框架，最终选择了vuejs作为我们业务的「核心引擎」。原因如下：

1）angular和react虽然火爆，但是学习曲线还是太陡了，需要理解很多东西，上手不易。vuejs上手非常容易，语法简单。我们试验过，一个有前端基础但没有接触过vuejs的同学，基本上一天就可以上手开发简单应用。几天之内学会模块组件的概念基本就可以完成中等复杂的业务。这是其它框架无法相比的。

2）vuejs的文档是非常友好的，当然现在其它框架的文档建设也在加强。这也告诉我们一个东西是否能普及开，核心有两点，一是本身足够好用，二是足够方便理解。vuejs做到了这点，所以它火了。

3）vuejs体积小适合移动端业务，vuejs在gzip压缩后的代码是react的一半。而且移动端基本没啥兼容性问题。PC的话兼容IE9+。如果是PC业务，其实我们现在也只是兼容IE9+。把时间浪费在兼容性问题上完全是浪费生命。所以现在的前端开发者，感谢这个时代吧。

4）vuejs最新的版本中也逐步借鉴学习了一些其它框架的优秀的思想，能学习和使用一种框架用到深处，我想是足够满足我们的业务需求的。

2、为什么使用typescript

1）数据流结构规范化的重要性

在业务需求的中级阶段，我们意识到数据流结构规范化的重要性。vuejs因为本质是MVVM框架，引入了数据流的概念。但JS是弱类型语言，数据流本身比较随意，比如一个Button的属性，基本属性有按钮文字(text)，按钮状态(status)，按钮进度(process)等三个基本数据属性。但是团队中不同人可能有自己的想法，关于一个Button的定义命名都有可能不一样。长期看来，注定无法维护。这时候数据结构的规范（接口，强类型）显得非常重要。引入这些概念，对基本组件的定义和规范在代码编写阶段自然就形成了约定（不遵守规范，编译都通不过），这比文档规范约束有效和方便得多。

typescript恰好就是为此类需求而诞生的࿰