简易脚手架搭建

写在最前面

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

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

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