搭建過程
1.創(chuàng)建項(xiàng)目文件夾
mkdir my-cli
2.進(jìn)入文件夾
cd my-cli
3.創(chuàng)建package.json
yarn init
4.在項(xiàng)目根目錄中創(chuàng)建cli.js文件，同時(shí)修改package.json文件，添加bin指向的入口文件為cli.js
{
"name": "my-cli",
"version": "1.0.0",
"main": "index.js",
"bin": "cli.js",
"license": "MIT"
}
5.安裝node交互式命令行工具inquirer和js模板引擎工具ejs
yarn add ejs inquirer
6.創(chuàng)建腳手架輸出模板文件templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= name %></title>
</head>
<body>
<h1><%= name %></h1>
</body>
</html>
7.創(chuàng)建腳手架輸出模板文件templates/package.json文件
{
"name": "<%= name %>",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"axios": "^0.19.0"
}
}
8.編輯cli.js文件
#!/usr/bin/env node
// 注意應(yīng)用入口文件都要有這個(gè)文件頭；如果是Linux或MaxOS系統(tǒng)需要修改此文件讀寫權(quán)限為755
// 通過在根目錄執(zhí)行 chmod 755 cli.js 實(shí)現(xiàn)修改
/**
* 腳手架的工作過程
* 1、通過命令行交互詢問用戶問題
* 2、根據(jù)用戶回答的結(jié)果生成文件
*/
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
inquirer
.prompt([
// 用戶輸入項(xiàng)目名稱
{
type: 'input',
name: 'name',
message: 'Project name?',
},
// 通過用戶輸入判斷是否需要生成package.json文件
{
type: 'confirm',
name: 'showPackage',
message: 'Do you need package.json?',
default: true,
},
])
.then((answers) => {
const {name, showPackage} = answers
// 模板目錄
const tmpDir = path.join(__dirname, 'templates')
// 目標(biāo)目錄
const destDir = process.cwd()
// 將模板下文件全部轉(zhuǎn)換到目標(biāo)目錄
fs.readdir(tmpDir, (err, files) => {
if (err) throw err
// 根據(jù)項(xiàng)目名稱創(chuàng)建項(xiàng)目文件夾
fs.mkdir(name, function (error) {
if (error) throw err
files.forEach((file) => {
// 如果用戶選擇不需要package.json則不生成該文件
if (file !== 'package.json' || showPackage) {
// 通過模板引擎渲染文件
ejs.renderFile(path.join(tmpDir, file), answers, (err, result) => {
if (err) throw err
// 將結(jié)果寫入目標(biāo)文件
fs.writeFileSync(
path.join(path.join(destDir, name), file),
result
)
})
}
})
})
})
})
9.在項(xiàng)目根目錄執(zhí)行chmod命令修改cli.js文件權(quán)限為755
chmod 755 cli.js
10.在項(xiàng)目根目錄執(zhí)行yarn link全局注冊(cè)my-cli腳手架
yarn link
11.測(cè)試一下，在需要?jiǎng)?chuàng)建項(xiàng)目的文件下執(zhí)行my-cli命令
my-cli
image.png
接著我們能看到test文件夾下自動(dòng)生成了first文件
image.png
