Node,js在CLI下工程化体系实践

前端狗

2019/09/18 发布于 技术 分类

文字内容
1. ┓ Node.js在CLI下⼯工程化体系实践 IVWEB 程柳柳锋
2. • 2015 ~ 2017 阿⾥里里闲⻥鱼拍卖 • 2017 ~ ⾄至今 腾讯Now直播 • Github: https://github.com/cpselvis • 喜欢研究协作规范、对前端⼯工程化体系建设和 ⾃自动化CMS系统搭建有⼀一定积累 ” 个⼈人简介
3. ⼯工程 ⽣生命周期 痛点剖析 研发规范 CLI设计 内容⼤大纲
4. Why Node.js? 轻量级 47.5万+三⽅包 跨平台
5. ⼯工程⽣生命周期介绍 模板类型 初始化 init 开发 dev 构建 build 运营活动 检查 test 发布 publish 代码规范 Hybrid业务 数据mock React Native API联调 FIS3 单元测试 CDN 发布 NodeJS应⽤用 (直出) 数据上报 webpack 持续集成 离线包发布 业务组件 Fiddler代理理 安全扫描 generator-* 代码Review 新技术栈 基于Yeoman Schema 云构建 ESLint Mocha Travis CI
6. 痛点1: 项⽬目拷⻉贝
7. • 容易易出错 • 不不同场景下对⽬目录结构要求不不同 • 新的Feature和BugFix难以同步 ” 存在的问题?
8. 解决⽅方案 - Yeoman initializing prompting 初始化 ⽤户交互 configuring writing install 创建配置 创建项⽬⽂件 安装依赖 end 结束
9. 基于Yeoman的脚⼿手架设计思路路 服务层 脚⼿架层 运营活动 开 发 者 交互 Hybrid业务 generator-activity 创建远程 Git仓库 ⾃自动提交 ⽣生成代码 授予master 权限 安装依赖 ⾃自动申请 业务打点 ⽣生成模板 代码 generator-hybrid CLI React Native generator-rn NodeJS应⽤用 (直出) generator-node
10. 如何打通Git仓库 STEP 1:申请公共邮箱,并关联git公共账号 STEP 2:调⽤用Git code API来进⾏行行仓库创建仓库 STEP 3:使⽤用CLI调⽤用Git来执⾏行行仓库克隆隆、初始化功能
11. 痛点2: 运营配置频繁修改
12. ⻚页⾯面由N个组件拼接⽽而成 Banner组件 跑⻢马灯组件 抽奖组件 兑换组件 奖品组件 获奖榜单组件 规则组件 下载bar组件
13. 组件的构成 View Component cgi数据 静态数据 如何抽离? 事件
14. 实际案例例
15. 改进-Schema First react-jsonschema
16. 痛点3: 协作规范
17. Git commit规范与changelog⽣生成 ➤ ➤ 优势: ➤ 加快Review的流程 ➤ 根据Commit元数据⽣成Changelog ➤ 后续维护者可以知道feature被添加的原因 技术⽅案
18. 提交格式要求
19. 标准化的Commit信息 commit⽇志: changelog:
20. 痛点4: 代码规范
21. 从⼀一次⽣生产事故说起 ➤ 2017年年4⽉月13⽇日,腾讯⾼高级⼯工程师⼩小圣在做充值业务时,修 改了了苹果iap⽀支付配置,将JSON配置增加了了重复的key。代码 发布后,有⼩小部分使⽤用了了vivo⼿手机的⽤用户反馈充值⻚页⾯面⽩白屏, ⽆无法在Now app内进⾏行行充值。最后问题定位是:vivo⼿手机使⽤用 了了系统⾃自带的webview⽽而没有使⽤用X5内核,解析JSON时遇到 重复key报错,导致⻚页⾯面⽩白屏。 如何避免类似 代码问题?
22. ESLint介绍 ➤ Javascript和JSX代码规范检查⼯具 ➤ 2013年6⽉推出,最新版本v4.6.0 ➤ ⽀持插件扩展,可以⾃定义规则。 ➤ 配置已经约定好,开箱即⽤ ➤ ⽀持ES6语法 ➤ ⽀持ES6和JSX ➤ 规则严格,规则⽆法禁⽤ ➤ 规则可配置 ➤ ⽀持插件扩展 ⽆法根据错误定位到具体规则 ➤ 不⽀持⾃定义规则 ➤ ⽀持⾃定义配置 ➤ ⽆法根据错误定位到具体规则 ➤ 可以配置错误级别 ➤
23. 代码规范制定原则 ➤ 不不重复造轮⼦子,基于eslint:recommend配置并改进 ➤ 能够帮助发现代码错误的规则,全部开启 ➤ 配置不不应该依赖于某个具体项⽬目,⽽而应尽可能的合理理 ➤ 帮助保持团队的代码⻛风格统⼀一,⽽而不不是限制开发体验 ➤ 有对应的解释⽂文档
24. 创建ESLint共享配置
25. 集成进push hook 1, 安装husky 2, 增加npm script
26. CLI设计
27. 整体架构 代码发布 全局构建包 插件⽣态 代码统计 图⽚片上传 schema 插件 … 活动模板 Hybrid模板 Node.js直出 模板 ReactNative 模板 业务组件模板 … 插件机制 ⽇日志模块 Yeoman解析 插件安装 Commit规范 客户端配置 更更新机制 Lint检测 帮助命令 代码规范 核⼼层 参数parser 参数解析器器 控制台
28. 插件机制实现 CLI执⾏过程 读取并加载配置 预安装插件 加载内部插件 加载外部插件 初始化完成 执⾏行行命令 通过vm注⼊上下⽂变量
29. 插件上下⽂文 ➤ 命令注册 ➤ ⽇志 ➤ 帮助函数 ➤ spawn、request、yaml、fs等
30. END 更更多技术信息,请加⼊入腾讯IVWEB交流群