简易脚手架搭建

写在最前面

随着公司业务的发展，独立的系统也慢慢多了起来，脚手架的必要性也日趋明显。

基于此，便开始搭起了脚手架，主要解决两个问题：

• 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...