脚手架系列

脚手架开发流程

创建npm项目
创建脚手架入口文件，首行添加

#!/usr/bin/env node

配置package.json，添加bin属性
编写脚手架代码
发布到npm或者npm link

命令

npm init -y
git init
npm install chalk@4.1.2
npm install ora@4.0.3
npm install commander@8.2.0
npm install inquirer@7.0.4
npm install execa
echo '#!/usr/bin/env node console.log("hello world");'>mycli.js

初始化项目增加mycli命令

当执行npm install装包后，package.json中bin节点就注册为命令行指令，[key]是指令名，[value]是执行的js脚本，在js脚本首行添加#!/usr/bin/env node指定环境，开发中使用npm link链接到全局即可。

初始化npm项目

npm init -y

添加bin节点mycli命令

{
  "name": "wli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "mycli": "./test1.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

编写test1.js代码

#!/usr/bin/env node
console.log("hello world");

npm link后执行mycli命令

Chalk-命令行输入五颜六色字体

Chalk 不负责打印，只负责生成颜色字体，打印需要console输出

装包

npm install chalk@4.1.2

教程

const chalk = require("chalk");
// 打印红色hello
const h1 = chalk.red('hello');
console.log(h1)
// 打印红色hello，绿色背景hello
const h2 = chalk.red().bgGreen('hello');
console.log(h2)
// 自定义rgb颜色
const h3 = chalk.rgb(155,66,211).bgRgb(36,88,144)('hello');
console.log(h3)
// 自定义十六进制颜色
const h4 = chalk.hex('#ccc').bgHex('#051106')('hello');
console.log(h4)
// 增加文字效果 加粗，下划线，斜体 等
const h5 = chalk.bold().underline()('hello');
console.log(h5)

Ora-loading效果图标

斜线旋转增加下载中之类等待效果，进度使用process库

装包

npm install ora@4.0.3

教程

const ora = require('ora')
const spinner = ora('下载中，请等待')
spinner.start()
setTimeout(()=>{
    spinner.stop()
},5000)

execa 调用shell命令

实际是调用 child_process.exec 命令

npm install execa

例子

const execa = require('execa')

(async ()=>{
    const { stdout } = await execa(''echo',['hello']); // child_process.exec
    console.log(stdout)
})()

commander-设计命令

相当于读取命令行参数，原生cmd参数使用process.argv读取，commander包封装后导出command和option方法，且自带--help和-v命令

安装

npm install commander@8.2.0

教程

const commander = require("commander");
// 定义指令 -a，可使用 --help查看到帮助信息
commander.option("-a","this is test -a",()=>{
    console.log('a console')
})
// 定义指令 -a 带参数 <num> 尖括号参数必填   [num] 中括号参数可选
commander.option("-a <num>","this is test -a",(num)=>{
    console.log('a console', num)
})
// 定义命令 mycli create xxx
commander.command('create <projectName>').action((projectName)=>{
    console.log('a console', projectName)
})
// 定义版本
commander.version('1.2.5')
// 绑定解析
commander.parse(process.argv)

效果

inquirer-做出交互如提问

与使用者交互，有input输入、number只能输入数字、password输入作为密码、editor富文本、confirm判断只能输入Y/n、list单选、checkbox多选

安装

npm install inquirer@7.0.4

教程

const inquirer = require('inquirer')
// prompt 方法，传入对象数组，对象中type问题类型
inquirer.prompt([
    {
        type:"input",
        name:"username",
        message:"请输入用户名"
    },
    {
        type:"password",
        name:"password",
        message:"请输入密码"
    },
    {
        type:"list",
        name:"adult",
        message:"爱好",
        choices:['1','2','3']
    }
]).then(answer=>{
    console.log(answer)
})

下载模板

项目模板常用存放位置

放在github上使用download-git-repo库下载（推荐）
放在脚手架项目中，直接fs复制
放在服务器上，通过服务器地址下载

安装

npm install download-git-repo@3.0.2

教程

const downgit = require('download-git-repo')
// 指定位置 github:作者/项目，也可是gitlab
// 下载目录 process.cwd() 是当前实际运行目录，__dirname 是始终是脚手架目录
// 默认 {clone:false}，默认是http下载方式（推荐），如设置true是使用git clone方式
// 回调
const spinner = ora('下载中').start()
downgit('github:vuejs/vue', process.cwd(), {clone:false}, function(err){
    spinner.stop()
    if(err){
        throw err
    }
    console.log(chalk.green('下载成功'))
})

模板目录规范

项目目录定义出来相当于定义了代码规范设计范式

domain-style 领域风格

领域风格按照功能划分风格
login 登录目录登录所有js,css,html都放到这里
shop 商城目录商城相关js,css,vue等都放这里

rails-style 层级风格

内部文件作用来划分js，css, data, views等
src/views 视图都放这里
src/css 样式都放这里
src/data 数据都放这里

脚手架系列 - 从0制作脚手架实战