共计 1201 个字符，预计需要花费 4 分钟才能阅读完成。
写在最前面
随着公司业务的发展，独立的系统也慢慢多了起来，脚手架的必要性也日趋明显。
基于此，便开始搭起了脚手架，主要解决两个问题：
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…
