前言
在上一篇文章中,我们实现了一个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
说明工程初步搭建成功。
通过命令快速创建单个代码模板
编写模板
代码模板可以根据实际项目进行抽离,这