实现一个搭建自己模板的简易脚手架

前言

最近在工作闲暇期间我改了一下之前写的react+typescript模板，打算用改造后的模板制作一个自己的博客，并且该模板将来用于做一些小实验用，但与此同时，我又觉得每一次都需要去github进行clone操作比较麻烦，所以就在参考了vue-cli源码的基础上，自己写了一个类似的脚手架工具方便自己，另外也开放出来给大家使用，同时介绍一下主要逻辑和制作过程，也希望大家多提提意见

地址

欢迎star
脚手架
模板

使用方法

npm install -g oxctpl
oxctpl init 项目名称
cd 项目名称
npm install

主要逻辑(图示)

图示

项目目录

image.png

步骤

在安装了oxctpl后，执行oxctpl init 项目名:

• 指定命令及其执行的文件
  该步骤非常简单，只要在package.json文件中添加bin选项，并添加你想要的命令及其执行文件即可，在该例中我们添加了oxctpl命令，它的执行文件是bin/oxctpl:
  

  

  image.png

• 获取用户命令中的参数
  在oxctpl init 项目名中我们可以获取到两个参数，一个是init，一个是项目名，项目名暂且不表，而init命令是用来执行bin/oxctpl-init文件的，这时候我们就需要用到一个tj大神写的库[commander(https://github.com/tj/commander.js)了，这个库是专门用来处理用户输入的参数然后执行相应命令的，所以在bin/oxctpl中的内容是这样的:
  

  

  image.png
  
  接下来主要逻辑都在oxctpl-init文件中

• 项目名处理
  进入到oxctpl-init中，首先我们就要对项目名称进行处理，首先就要判断项目名是否存在，如果不存在的话跳出进程并提示:
  

  

  image.png
  
  如果存在则分为下面三种情况:

  1. 当前目录是否存在和项目名同名的文件夹，如果存在则跳出进程并提示，如果不存在则进行下一步，我们可以使用fs模块中的readdirSync方法读取到当前目录下的所有目录和文件名，然后遍历这些名字，使用statSync(fileName).isDirectory()判断是否为目录，最后再判断是否存在同名目录即可:
     

     

     image.png

  2. 当前所处目录的目录名和项目名相同，这时候需要询问用户是否直接在当前目录下创建模板，是的话则进行下一步，否的话退出进程，这时候我们需要和用户进行交互，inquirer库就是一个专门用来在命令行和用户进行交互的库，代码如下:
     

     

     image.png

  3. 前两个条件都不符合的情况下，直接进行下一步即可:

     
     
     

     image.png

• 下载模板
  在上一步中，我们对项目名进行了一些条件判断，完成后下一步就是从github中将模板下载下来:

  • 首先创建项目名称的目录

    
    
    

    image.png

• 在项目目录中创建隐藏文件夹并下载模板
  该步骤的处理主要在download方法中，代码如下:
  

  

  image.png
  
  我使用了download-git-repo这个库进行模板下载，然后在项目目录中创建.download-temp隐藏文件夹，并将模板下载到了隐藏文件夹中，这时候我们的项目目录结构是这样的:
  
  

  image.png
  
  在这一步中，我们还可以使用ora这个库对下载过程加个loading进行美化
  实际上在这一步中，如果不打算对模板进行自定义的话，就已经算是完成一个脚手架的基本功能了，但是这并不能满足用户的所有需求，所以我们需要对模板进行一定的自定义。

• 对模板进行自定义
  前面说到过，在命令行中我们可以使用inquirer这个库和用户进行交互，所以在该项目中，我们也将使用这个库收集用户指定的项目名称，版本号和简介对模板中的package.json进行自定义

  1. 首先需要在模板中制定变量
     在这一步中，我们首先需要去到模板
     的package.json中制定变量，比如在我自己的模板中有三个变量，当然通过这种方法也可以对模板需要安装的包进行自定义:
     
     

     image.png
  2. 收集用户输入的信息
     在该步骤中，我们通过inquirer收集用户输入的信息:
     
     

     image.png
  3. 模板生成
     现在，模板已经被下载在隐藏文件夹.download-temp中，而用户输入的信息也已经收集到了，那么接下来就是进行模板信息的填充并生成最终模板了。
     在这一部中我们需要使用metalsmith，handlebars和rimraf三个库，其中handlebars用于替换模板信息，metalsmith用于生成模板，rimraf用于删除模板创建成功后的隐藏文件夹，代码如下:
     
     

     image.png
     
     首先制定metalsmith所需要的信息，包含当前目录，用户输入的信息，以及最终输出文件的目标路径，然后使用handlebars对半成品模板进行变量的替换，最后生成最终模板并删除.download-temp隐藏文件夹。

尾声

通过上面的多个步骤，我们的建议脚手架就已经算是完成。当然我们还可以使用chalk对脚手架进行进一步的美化，这个库用于输出不同颜色的console:

image.png

image.png

下一步将会对该脚手架进行进一步的优化，用以支持 redux和 mobx的选择。
最后欢迎大家star和提建议哦。