手把手实现一个web代码模板快速生成CLI工具

前言

在上一篇文章中，我们实现了一个web工程通用脚手架工具，目的是快速搭建项目。在实际开发中，特别是后台管理系统，有很多相似的代码实现。于是乎，我们可以继续实现一个快速生成web代码模板的工具，告别复制/粘贴。

基本流程

基本思路其实很简单，就是通过命令调取定义好的模板，然后生成代码文件：

项目结构

xman-tcli
├─ bin
│  └─ xmant.js
├─ command
│  ├─ createFile.js
│  └─ createManyFiles.js
├─ config
│  └─ fileList.js
├─ templates
│  ├─ index.js
│  ├─ js
│  │  ├─ reactClassJSX.js
│  │  └─ reactFuncJSX.js
│  └─ ts
│     ├─ reactClassTSX.js
│     ├─ reactFuncTS.js
│     └─ reactFuncTSX.js
├─ utils
│  └─ index.js
├─ .gitignore
├─ LICENSE
├─ package.json
└─ README.md

具体实现

很多依赖的用处上一篇文章已经提及，所以这篇文章就不会过多的介绍。

初始化项目

可以用 npm init 进行创建，也可以根据下面列出的 package.json 进行修改。

{
  "name": "xman-tcli",
  "version": "1.0.0",
  "description": "web-cli工具，可以快速创建template",
  "bin": {
    "xmant": "bin/xmant.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/XmanLin/xman-tcli.git"
  },
  "keywords": [
    "cli"
  ],
  "author": "xmanlin",
  "license": "MIT",
  "dependencies": {
    "chalk": "^4.1.2",
    "clui": "^0.3.6",
    "commander": "^8.2.0",
    "figlet": "^1.5.2",
    "handlebars": "^4.7.7",
    "inquirer": "^8.1.5",
    "update-notifier": "^5.1.0"
  }
}

编写bin/xman.js

#!/usr/bin/env node

const { program } = require('commander');

program
	.version(require('../package').version, '-v, --version');
	
program.parse(process.argv); // 这里是必要的

if (!program.args.length) {
	program.help();
}

在当前xmant-cli目录下，执行 npm link 后，就可以在本地对脚手架工具进行调试了。

然后在当前目录下执行:

xmant -v

说明工程初步搭建成功。

通过命令快速创建单个代码模板

编写模板

代码模板可以根据实际项目进行抽离，这