1、51信用卡前端研发基础体系建设与工程化演进51信用卡工程化演进历程51信用卡的基础研发体系统一npm和yarn的包管理工具在线编译带来的可能性基于nginx的前后端分离方案 51信用卡来自杭州的互联网金融科技公司 51信用卡前端团队017.53552.570201620172018 51信用卡研发体系基础研发体系部署前后端 分离构建技术栈研发工具 webpack jenkins 包管理 nym-cli 脚手架 fe-cli 组件平台 mock平台 vue miox weex nginx spa ajax 发布系统 监控系统团队快速发展过程中可能会遇到哪些工程化问题？军阀混战Jquery预想的情

2、况+实际情况工程化的第一阶段：统一化 为什么要统一？技术深度协作成本研发效率人员流动降低兼容成本“-”型 vs“|”型复杂度指数型增长减少重复建设项目合作 案例：统一的包管理工具nym学习成本api不完善细微差异偶发问题较大差异频发问题 nym-clinym$comanduse yarn?npm$commandyarn trans($command)can transfer?NYYN 统一的长期收益nymnym极低成本 nym-cli封装常见npm命令及参数，无需额外的学习yarn自动识别项目使用yarn/npm自动配置内部npm源常用的二进制文件镜像自动指向国内源兼容brew、nvm、n安装

3、文件等各种方式安装的nodejs增加一些额外的实用的辅助命令集成npm5和yarn，无需升级nodejs，无需全局安装yarn统一的npm和yarn版本管理https:/ 精耕细作工程化的第二阶段：标准化模板脚手架研发规范构建流程资源部署前后端分离社区方案个性化方案最佳实践 基于nginx的前后端分离 基于nginx的前后端分离server_name ;location/root/fe/projects/root/dir/;break;https:/ 跨域问题基于nginx的通用跨域解决方案http:/ ；location*/(.*) xx.xx.xx.xx valid=300s;proxy_

4、pass http:/$ Host$;location/root/fe/projects/root/dir/;break;简洁、通用、直观前后端解耦避免了preflight请求业务侵入低基于nginx的通用跨域解决方案$.ajax(:/ 2017年项目数据65 325 个项目人2877 次发布规模性工程化问题历史包袱增多 规模性工程化问题技术频繁升级依赖包模板技术方案规范1月13号群通知1月18号邮件1月31号回执2月6日扫描+定点通知2月23日再次出现 规模性工程化问题信息到达率下降 其他问题规范执行不到位线上问题频发研发效率降低开发幸福指数下降规模性工程化问题维护成本迭代速度人员和项目规模

5、扩大 快速演进的前端技术 工程化从技术问题上升到管理问题工程化的第三阶段：平台化去中心化中心化提供一个平台，贯穿研发周期，集成工程化体系，实现统一管理 前端工程管理平台通过系统性手段解决工程管理带来的问题在线编译带来新的可能性 依赖治理模块碎片化问题moduleA(1.0.0)moduleA(1.0.1)bugfixprojectAmoduleA:1.0.0npm install-moduleA(1.0.0)projectA-moduleA(1.0.1)projectA-moduleA(1.0.0)with lock file 模块碎片化问题 依赖治理errorwarningauto fix版

6、本收敛编译检测人工推动 静态配置环境判断or 静态配置公共脚本注入eg:埋点脚本 规范性检测编码规范工程规范性能规范ESlint重复打包文件体积模板规范依赖包检测异常检测bug控制历史遗留 规范性检测 工作方式的变化-人肉模式 工作方式的变化-自动模式1234第一周，全员通知：微信+邮件+系统自动推送第二周，工作台对应的项目操作触发Warn第三周，工作台对应的项目操作触发Error第四周，主要项目基本改造完毕20+规则 工作方式的变化邮件+反复check在线检测+自动通知6个月基本改造完成1个月确保问题解决6倍效率提升whats more 强大的JavaScript生态：线上+线下结合“智能”修复服务端+工具端 基于AST的检测 展望“经验”的平台化沉淀 前端CI/CD建设 前端工程管理平台-其他功能分支管理code review管理 消息管理需求管理研发流程管理人员+需求+技术的整体把控能力平台化总结统一化标准化平台化nym-cli基于nginx前后端分离基于nginx跨域解决方案在线编译的可能性 依赖治理 静态配置 规范性检测平台化治理思路