写一个cli脚手架 - 小宇的博客

1 新建项目目录#

1
mkdir my-cli
2
cd my-cli
3
npm init —y  # 生成package.json 文件

2 新建 bin 目录创建脚本 test.js#

1
#!/usr/bin/env node       //指定一个解释器  告诉shell 用node解释器去执行脚本
2
console.log('test')

3 在package.json 配置bin 字段#

bin字段用来指定各个内部命令对应的可执行文件的位置。

test 有毒不生效所以这里新建了一个test2.js 脚本(命令)

1
"bin": {
2
  "test": "./bin/test.js",    // 好像test 命令有毒 不打印 其他可以
3
  "test2": "./bin/test2.js"
4
  },

4 运行 npm link (参考博客 npm link 详解)#

将包中的任何bin链接到{prefix}/bin/{name} npm config get prefix 查看前缀 test2 命令已被添加到环境变量中 npmlink

5 执行test2#

test2

6 引入commander 添加子命令#

test2.js 初始化项目

1
#!/usr/bin/env node
2
const program = require('commander')
3
// 以package.json 的version 作为test2 的version
4
program.version(require('../package.json').version)
5
program
6
  .command('init <name>')
7
  .description('init project  ')
8
  .action(require('../lib/init'))
9

10
// 解析主进程参a
11
program.parse(process.argv)

7 使用 figlet chalk 输出欢迎界面#

1
const { promisify } = require('util')
2
const figlet = promisify(require('figlet'))
3
const chalk = require('chalk')   // chalk 5 是ESM  chalk 4 是CSM
4
const log = content => console.log(chalk.green(content))
5
module.exports = async name => {
6
  const data = await figlet('Welcome')
7
  log(data)
8
  log(`下载项目: ${name}`)
9
}

welcome

8 download-git-repo 从远程仓库拉取项目#

1
const {clone} = require('./download')
2
// init.s
3
log(`下载项目: ${name}`)
4
// 现在默认分支不是master了 所以要指定分支main
5
await clone('github:cxyxiaoyuyu/xinyi-ui#main',name)

使用 ora 在下载时显示loading

1
const { promisify } = require('util')
2
const ora = require('ora')
3

4
module.exports.clone = async function(repo,desc){
5
  const download = promisify(require('download-git-repo'))
6
  const process = ora(`下载..... ${repo}`)
7
  process.start()
8
  await download(repo,desc)
9
  console.log(repo,desc)
10
  process.succeed()
11
}

执行完成后项目会多了一个执行命令时输入的目录

9 执行命令自动安装依赖#

使用 spawn 执行命令

1
const {spawn} = require('child_process')
2
/**
3
spawn 开一个子进程 用来执行脚本(暂且这么了解吧)
4
_spawn 自己封装的函数 开一个子进程 让子进程的输出信息打印给主进程 并监听子进程结束
5
直接用spawn 命
6
*/
7
const _spawn = async (...args) => {
8
  return new Promise((resolve)=>{
9
    const proc = spawn(...args)
10
    proc.stdout.pipe(process.stdout)  // 为了打印出日志输出
11
    proc.stderr.pipe(process.stderr)
12
    proc.on('close',()=>{     // 知道子进程结束了
13
      resolve()
14
    })
15
  })
16
}
17
log('安装依赖')
18
await _spawn('npm',['install'],{cwd: `./${name}`})
19
log(`安装完成`)

10 自动启动项目#

使用open 打开浏览器

1
log('启动')
2
// 直接写spawn 是在主进程执行 不会打印输出信息
3
// 如果需要打印信息 需要使用自己封装的_spawn  但是这个进程不会结束 所以下面的open 不会执行 所以open 要放在上面
4
// spawn('npm',['run','dev'],{cwd: `./${name}`})
5

6
open(`http://localhost:3001`)
7
_spawn('npm',['run','dev'],{cwd: `./${name}`})

11 实现约定路由功能#

根据views下的文件自动生成路由使用handlebars 模板引擎

1
const fs = require('fs')
2
const handlebars = require('handlebars')
3

4
const program = require('commander')
5
program
6
  .command('create component <name>')
7
  .description('init project  ')
8
  .action(refresh)
9
program.parse(process.argv)
10

11
// module.exports = async () => {
12
async function refresh (name){
13
  console.log(name)
14
  // 获取列表
15
  const list = fs.readdirSync('./src/views')
16
    .filter(v => v !== 'Home.vue')
17
    .map(v => ({
18
      name: v.replace('.vue','').toLowerCase(),
19
      file: v
20
    }))
21
  console.log(list)
22

23
  // 生成路由定义
24
  compile({list},'./src/router/index.js','./template/router.js.hbs')
25

26
  // 生成菜单
27
  compile({list},'./src/App.vue','./template/App.vue.hbs')
28

29
  /**
30
   * 模板编译
31
   * @param {*} meta
32
   * @param {*} filePath
33
   * @param {*} templatePath
34
   */
35
  function compile(meta,filePath,templatePath){
36
    if(fs.existsSync(templatePath)){
37
      const content = fs.readFileSync(templatePath).toString()
38
      const result = handlebars.compile(content)(meta)
39
      fs.writeFileSync(filePath,content)
40
      console.log(`${filePath}创建成功`)
41
    }
42
  }
43
}