搭建脚手架
2020-11-15 本文已影响0人
桃之_夭夭_
搭建过程
1.创建项目文件夹
mkdir my-cli
2.进入文件夹
cd my-cli
3.创建package.json
yarn init
4.在项目根目录中创建cli.js文件，同时修改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.创建脚手架输出模板文件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.创建脚手架输出模板文件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
// 注意应用入口文件都要有这个文件头；如果是Linux或MaxOS系统需要修改此文件读写权限为755
// 通过在根目录执行 chmod 755 cli.js 实现修改
/**
* 脚手架的工作过程
* 1、通过命令行交互询问用户问题
* 2、根据用户回答的结果生成文件
*/
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
inquirer
.prompt([
// 用户输入项目名称
{
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')
// 目标目录
const destDir = process.cwd()
// 将模板下文件全部转换到目标目录
fs.readdir(tmpDir, (err, files) => {
if (err) throw err
// 根据项目名称创建项目文件夹
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
// 将结果写入目标文件
fs.writeFileSync(
path.join(path.join(destDir, name), file),
result
)
})
}
})
})
})
})
9.在项目根目录执行chmod命令修改cli.js文件权限为755
chmod 755 cli.js
10.在项目根目录执行yarn link全局注册my-cli脚手架
yarn link
11.测试一下，在需要创建项目的文件下执行my-cli命令
my-cli
image.png
接着我们能看到test文件夹下自动生成了first文件
image.png
