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

前言

最近在工作闲暇期间我改了一下之前写的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中,而用户输入的信息也已经收集到了,那么接下来就是进行模板信息的填充并生成最终模板了。
      在这一部中我们需要使用metalsmithhandlebarsrimraf三个库,其中handlebars用于替换模板信息,metalsmith用于生成模板,rimraf用于删除模板创建成功后的隐藏文件夹,代码如下:
      image.png

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

尾声

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

image.png

image.png

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

推荐阅读更多精彩内容