《Node.js在CLI下的工程化体系实践》成都OSC源创汇分享总结

Posted 2021-04-25 IVWEB社区

背景: 随着开发团队规模不断发展壮大，在人员增加的同时也带来了协作成本的增加，业务项目越来越多，类型也各不相同。常见的类型有组件类、活动类、基于React+redux的业务项目、RN项目、Node.js项目等等。如果想要对每个项目进行一些规范的约束比如Git提交规范、javascript规范简直难于登天。所有的这些，只因为缺少一个好用的工程化工具。从项目创建、开发、构建、代码规范检查到最终项目上线，通过CLI可以提升效率，同时保障开发规范的实施。

Node.js实现CLI的基本原理

关键点在于package.json里面的bin字段。模块全局安装，对于类unix系统，在/usr/local/bin目录创建软链接；对于windows系统，在C:\Users\username\AppData\Roaming\npm目录创建软链接。
模块局部安装，会在项目内的./node_modules/.bin目录创建软链接。

现代化web工程的生命周期

随着前端工程的不断演进，一方面工程变得日趋复杂，同时对规范和质量的诉求在不断增加。现代化web工程应该包含以下几个阶段：初始化、开发、构建、检查、发布。如下图所示：

痛点1: 项目拷贝

项目拷贝存在的问题显而易见，大致有以下三个方面：

• 容易出错；一旦某个关键文件拷贝丢失或者错误，很可能需要耗费半天到一天的时间排查环境问题。
• 不同场景下对目录结构要求不同；平时开发过程中，工程通常会分为运营活动、Hybrid业务、入口级别的项目（对性能和体验有极致和苛刻的要求）。需要基于RN或者Node.js的首屏直出，还有常用的业务组件等的开发。
• 新的Feature和BugFix难以同步；某个同学开发过程中增加的新方法或者解决的bug很难传递给其它同学并且沉淀成经验积累下来。

社区里面提供了完美的Yeoman解决方案，它是为了自动化项目的创建而生。Yeoman创建项目包括以下几个阶段：

• initializing: 初始化一些状态之类的，通常是和用户输入的 options 或者 arguments 打交道
• prompting: 和用户交互的时候（命令行问答之类的）调用
• configuring: 保存配置文件（如 .babelrc 等）
• writing: 生成模板文件
• install: 安装依赖
• end: 结束部分，初始代码自动提交

我们只需要继承Yeoman的Generator类做模板定制化，基于Yeoman的脚手架设计思路应该如下图所示：

首先，开发者会和CLI进行交互，开发者会告诉CLI需要创建哪一种类型的项目，CLI收到命令后。从本地已经安装的Yeoman脚手架里面选择某种类型的模板。然后，CLI会调用Gitlab API在远程创建仓库并且授予开发者master权限。接下来，会根据实际业务场景需要，自动化申请一些打点信息，常见的如离线包id，监控告警id等等。之后，在本地目录生成代码并且安装项目依赖的npm包，最后将本次初始化生成的所有代码自动提交到远程Git仓库。