写在最前面
随着公司业务的发展,独立的系统也慢慢多了起来,脚手架的必要性也日趋明显。
基于此,便开始搭起了脚手架,主要解决两个问题:
1. 项目的反复配置
2. 公共组件的自动更新
代码地址点这里,可以照着代码再去看这篇文章会觉得更有思路一点
使用
1. 全局按装
npm install zn-cli -g
2. 创建实例
zn-cli init [templateType] [projectName]
ps:
templateType: 模板类型(暂时支持 Vue 和 react 的标准模板,后期会陆续支持后台版本,类似于 antdPro)
projectName: 你需要创建的项目实例名称
3. 更新脚手架中的公共文件
在你的项目实例中执行:
npm run update
安全性:首先,这个操作是不会覆盖你的业务代码,只会去更新根目录下 public 文件夹里的文件
可选性:每个版本更新的公共文件都会在脚手架的文档中说明,你可以选择你需要的功能对应的版本(后续再讲)
代码
1. 分支
master:脚手架代码,全局安装的就是这个玩意,用来拉去对应模板生成 react/vue 实例的,通过 npm 安装使用
template 分支:分支名 template 开头的都是模板分支。我这里就不一一列举了,因为分支会陆续的添加,脚手架里都会说明
test 分支:测试分支,用来测试一些功能或者模板用的(可忽略)
2. 脚手架实现
核心代码是在 bin 目录里,index.js 为入口,点开 index,可以看到,主要是对 node 版本做了判断,然后底部引入了 cli.js, 在看这些代码之前,首先得闲确定你是对以下几个 node 包是了解的:
commander:处理用户命令行输入
download:clone git 远程仓库代码
其他有一些包是辅助类的,比如 chalk,ora 等,不了解也没关系。
先看代码:
大致流程:
1. 获取用户输入
2. 根据用户输入判断是需要什么模板,下载对应模板到用户输入的项目目录中
3. 模板下载完成后,调用_cli 下面的_reWritePackageJson 方法,去更改实例中 package.json 中的一些配置
4.log 里面的东西是一些提示性信息
基本脚手架就是这个流程,根据用户输入去拉去对应的模板代码到指定的目录。
可能你注意到在模板下载完成时我执行了一个进程:
spawn(‘rm’, [‘-rf’, `${name}/build.js`]);
删除创建的项目中的 build.js 文件,为什么,因为这个 js 是用来更新模板,就像上面我说到的执行 npm run update 的时候就是通过这个 js 去做处理的。显然,他应该只存在于脚手架的模板中,而不应该出现在用户的项目实例中。对于用户而言,它是无用的。
总结
以上就是一个简单脚手架的实现方式,后期也会一直去更新和维护这个脚手架,公司现在新的项目就是基于这个脚手架去搭建的,因为公司现在的项目都是 react 写的,所以 Vue 的功能暂时不支持,后期也会慢慢支持 vue…