如何开发一个属于自己的前端脚手架工具

在日常工作中经常需要用到脚手架工具来快速搭建项目，例如vue-cli

脚手架的原理是通过一些命令来拉取指定的模板到本地进行开发

接下来我们来实现自己的脚手架工具lanli-cli

首先初始化项目 npm init，如下配置

// package.json
{
  "name": "lanli-cli", // 脚手架发布到npm上的名称
  "version": "1.0.0",// 当前版本号
  "bin": {
    "lanli-cli": "lib/index.js" // 命令
  },
  ...
}

然后新建lib/index.js文件,并将index.js文件设置为可执行文件

#!/usr/bin/env node 

// 头部添加下面的代码 默认文件不能执行，需要使用系统usr/bin/env 下的node环境

/*
 本地测试的话，只需要在当前的package.json的目录下打开命令行工具，运行npm link们就可以将可以将lanli-cli配置成全局的命令，如果出现下面的代码就算成功了

PS C:\my-code\2022\project\lanli-cli>  npm link
C:\Program Files\nodejs\lanli-cli -> C:\Program Files\nodejs\node_modules\lanli-cli\bin\index.js
C:\Program Files\nodejs\node_modules\lanli-cli -> ...
*/

安装以下几个库(记住一定要安装到dependencies下)

commander： 完整的 node.js 命令行解决方案
ora：优雅的终端转轮
inquirer：一组通用的交互式命令行用户界面。
download-git-repo：用来从github/gitlab等代码仓库中下载代码用的
fs-extra：用来代替系统的fs方法。

npm i -S commander ora inquirer download-git-repo fs-extra

主要思路：

1.使用commander来配置命令，例如create/init -g -l等命令

2.使用inquirer来让用户选择从哪下来模板 例如选择版本或者vue/react等

3.开发的过程中会有异步的情况，为了让交互友好，使用ora添加类似loading的提示

4.如果是从git拉取模板，需要使用download-git-repo来从git上拉去代码到本地

5.如果是本地代码，需要使用到fs-extra文件夹拷贝过来。

代码就不一一网上贴了，

开发完成后上传npm就可以了 npm publish

安装

npm i -g lanli-cli

创建项目

lanli create projectname  // 默认从github上拉取
lanli create projectname -g   // 从github上拉取
lanli create projectname -l // 从缓存的模板中拉取
lanli create projectname -n=E:\MyProject\vite  // 从本机E:\MyProject\vite文件下拉取

 查看版本号以及帮助

lanli -V // 查看版本号
lanli -h // 查看命令说明

其中模板vue3使用的是vue3+typescript(vue-class-component)+lanli-ui插件lanli-ui文档https://slailcp.github.io/lanli-ui/index.html

模板lanli-gulp是html页面，使用gulp将es6语法转成es5

lanli-cli源码

下面是创建项目的gif图：