脚手架工具，顾名思义就是在开始一个实际项目时，它可以帮你完成一些项目基本结构的搭建，从而简化新项目的初始成本，而且现在最流行的几个前端框架都配有对应的脚手架工具，比如Vue对应的脚手架工具叫vue-cli，它可以帮助你完成一个初始的Vue项目结构的搭建，React对应的脚手架工具叫create-react-app，其实刚开始我对于脚手架还是感觉很神奇的，只需要通过npm安装对应的脚手架工具，运行命令，按照步骤设置一些初始值就可以自动的在本地生成一个配置好的项目文件夹，但是当真正的去了解包括查看了一些文档和教程后，其实脚手架工具的制作本身并不是一件困难的事情，那么接下来我们就按照步骤来制作一个自己的脚手架工具。
需要用到的辅助工具
在开始制作脚手架之前，我们需要一些辅助工具来帮助我们更好的完成制作过程
commander.js
node.js命令行工具，是用来执行脚手架相关命令，比如生成脚手架文件的命令，查看脚手架帮助信息等
// bin/cmd.js
const { program } = require('commander')
program
.version('0.1.0')
program
.command('create <project>')
.description("初始化项目模板")
.action(function(env) {
console.log(env)
})
program
.command("help")
.description("查看所有可用模板")
.action(function(env) {
console.log("书写相关帮助信息")
})
// 我们可以通过node来运行一下
node bin/cmd.js
Usage: cmd [options] [command]
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
create <project> 初始化项目模板
help 查看所有可用模板
huyifan@pool-100-10-10-40 cli-tool %
我们可以看到，通过commander.js提供的内置方法，我们可以自定义创建脚手架等的命令以及对应的当执行命令后的一些显示等
inquirer.js
交互式命令行工具，添加一些询问用户的信息
const inquirer = require('inquirer');
inquirer
.prompt([
// 一些交互式的问题
])
.then(answers => {
// 回调函数，answers 就是用户输入的内容，是个对象
});
download-git-repo
下载远程模板，其实对于脚手架工具的本质而言，就是通过运行命令，然后从诸如github等的代码仓库中将远程设置好的项目结构模板下载到本地
const download = require('download-git-repo')
downloa(repository, ProjectName, options, callback)
repository：远程仓库地址
http://github.com:hyf940760301/cli-template#main (地址需要按照这种格式来定义，代码存放的网站地址:用户名/项目名#分支名)
projectName：存放下载的文件路径,可以直接是文件名，默认是当前目录
options：配置项，如{clone: boolean}表示用http download还是git clone下载
callback：回调函数，可以在里面对操作过程进行一些设置，比如添加文本颜色，文案内容或增加一些图标等
ora
增加加载的转圈图标
const ora = require('ora')
ora("正在下载模板中").start()
chalk
增加文本样式
const chalk = require('chalk')
chalk.red("下载失败")
chalk.green("下载成功")
log-symbols
增加图标
const logSymbol = require('log-symbols')
logSymbol.error // 失败图标
logSymbol.success // 成功图标
脚手架制作
-
在本地首先创建一个文件夹，自定义命名(如 cli-tool)
-
进入到文件夹的根目录，执行npm init，生成package.json配置文件
-
添加需要使用到的依赖到配置文件当中，npm install安装依赖
"dependencies": {
"babel-cli": "^6.26.0",
"babel-env": "^2.4.1",
"chalk": "^3.0.0",
"commander": "^5.0.0",
"inquirer": "^7.1.0",
"ora": "^4.0.3",
"log-symbols": "^3.0.0",
"download-git-repo": "^3.0.2"
}
- 在根目录下新建bin文件夹，新建cmd.js作为脚手架工具的入口文件
// bin/cmd.js
// 我们对于创建等命令的设定以及一些交互流程等都会在这个入口文件中设置
const { program } = require('commander')
// 远程下载
const download = require('download-git-repo')
// 增加加载效果
const ora = require('ora')
// 增加文本样式
const chalk = require('chalk')
// 增加图标
const logSymbol = require('log-symbols')
program
.version('0.1.0')
program
.command('create <project>')
.description("初始化项目模板")
.action(function(env) {
const spinner = ora("正在下载模板中").start()
const downLoadUrl = 'http://github.com:hyf940760301/cli-template#main'
download(downLoadUrl, env, { clone: true }, err => {
if (err) {
spinner.fail()
return console.log(logSymbol.error, chalk.red("下载失败，失败原因：" + err))
} else {
spinner.succeed()
return console.log(logSymbol.success, chalk.green("下载成功"))
}
})
})
program
.command("help")
.description("查看所有可用模板")
.action(function(env) {
console.log("书写相关帮助信息")
})
program.parse(process.argv)
- 创建以及配置好入口文件，还需要在package.json文件中添加对应的命令
表示我们会通过执行cli-tool来执行我们定义的脚手架工具的入口文件中的内容
"bin": {
"cli-tool": "./bin/cmd.js"
}
- 将命令进行全局关联，我们就可以在本地直接通过
cli-tool命令来运行我们的脚手架工具啦，就跟我们在使用vue cli脚手架时，创建项目并不是通过npm或node指令执行，而是脚手架自定义的vue cli命令来执行
首先进入到入口文件目录，然后执行npm link实现全局关联
cd bin
npm link
现在我们可以在命令行中执行以下cli-tool命令，也可以通过cli-tool ceate testDemo命令啊来创建一个脚手架项目
huyifan@pool-100-10-10-40 cli-tool % cli-tool
Usage: cli-tool [options] [command]
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
create <project> 初始化项目模板
help 查看所有可用模板
至此已经完成了脚手架工具在本地的配置以及目录结构的搭建，接下来，我们需要进行模板的创建以及将我们的脚手架工具上传到npm上，在文章的辅助工具介绍部分，我们提到了一个download-git-repo用于下载远程仓库模板的工具，为什么要用到这个工具呢，是因为实际上我们使用诸如vue cli命令生成项目时，在命令行执行完配置选项后，在本地生成的项目模板文件夹实际上就是将远程仓库构建好的模板下载到本地，也就是类似于git clone模式，所以，脚手架工具其实起到的是一个桥梁和通道的作用，通过自定义的指令将远程仓库和本地连通起来，将远程仓库的项目框架模板下载到本地，从而生成项目最基本的结构。
创建项目模板
- 登录github，新建一个模板项目
- 创建好模板项目后，在我们的脚手架入口文件中，添加对应的远程仓库地址，这样就可以通过我们的工具将模板下载到本地了
program
.command('create <project>')
.description("初始化项目模板")
.action(function(env) {
const spinner = ora("正在下载模板中").start()
// 对于远程仓库模板地址的结构，在文章介绍下载工具download-git-repo时有具体说明
const downLoadUrl = 'http://github.com:hyf940760301/cli-template#main'
download(downLoadUrl, env, { clone: true }, err => {
if (err) {
spinner.fail()
return console.log(logSymbol.error, chalk.red("下载失败，失败原因：" + err))
} else {
spinner.succeed()
return console.log(logSymbol.success, chalk.green("下载成功"))
}
})
})
- 配置完入口文件后，我们可以在本地执行命令试验一下
(可以看到，我们已经将远程仓库的脚手架模板下载到了本地)
将自制的脚手架工具上传到npm
到此我们的脚手架工具已经基本搭建完成，当然如果是作为一个正式可以使用的项目脚手架的话，我们还需要完善模板配置以及初始的项目结构，同时在脚手架命令和执行步骤方面也要更加严谨和详细，这里只是作为一个脚手架工具的制作流程，所以整体结构按照最简易的方式来搭建。
- 注册一个npm账号，在命令行上登录npm账号
- 完成脚手架相关的配置后，可以先在npm上搜索一下你的name是否重复
- 命令行执行npm publish
(等待上传完成就可以在npm上搜到你的脚手架工具啦)
最后我们试一下直接从npm上是否可以正常使用我们自制的脚手架
- 通过npm安装
npm install hutestcli-tool
- 执行脚手架创建命令
cli-tool create testDemo
扫一扫
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
