聊一聊迅雷前端敏捷开发那些事儿

福利来了： 我们要跟 @前端早读课 合作搞一次线上直播，时间是12月12日晚8点半，分享迅雷前端的敏捷开发实践。如果你错过了上次的分享，或者希望和我们一起近距离沟通前端敏捷开发相关的话题，请一定不要错过这次的 Live，Live介绍：前端早读课Live: 迅雷前端敏捷开发之路，报名地址： 前端早读课直播间。

线上出现了脚本错误，还是被老板发现的，如何监控追踪线上问题？每次发版都要手动构建、部署，多人开发却只有一个测试环境，如何提高效率？每周N个运营活动需求，如何提高开发效率？相似的业务代码如何抽象成公共模块？前不久的一场分享会可以为你解惑！

11月22日迅雷前端团队又在公司办了一场技术分享会，这次主题是《迅雷前端敏捷开发体系》。

第一场：迅雷前端敏捷开发之路

第一场是赵兵同学带来《迅雷前端敏捷开发之路》，赵兵同学是迅雷组件库XNPM的创作者和推动者，他自己也开发了不少开源组件，比如@xunlei/vue-lazy-component。

赵兵同学从一个开发新产品的例子入手风趣幽默地讲述了开发中遇到的各种问题及解决方案。

1. 如何快速上线一个新产品?

• 需求拆分成独立功能点
• 功能点按照优先级排序
• 了解产品经理的真正意图，换种方式解决可能更好
• 需求分期迭代，每周一个版本，根据用户反馈调整产品方案

2. 出了进度沟通问题?

无法实时跟踪各方进度？看板君上线了，看板君的真身其实是worktile，像流水线一样处理任务，任务进度一目了然。

3. 线上出现了脚本错误，还是被老板发现的，如何监控追踪线上问题？

简单地说就是规范工作流，接入监控和告警。这时候工作流君和监控君要上线了。 工作流君的真身就是Eslint代码检查、Git flow开发流程、增量code review(在完成featureE或者hotfix等合并分支的情况下@其他同事进⾏review)。 监控君就是错误监控、性能检测、告警、旁路监控。现在我们有基于sentry的错误上报系统，还有监控系统，告警除了微信告警还有钉钉机器人告警，旁路监控有监控宝。

4. 开发效率又跟不上了？

每次发版都要手动构建和部署，多人开发却只有一个测试环境，效率太低！这时候自动化君上线了，机器能做的就不要手动去做。自动化君的真身就是Gitlab CI。提交代码⾃自动触发测试、构建、发布⼯工作流。还能每个分⽀自动生成一个测试地址 。

还有脚手架生成器：vue-cli、nuxt-cli、@xunlei/generator-x-webapp。插件生成器：一键生成开源项目结构。

赵兵同学的分享通俗易懂，连产品同学都过来听。他还分享了如何不重复造轮子、如何将第三方业务需求插件化和通过知识分享的方式提高团队水平并，更多细节请到附件的PDF文件中查看。

第二场：会员活动运营框架

第二场由负责会员业务的麦志坤同学介绍他们的会员活动运营框架。他首先介绍什么是运营活动，然后分析了他们的运营活动特点，他们的活动模式基本类似，每周却有4-6个需求，如何提高开发效率呢？ 找出共同点后他们的解决方案是抽离前端公共组件库和后端公共服务，尽可能将一切在运营平台配置，减少开发量。他们的基本文案信息，统计点，支付配置，奖品库个发放奖品的条件都可以在运营后台配置。常见的抽奖转盘也有公共组件可以复用。一切都可配置后大大提高了开发效率。

接下来他讲了他们的前端框架遇到的问题和解决方法，比如前端框架和分包和整包引入，按需加载问题，活动框架样式和JS功能依赖无法做到非常灵活通用问题。更多细节请看附件文档。

第三场：公共模块开发指南

第三场由孙彬彬同学分享《公共模块开发指南》，彬彬同学在我们web平台组封装SDK很厉害，他封装的xl9 API已经被众多业务使用。彬彬同学的分享从四个方面讲起：什么是公众模块，为什么要开发公共模块，公共模块的用户，如何开发公共模块。

公共模块想必大家都很熟悉，小编就重点介绍下大家比较关心的如何开发公共模块。

1. 安装

公共模块的安装方式通常有两种：CDN在线地址，NPM模块引入。彬彬同学比较了这两种方式的优缺点，CDN异步和同步的引入方式，及如何兼容ES Module、CommonJS等多种模块规范。还介绍了打包工具webpack和rollup。

2. 接口设计

彬彬同学从接口的命名讲起，包括正确拼写的重要性，语义化，时态。又说明了同步接口和异步接口的错误捕获处理方式的区别。最后讲了参数的设计和长数字转字符串、对象转JSON的必要性。

3. 单元测试

他介绍了测试的重要性、Mocha等几个测试框架、断言库和代码覆盖率的概念。

4. 版本管理

这部分他介绍了语义化版本号的意义，还有些提交信息的一个规范：Angular规范，以及自动生成这个Angular规范的工具Commitizen，效果如下：

还有根据提交信息自动生成Change Log的工具:conventional-changelog，生成的结果如下：

5. 文档

公共模块文档很重要，通常项目下都有个README，是项目的门面，基本内容应该是简要介绍模块、安装方法和使用示例。README还可以包括一些构建和版本信息的徽章、接口API、更新日志和开源协议。他还介绍了一个根据javascript文件中的注释信息生成API文档的工具-JSDoc。下面就是用JSDoc生成的迅雷9 API接口文档。

到此三位同学的分享就结束了，相信开篇的问题大家都已在本文找到了答案，更多分享细节参见附件文档。

附件文档地址： https://github.com/xunleif2e/blog

扫一扫关注迅雷前端公众号