1 项目创建前准备阶段
exec() {
try {
// 1. 准备阶段
this.prepare()
// 2. 下载模板
// 3. 安装模板
} catch(e) {
log.error(e.message)
}
}
prepare() {
// 1. 判断当前目录是否为空
// 1.1 询问当前是否继续创建
// 2. 是否启动强制更新
// 3. 选择创建项目或组件
// 4. 获取项目的基本信息
}
1.1 判断当前目录是否为空功能开发
- 获取当前文件目录
const localPath = process.cwd() - 获取当前目录下的所有代码文件
let fileList = fs.readdirSync(localPath) - 文件过滤
fileList = fileList.filter(file => !file.startsWith('.') && ['node_modules'].indexOf(file) < 0)
ifCwdEmpty() {
const localPath = process.cwd()
let fileList = fs.readdirSync(localPath)
fileList = fileList.filter(file => !file.startsWith('.') && ['node_modules'].indexOf(file) < 0)
return !fileList || fileList.length <= 0
}
1.2 inquirer 基本用法和常用属性入门
文件交互库
inquirer
1. 基本用法
inquirer.prompt([{
type: 'input',
name: 'yourName', // 返回的answer中的key
message: 'your name' // 与用户交互时的提示
}]).then(answers => {
console.log(answers);
}).catch(error => {
if(error.isTtyError) {} else {}
})
2. 常用属性
inquirer.prompt([{
type: 'input',
name: 'yourName', // 返回的 answer 中的 key
message: 'your name', // 与用户交互时的提示
default: 'noname', // 设置默认值
validate: v => typeof v === 'string', // 输入值校验
transformer: v => v + '(input your name)', // 展示信息
filter: v => 'name[' + v + ']' // 处理当前返回结果
}, {
type: 'number',
name: 'num',
message: 'your number:'
}]).then(answers => {
console.log(answers);
}).catch(error => {
if(error.isTtyError) {} else {}
})
1.3 inquirer 其他交互形式演示
1. choice
{
type: 'confirm',
name: 'choice',
message: 'your choice',
default: false
}
2. list
{
type: 'list',
name: 'choice',
message: 'your choice',
default: 0,
choices: [ // 返回的 answer 中的 value 指向选中的value
{ value: 1, name: 'zmoon' },
{ value: 2, name: 'zhangsan' },
{ value: 3, name: 'lisi' },
]
}
3. rawlist
{
type: 'rawlist',
name: 'choice',
message: 'your choice',
default: 0,
choices: [
{ value: 1, name: 'zmoon' },
{ value: 2, name: 'zhangsan' },
{ value: 3, name: 'lisi' },
]
}
4. expand
{
type: 'expand',
name: 'choice',
message: 'your choice',
default: 'red',
choices: [
{ key: 'R', value: 'red' },
{ key: 'G', value: 'green' },
{ key: 'B', value: 'blue' },
]
}
5. checkbox
{
type: 'checkbox',
name: 'choice',
message: 'your choice',
default: 0,
choices: [
{ value: 1, name: 'zmoon' },
{ value: 2, name: 'zhangsan' },
{ value: 3, name: 'lisi' },
]
}
6. password
{
type: 'password',
name: 'yourPassword',
message: 'your password'
}
7. editor
在文本编辑器中输入复杂内容
{
type: 'editor',
name: 'yourEditor',
message: 'your editor'
}
1.4 强制清空当前目录功能开发
const fse = require('fs-extra')
async prepare() {
// 1. 判断当前目录是否为空
const localPath = process.cwd(); // 获取当前文件目录
if(!this.isDirEmpty(localPath)) {
let ifContinue = false
if(!this.force) {
// 1.1 询问当前是否继续创建
ifContinue = await inquirer.prompt({
type: 'confirm',
name: 'ifContinue',
default: false,
message: '当前文件夹不为空，是否继续创建项目？'
}).ifContinue;
if(!ifContinue) return
}
// 2. 是否启动强制更新
if(ifContinue || this.force) {
// 2.1 给用户做二次确认
const { confirmDelete } = await inquirer.prompt({
type: 'confirm',
name: 'confirmDelete',
default: false,
message: '是否确认清空当前目录下的文件？'
});
if(confirmDelete) {
// 2.2 清空当前目录
fse.emptyDirSync(localPath)
}
}
}
}
1.5 获取项目基本信息功能开发
async getProjectInfo() {
const projectInfo = {}
// 1. 选择创建项目或组件
const { type } = await inquirer.prompt({
type: 'list',
name: 'type',
message: '请选择初始化类型',
default: TYPE_PROJECT,
choices: [{
name: '项目',
value: TYPE_PROJECT
}, {
name: '组件',
value: TYPE_COMPONENT
}]
})
if(type === TYPE_PROJECT) {
// 2. 获取项目的基本信息
const o = await inquirer.prompt([{
type: 'input',
name: 'projectName',
message: '请输入项目的名称',
default: ''
}, {
type: 'input',
name: 'projectVersion',
message: '请输入项目版本号',
default: ''
}])
} else if(type === TYPE_COMPONENT) {}
// return 项目的基本信息 object
return projectInfo
}
1.6 项目名称和版本号合法性校验
const semver = require('semver')
async getProjectInfo() {
const projectInfo = {}
// 1. 选择创建项目或组件
const { type } = await inquirer.prompt({
type: 'list',
name: 'type',
message: '请选择初始化类型',
default: TYPE_PROJECT,
choices: [
{ name: '项目',value: TYPE_PROJECT },
{ name: '组件', value: TYPE_COMPONENT }
]
})
if(type === TYPE_PROJECT) {
// 2. 获取项目的基本信息
const o = await inquirer.prompt([{
type: 'input',
name: 'projectName',
message: '请输入项目的名称',
default: '',
validate: function(v) {
// 合法输入提醒
const done = this.async()
setTimeout(() => {
// 首字符必须为英文字符 +尾字符必须为英文或数字 + 字符仅允许'-_'
// 合法：a, a-b, a_b, a-b-c, a-b1-c1, a1, a1-b, a1_b
// 不合法：a, a-1, a_1, a-, a_
if(!/^[a-zA-Z]+([-][a-zA-Z]+[a-zA-Z0-9]*|[_][a-zA-Z]+[a-zA-Z0-9]*|[a-zA-Z0-9]*)$/.test(v)) {
done('请输入合法的项目名称')
return
}
done(null, true)
}, 0);
},
filter: v => v
}, {
type: 'input',
name: 'projectVersion',
message: '请输入项目版本号',
default: '1.0.0',
validate: function(v) {
// 合法输入提醒
const done = this.async()
setTimeout(() => {
if(!(!!semver.valid(v))) {
done('请输入合法的版本号')
return
}
done(null, true)
}, 0);
},
filter: v => {
if(!!semver.valid(v)) {
return semver.valid(v)
} else {
return v
}
}
}])
} else if(type === TYPE_COMPONENT) {}
return projectInfo
}