【ArchSummit】如何通过AIOps推动可量化的业务价值增长和效率提升?>>> 了解详情
写点什么

Vuejs+TypeScript+Webpack2 框架的项目实践

  • 2019-08-21
  • 本文字数:4667 字

    阅读完需:约 15 分钟

Vuejs+TypeScript+Webpack2框架的项目实践

一、框架的选型

没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。我们个性化业务是基于移动端的多页面应用。我们综合考虑之后,决定使用 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 恰好就是为此类需求而诞生的,而且充分考虑到兼容性。对之前 JS 的代码完全兼容。

2)使用 ES6/ES7 特性,具有优秀的自编译能力

很多 ES6/ES7 项目的编译都是通过 babel 进行处理的,不熟悉的朋友可能整配置都要搞半天,而且 babel 还有 babel5 和 babel6 的区别,两者也并不太兼容。


typescript 具有自编译的能力,不需要额外引入 babel。只依赖 tsconfig.json,将此文件放到项目的根目录,即可全局配置。


typescript 不仅能满足 babel 的编译的功能,而且比 babel 做得更好。比如很重要的 async/await 语法,babel 在使用的时候会引入相当大的一个文件:



typescript 则非常干净利落,就几十行代码:


3)typescript2.0 引入了 @types,系统性地解决了绝大部分公共库的类型定义问题

WONDER 迟迟没有在生产项目中使用 typescript 的一个很大的原因就是类型定义实在是太麻烦了。从 DefinitelyTyped 到 typings,最后是 @types。微软自己也发现有这么个问题,所以也在一直演进。目前来看,@types 算是一个不错的方案。充分利用 npm 进行管理和维护,且绝大多数公共库都已经支持 @types,比如 @types/jquery、@types/node 等。vue 更先进一些,直接本身 vue 模块即支持 typescript 的类型定义。不需要额外的 @types/vue。也就是’npm install vue’即可在 typescript 中正常使用。

3、为什么使用 webpack2

使用 webpack2 最核心的地方就是使用 tree-shaking 特性,tree-shaking 是大势所趋,符合代码极简主义,提高代码使用率。对于代码的精简还是挺高的,大概可以优化 30%的代码体积。


要使用 webpack2 的 tree-shaking,前提条件就是使用 ES6 的 module,这是核心根本。所以意味着所有的代码要基于 ES6 的 module 来写。建议从新项目入手,代价较小。


阶段性小结:

1、使用 vuejs,从数据驱动的角度来处理逻辑,操作 DOM,可以完全抛弃 zepto/jQuery

2、由于使用数据驱动,数据本身的结构由为重要,再加上方便优雅地使用 ES6/ES7,我们引入了 typescript 作为主要开发语言

3、利用 ES6 的 module 的重构代码,通过 webpack2 的 tree-shaking 来达到简化代码体积,提高代码利用率的目的。

二、项目实践

从本章节起开始结合线上项目来讲讲框架的使用和细节。本次介绍的项目名叫「个性化体验卡」。基本上借助此项目从头搭建了一套基础底层,项目本身是多页面项目。

1、项目结构

首先是项目结构,基本上只需要一个公共库目录和项目本身目录即可。



公共库目前搭基础,包含 common 和 shim 两个即可,这里特别指出的是 mqq 的库被重写后,从原先的 1400 行,减少到 200 行。去除了相当多的无用代码,极简风格。


项目本身目录也很好理解:


common——项目的公共方法目录,比如 helper 之类的


comp——项目的组件目录,核心目录。以后各个业务都是组件复用


css——CSS 目录,发布时会 inline 到 html 中


html——入口文件目录,基本就是一个框架,如下图所示:



由于 tree-shaking 的因素,我们的首屏业务逻辑代码可以直接 inline 到页面当中,复杂的次屏逻辑可以以动态组件的形式加载。形成直出+主内嵌 JS+异步动态 JS 组件的优雅的加载模式。


细节提示:

这里有个开发细节和大家讲解一下,我们在上图中,我把 vuejs 并没有以模块的形式打入到 detail.entry.js 里,因为一是额外增加了 js 的体积,二是我们的项目是多页面的项目,公共 vuejs 是可以也有必要进行缓存和复用的。

这里采用外链离线包+强缓存的形式是比较合理的。

2、配置文件

初学者在做配置的时候一般比较蒙逼,所以有脚手架这么个东西来帮助初学者快速搭好环境,但实际上每个人从事的项目不完全一样。脚手架并不能完全满足需求。所以了解一下配置的基本原理还是有相当必要的。


本文是基于 vuejs、typescript、webpack2 的框架,用 gulp 进行把几个东西串起来。


因为文中的脚手架结合了一些项目本身的各种功能,这里先讲几个核心需要注意的点。

1)npm install 几个最重要的模块

gulp、vue、vue-class-component、typescript、webpack、@types/node、ts-loader、text-loader


这几个装了以后,基本上项目用到的最核心模块都有了。

2)配置 tsconfig.json


这个配置非常非常关键,建议初学者直接 Copy,每个配置都有用,我也写了注解,不要随意删减。

3)webpack.config.js 配置


细节提示:

注意红框部分的地方,一定不要配置错。

externals 这样写的目的是不要把 vue 打包进来,一定要注意大小写。大小写不对就容易出错。不理解的初学者直接 Copy。

rules 就只配这一个就可以了,其实就是对于模板 html 文件的处理。由于我们的代码(IDEWebStorm 自带的特性)在编写的时候就转换成了 js,所以 webpack 不需要加 ts-loader。但最理想的状态就是编译过程交给 webpack 或 gulp 进行,IDE 不自动编译 js 文件,这样源代码比较纯粹。

3、vuejs 的组件写法

vuejs 其实是一个很灵活的框架,可以有很多种写法。vue 的组件看官方文档也有很多写法。但在 typescript 中,写法和之前有很大变化(但其实和 react、angularjs 很像了)。如果不这么写,你会发现你的编辑器到处报错。。So,目前我们线上项目中的组件大概长这个样子:



这就是一个组件,如何使用呢,我们看入口文件的 JS。



更多细节可以参考官方 DEMO:https://github.com/vuejs/vue-class-component/tree/master/example


这种写法是很优雅和可维护的,以及配合 typescript 的特性,感觉非常的愉快!

4、编辑器的选择

我们项目组的同学基本就两种编辑器,一种是 Webstorm,一种是 vscode。其实 Webstorm 除了卡,其它都比 vscode 好用。


这两种编辑器,Webstorm 自带编译功能,所见即所得。配置好 tsconfig.json,剩下都省心。vscode 略复杂,需要建立一个 task,然后在跑项目的时候执行 build。也可以达到类似的效果。

5、环境搭建的坑

其实如果初学者前面不按照我说的一些细节来操作的话,很容易在搭环境上一堆编译报错,编辑器语法报错。会影响初学者的学习热情。所以 WONDER 这里会尽量在抽离一个相对普适的脚手架给各位使用,尽请期待。


其实初学者按照我上述的配置操作的话,一般问题也不是太大。有遇到任何编译报错或者语法报错,欢迎和 WONDER 交流,我也作下记录。我的微信号是:wonderhwang

6、兼容性问题

项目实践过程中,有些兼容性问题这里提出来。避免大家再踩。


1)首先关于 Promise 的兼容性实践证明如果你是基于手 Q 或微信的移动端业务,可以不需要引入 Promise-Polyfill。PC 端还是建议需要 Promise-Polyfill。PC 对文件大小不敏感,所以加下 polyfill 无所谓。移动端没有必要,主流都支持。目前线上业务也没有收到什么反馈页面功能由兼容性异常的。


2)有些写法尽量不要用,WONDER 已知的就是不要使用 ES6 的模板字符串。


首先虽然我们配置了 tsconfig.json,但是并不是所有的语法都转成了 ES5,模板字符串就没有完全转义。在 IOS8 的系统里面兼容性有问题,模板会报错,程序会出问题。


3)不要使用’Object.assign’,这个也不会转义,在 IOS8 系统也有兼容问题。而且也不是很优雅。WONDER 找到一个优雅的写法,就是使用 ES6 的三点解构符’…’,虽然这两者并不完全相同,且三点解构符其实也并不是用在这里的。只是结合我们的使用场景,比较巧妙。


我们使用最多的无非就是两个 object 对象参数的合并。如果’Object.assign’有兼容性问题,又不想写诸如’_.extend’。那么就试试这种写法,如下所示:



我们看看 typescript 如何翻译变成这里的,对应的 JS 如下:



我们注意到’__assign’方法,其实就是翻译了三点解构符。果然如此:


7、数据接口

这个是项目实践过程中的细节了。interface 这里指的是数据接口,也就是我们熟知的 DAO 层。JS 之前过于灵活,现在有 typescript 辅助,数据结构的定义会更加清晰和规范。不符合规范会报错的。


8、TS 中的 DOM 操作

document.querySelector('.group-qp')).style.display = 'none';
复制代码


这么写 TS 是会报错的:



原因是 document.querySelector 返回的是 Element 对象,Element 对象并没有 style 方法,只有继承的 HTMLElement 对象才有 style 方法,所以这里要写为:


(<HTMLElement>document.querySelector('.group-qp')).style.display = 'none';
复制代码

9、采用事件来处理中等复杂程序的组件通信问题

中等复杂的组件通信建议直接使用 eventbus 的emit,复杂的就使用 vuex。这里组件虽然是用事件进行信息传递,我们还是可以在模板中进行显示的声明,符合 vue 模板显示声明一贯的做法。如下图所示:



组件声明,v-event:xxx,xxx 表示事件名称,后面是传递参数,非常直观。组件的具体监听是:




所有的事件触发和监听都挂载在 eventbus 上面,eventbus 名为「事件总线」,其实本质就是一个 Vue 的实例而已


import eventbus from 'lib/common/eventbus';
复制代码


/** * Created by wonderwang on 2017/7/11. */import Vue from 'vue';
export default new Vue();
复制代码

10、其它问题

1)标签不能用驼峰法,比如在 vue 模板中是不会被正确识别的,应该写成


2)不能用关键字 dialog,可能是 vue 本身的 BUG。


作者介绍:


王鹤,高级前端工程师,隶属于腾讯 SNG 增值产品部。主要负责 QQ 个性化业务的功能开发及技术优化。目前专注于框架的研究,致力于提升效能,解放生产力。


本文转载自公众号小时光茶舍(ID:gh_7322a0f167b5)。


原文链接:


https://mp.weixin.qq.com/s/skNQ2a6FP5TLD41HaRQj3g


2019-08-21 10:391519

评论

发布
暂无评论
发现更多内容

死熬三天三夜,阿里高工码出Java150K字面试宝典,却遭Github全面封杀

Java-fenn

Java 编程 面试 java面试 java;

帮助中心就是在线版的产品使用说明书?并非如此!

Baklib

产品 产品经理 帮助中心 在线编辑 产品说明书

软件测试 | 测试开发 | 环境问题还是测试的老大难?两个步骤轻松搞定

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 精准化测试原理简介与实践探索

测吧(北京)科技有限公司

测试

MobTech 短信验证 Unity插件

MobTech袤博科技

ios android 短信验证

阿里云物联网平台架构——业务架构类

阿里云AIoT

大数据 物联网平台 IoT 平台架构 设备管理

数据中台必备的4个核心能力

阿泽🧸

数据中台 9月月更

大数据平台 CDP 中如何配置 hive 作业的 YARN 队列以确保SLA?

明哥的IT随笔

hadoop spark hive YARN CDP

分享面试阿里、京东、网易等大厂后的面经及面试心得—远程面试

Java-fenn

Java 程序员 技术 面试 java面试

软件测试 | 测试开发 | 移动端App自动化之App控件定位

测吧(北京)科技有限公司

测试

两年工作经验,三面拼多多,最终获得offer!(面经总结)

Java-fenn

Java 编程 程序员 面试 java面试

【荣耀帐号服务】手把手教你快速web接入

荣耀开发者服务平台

前端 Web 服务器 安卓 honor

什么是企业帮助中心?为什么要花钱建立?看这篇文章你就懂了!

Baklib

SaaS 企业 帮助中心 在线编辑

什么是企业知识管理体系?它的基本原则是什么?我们又该怎样做?

Baklib

知识管理 知识 知识管理体系

行业规模将达百亿,低代码是 “银弹” 还是 “鸡肋”?

SoFlu软件机器人

软件测试 | 测试开发 | 原来升职加薪的测试工程师都擅长做接口测试

测吧(北京)科技有限公司

测试

程序员该敬畏每一行代码?填好每一个坑才是!

小小怪下士

程序员 架构 java;

蚂蚁智能容量团队推出 TMaestro 智能参数调节产品

TRaaS

产品 互联网技术

2022前端面试遇到的手写题总结

helloworld1024fd

JavaScript 前端

阿里巴巴高并发架构到底多牛逼?是如何抗住淘宝双11亿级并发量?

Java-fenn

Java 编程 程序员 面试

【喜讯】亚信安慧通过CMMI5级认证

亚信AntDB数据库

AntDB AntDB数据库

Java面试笔试题大汇总一(最全+详细答案)

小小怪下士

大厂面试 java\ 面试真题 Java 面试题

名列前茅!亚信科技AntDB入围工信部电信行业数据库场景榜单

亚信AntDB数据库

AntDB AntDB数据库

阿里官方保姆级Java技术图谱发布,够学到元宵节了,赶紧收藏

Java-fenn

Java 程序员 技术 java面试 Java面经

软件测试 | 测试开发 | 应用打包还是测试团队老大难问题?

测吧(北京)科技有限公司

测试

解密数字时代 AI 加持之道,网易智企联合机器之心发布 AI 应用实践白皮书

网易云信

人工智能 音视频技术

肝完Alibaba这份面试通关宝典,今年的offer我拿手软了

Java-fenn

Java 程序员 面试 java面试 java;

金三银四面试总结篇,汇总2022Java面试突击班后的面试小册

Java-fenn

Java 程序员 面试 java面试 java;

工作一年之后,这6个技术栈可以让你平均涨薪50%(涨薪篇)

Java-fenn

Java 编程 程序员 面试 java面试

史上最详细的一线大厂Mysql面试题详解

小小怪下士

MySQL 面试 java面试

MASA MAUI Plugin 安卓蓝牙低功耗(二)蓝牙通讯

MASA技术团队

blazor MASA MAUI Xamarin MASA Blazor

Vuejs+TypeScript+Webpack2框架的项目实践_语言 & 开发_王鹤_InfoQ精选文章