node编写cli命令行(二)

最新推荐文章于 2023-06-13 11:05:51 发布

LiuJun2Son

最新推荐文章于 2023-06-13 11:05:51 发布

阅读量1.7k

点赞数

分类专栏：构建工具

本文链接：https://blog.csdn.net/u012987546/article/details/107518932

版权

构建工具专栏收录该内容

24 篇文章 2 订阅

订阅专栏

该文章是在 node编写cli命令行(一) 的基础上继续编写的

1.编写 create 指令

编写一个新建vue项目的 create 指令，例如当执行：vue-temp-cli create myVue 时，会新建一个项目名称为myVue 的 Vue 项目

1.编写 create 指令

1.修改index.js文件

在第3步添加新建项目的 create 指令

#!/usr/bin/env node
console.log('vue-temp-cli')
var program = require('commander');
// 1.添加版本
program.version(require('./package.json').version,  '-v, --version')

// 2.添加 options 选项（可供后面定义的指令使用该选项，获取选项的属性 program.xxx ）
program
  .option('-i, --integer <n>', 'An integer argument')

// 3.添加新建项目的 create 指令。例如：vue-temp-cli create xxx
program
  .command('create <project> [otherArg...]')
  .description('clone a repository into a newly created project or directory')
  .action(function (project, otherArg) {
    // vue-temp-cli create myVue a b
    console.log('vue-temp-cli', project, otherArg.join(' '));
  });
  
// 4.添加help提示信息
program.on('--help', function(){
  console.log('')
  console.log('Other:');
  console.log('  $ vue-temp-cli --help');
  console.log('  $ vue-temp-cli -h');
  console.log('  $ vue-temp-cli -v');
  console.log('  $ vue-temp-cli --version');
  console.log('  $ vue-temp-cli -i 1');
  console.log('  $ vue-temp-cli --interger 1');
  console.log('  $ vue-temp-cli create myVue');
});
program.parse(process.argv);

2.执行 vue-temp-cli create myVue a b 命令

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli create myVue a b
vue-temp-cli
vue-temp-cli myVue a b
PS F:\blog\node-cli\vue-temp-cli>

2.美化欢迎界面

1.安装 figlet , clear 和

figlet 工具可以将 message 转化为空心的字体

clear 清空终端的屏幕

chalk是一个颜色的插件，可以修改终端字体颜色

PS F:\blog\node-cli\vue-temp-cli> npm install figlet
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.
+ figlet@1.4.0
added 1 package from 1 contributor in 1.276s

PS F:\blog\node-cli\vue-temp-cli> npm install clear        
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.
+ clear@0.1.0
added 1 package from 1 contributor in 0.848s

PS F:\blog\node-cli\vue-temp-cli> npm install chalk
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.
+ chalk@4.0.0
added 7 packages from 4 contributors in 1.257s
PS F:\blog\node-cli\vue-temp-cli>

2.在lib文件夹下新建 utils.js 文件

新建 utils.js

`-- vue-temp-cli
    |-- lib
        |-- utils.js
    `-- index.js

utils.js 文件内容如下，编写了一个打印欢迎界面的函数，并导出

// Node8 就提供了 util.promisify() 这个方法，方便我们快捷的把原来的异步回调方法改成返回 Promise 实例的方法
const { promisify } = require('util')
// figlet 工具可以将 message 转化为空心的字体
const figlet = promisify(require('figlet'))
// clear 清空终端的屏幕
const clear = require('clear')

// 打印欢迎界面
const printWelcome = async (str)=>{
  clear()
  const welcome = await figlet(str)
  console.log(welcome)
}


module.exports = {
  printWelcome
}

3.在index.js文件引入 utils.js文件

调用 utils的printWelcome函数打印欢迎界面

#!/usr/bin/env node

const utils = require('./lib/utils')
var program = require('commander');
utils.printWelcome('welcome  CLI')
// 1.添加版本
program.version(require('./package.json').version,  '-v, --version')

// 2.添加options
....
// 3.添加create指令
program
  .command('create <project> [otherArg...]')
  .action(function (project, otherArg) {
    // vue-temp-cli create myVue a b
    // console.log('vue-temp-cli', project, otherArg.join(' '));
  });
  
// 4.添加help提示信息
....
program.parse(process.argv);

4.执行 vue-temp-cli create myVue 命令

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli create myVue
               _                              ____ _     ___
 __      _____| | ___ ___  _ __ ___   ___    / ___| |   |_ _|
 \ \ /\ / / _ \ |/ __/ _ \| '_ ` _ \ / _ \  | |   | |    | |
  \ V  V /  __/ | (_| (_) | | | | | |  __/  | |___| |___ | |
   \_/\_/ \___|_|\___\___/|_| |_| |_|\___|   \____|_____|___|

PS F:\blog\node-cli\vue-temp-cli>

5.修改字体颜色

直接修改utils.js文件，添加一个log函数，打印绿色的字体

修改完后重新执行 vue-temp-cli create myVue 命令，终端控制台就会打印绿色的欢迎界面的字体

// Node8 就提供了 util.promisify() 这个方法，方便我们快捷的把原来的异步回调方法改成返回 Promise 实例的方法
const { promisify } = require('util')
// figlet 工具可以将 message 转化为空心的字体
const figlet = promisify(require('figlet'))
// clear 清空终端的屏幕
const clear = require('clear')
// chalk是一个颜色的插件，可以修改终端字体颜色
const chalk = require('chalk')

// 输出绿色字体
const log = (str)=>{
  console.log(chalk.green(str))
}

// 打印欢迎界面
const printWelcome = async (str)=>{
  clear()
  const welcome = await figlet(str)
  // 输出绿色字体
  log(welcome)
}


module.exports = {
  printWelcome
}

3.克隆模板项目

1.安装 download-git-repo , ora 库

download-git-repo 用来 clone Github GitLab仓库项目的node库；

ora 一个优雅的 Node.js 终端加载动画效果；

PS F:\blog\node-cli\vue-temp-cli> npm install download-git-repo
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.
+ download-git-repo@3.0.2
added 124 packages from 46 contributors in 11.594s


PS F:\blog\node-cli\vue-temp-cli> npm install ora
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.
+ ora@4.0.4
added 22 packages from 25 contributors in 2.494s
PS F:\blog\node-cli\vue-temp-cli>

2.在utils.js中编写克隆模板项目的代码

1）导入download-git-repo 库的

2）调用 download-git-repo 该库的 download 方法

// Node8 就提供了 util.promisify() 这个方法，方便我们快捷的把原来的异步回调方法改成返回 Promise 实例的方法
const { promisify } = require('util')
// figlet 工具可以将 message 转化为空心的字体
const figlet = promisify(require('figlet'))
// clear 清空终端的屏幕
const clear = require('clear')
// chalk是一个颜色的插件，可以修改终端字体颜色
const chalk = require('chalk')

const log = (str)=>{
  console.log(chalk.green(str))
}

// 1.打印欢迎界面
......

// 2.克隆模板项目(Download a git `repository` to a `destination` folder  with `options`  )
const cloneProject = async (repository, destination, options)=>{
  const download = promisify(require('download-git-repo'))
  // 进度条
  const ora = require('ora')
  const process = ora(`git clone ${repository} .....`)
  process.start()
  // clone
  await download(repository, destination, options ? options : { clone: false })
  // 关闭进度条
  process.succeed()
}

module.exports = {
  printWelcome,
  cloneProject,
  log
}

3.在lib文件夹新建create.js文件

`-- vue-temp-cli
    |-- lib
        |-- create.js
        |-- utils.js
    `-- index.js

create.js文件对应的内容如下：

该文件是create指令具体代码的实现

1）打印欢迎界面

2）自动克隆模板

3）自动安装依赖

4）自动打开浏览器

5）自动运行项目

const utils = require('./utils')
/**
 * 初始化项目
 * @param {*} projectName  新建项目的名称
 * @param {*} otherArg  其它参数
 */
const initProject =async (projectName, otherArg)=>{
  // 1.打印欢迎界面
  await utils.printWelcome('HYZS WEB CLI')
  console.log(`🚀新建项目:${projectName}`)
  // 2.自动克隆模板
  await utils.cloneProject('direct:http://12.16.120.120/25759/vue-pro-temp.git#admin-app', projectName, { clone: true })

  // 3.自动安装依赖

  // 4.自动打开浏览器

  // 5.自动运行项目
   

  // https://github.com/LiuJunb/testweb  public ok
  // await utils.cloneProject('github:LiuJunb/testweb', project)
  
  // need add {clone:true}
  // await utils.cloneProject('direct:https://github.com/LiuJunb/testweb.git', project,{ clone: true })

  // 不能使用ip
  // await utils.cloneProject('gitlab:12.16.120.120:25759/vue-pro-temp', project)
    
  // ok
  // await utils.cloneProject('direct:http://12.16.120.120/25759/vue-pro-temp.git#admin-app', project, { clone: true })
    
}
module.exports = {
  initProject
}

注意：该测试案例的github仓库地址是public

5.在index.js文件中调用create.js中初始化项目的函数

var create = require(’./lib/create’)

create.initProject

#!/usr/bin/env node
var create = require('./lib/create')
var program = require('commander');
// 1.添加版本
program.version(require('./package.json').version,  '-v, --version')

// 2.添加options
....
// 3.添加create指令
program
  .command('create <project> [otherArg...]')
  .action(create.initProject);
  
// 4.添加help提示信息
....
program.parse(process.argv);

6.打开任意终端执行 vue-temp-cli create myVue 命令

PS F:\blog\node-cli>vue-temp-cli  create myVue
               _                              ____ _     ___ 
 __      _____| | ___ ___  _ __ ___   ___    / ___| |   |_ _|
 \ \ /\ / / _ \ |/ __/ _ \| '_ ` _ \ / _ \  | |   | |    | | 
  \ V  V /  __/ | (_| (_) | | | | | |  __/  | |___| |___ | | 
   \_/\_/ \___|_|\___\___/|_| |_| |_|\___|   \____|_____|___|

��新建项目目:myVue
√ git clone direct:http://12.16.120.120/25759/vue-pro-temp.git#admin-app .....
PS F:\blog\node-cli>

执行完之后，会在执行该命令的目录下新建一个 myVue 项目，并把远程仓库的代码clone下来了

4.自动安装依赖

1.在utils.js中编写执行终端命令的子线程

// Node8 就提供了 util.promisify() 这个方法，方便我们快捷的把原来的异步回调方法改成返回 Promise 实例的方法
const { promisify } = require('util')
// figlet 工具可以将 message 转化为空心的字体
const figlet = promisify(require('figlet'))
// clear 清空终端的屏幕
const clear = require('clear')
// chalk是一个颜色的插件，可以修改终端字体颜色
const chalk = require('chalk')

const log = (str)=>{
  console.log(chalk.green(str))
}

// 1.打印欢迎界面
.....

// 2.克隆模板项目(Download a git `repository` to a `destination` folder  with `options`  )
......

/**
 * 4.获取可以 执行终端命令的 子线程
 * @param  {...any} args  ['npm', ['install'], {cwd:'./myVue'}]
 * 参数说明：命令   参数   执行的目录
 *      ['npm', ['install'], {cwd:'./myVue'}]
 *		['npm', ['run', 'serve'], {cwd:'./myVue'}]
 */
const terminal = async (...args) =>{
  const {spawn} = require('child_process')
  return new Promise((resolve)=>{
    // 子线程
    const proc = spawn(...args)
    // console.log('proc=',proc)
    // 子线程 proc --终端的输出转到--> 主线程 process
    proc.stdout.pipe(process.stdout)
    proc.stderr.pipe(process.stderr)
    proc.on('close', ()=>{
      resolve()
    })
  })
}

module.exports = {
  printWelcome,
  cloneProject,
  log,
  terminal
}

2.在create.js中调用 terminal 函数来执行终端命令

const utils = require('./utils')

/**
 * 初始化项目
 * @param {*} projectName  新建项目的名称
 * @param {*} otherArg  其它参数
 */
const initProject =async (projectName, otherArg)=>{
  // 1.欢迎界面
  await utils.printWelcome('HYZS WEB CLI')
  console.log(`🚀🚀新建项目:${projectName}`)
  // 2.克隆模板
  // await utils.cloneProject(
  //   'direct:http://172.16.120.120/25759/vue-pro-temp.git#admin-app',
  //   projectName,
  //   { clone: true }
  // )

  // 3.安装依赖
  utils.log(
`🚀🚀npm install  安装依赖...`
  )
  // 这个种写法在window电脑下回报错
  // await utils.terminal('npm', ['install'], {cwd: `./${projectName}`})
  const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
  await utils.terminal(npm, ['install'], {cwd: `./${projectName}`})
  utils.log(
`🚀🚀依赖安装完毕...`
  )
  // 4.打开浏览器

  // 5.运行项目
}
module.exports = {
  initProject
}

3.执行 vue-temp-cli create myVue

执行该指令之后，就会给新建的项目自动执行 npm install

相当于执行了： cd myVue && npm install

5.自动打开浏览器

1.安装 open 依赖

open 库可以自动打开浏览器

PS F:\blog\node-cli\vue-temp-cli> npm install open
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.

+ open@7.0.4
added 3 packages from 1 contributor in 1.835s

2.编写代码

const utils = require('./utils')
const open = require('open')
/**
 * 初始化项目
 * @param {*} projectName  新建项目的名称
 * @param {*} otherArg  其它参数
 */
const initProject =async (projectName, otherArg)=>{
  // 1.欢迎界面
  await utils.printWelcome('HYZS WEB CLI')
  utils.log(`🚀🚀New Vue Project Name:${projectName}`)
  // 2.克隆模板
  ....

  // 3.安装依赖
  ....
  // 4.打开浏览器
  open('http://localhost:8080')  
  // 5.运行项目

}
module.exports = {
  initProject
}

3.测试

执行 vue-temp-cli create myVue 后会自动打开浏览器

6.自动运行项目

1.编写create.js

添加自动运行项目代码

const utils = require('./utils')
const open = require('open')
/**
 * 初始化项目
 * @param {*} projectName  新建项目的名称
 * @param {*} otherArg  其它参数
 */
const initProject =async (projectName, otherArg)=>{
  // 1.欢迎界面
  await utils.printWelcome('HYZS WEB CLI')
  utils.log(`🚀🚀New Vue Project Name:${projectName}`)
    
  // 2.克隆模板
  .....	
  
  // 3.安装依赖
  utils.log(`🚀🚀npm install 安装依赖...`)
  // 进度条
  const ora = require('ora')
  const pro = ora(`git clone ${repository} .....`)
  pro.start()
  // 这个种写法在window电脑下回报错
  // await utils.terminal('npm', ['install'], {cwd: `./${projectName}`})
  const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
  await utils.terminal(npm, ['install'], {cwd: `./${projectName}`})
  // 关闭进度条
  pro.succeed()
  utils.log(`🚀🚀finish 依赖安装完毕...`)
    
  // 4.自动打开浏览器
  open('http://localhost:8080')  
    
  // 5.自动运行项目
  await utils.terminal(npm, ['run', 'serve'], {cwd: `./${projectName}`})
    
}
module.exports = {
  initProject
}

相当于执行：cd myVue && npm run serve

2.测试

执行 vue-temp-cli create myVue 后会自动运行项目

2.发布vue-temp-cli到npm

npm config set registry http://registry.npmjs.org
npm login
npm publish

LiuJun2Son

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
node编写cli命令行(二)

该文章是在 node编写cli命令行(一) 的基础上继续编写的1.编写 create 指令编写一个新建vue项目的 create 指令，例如当执行：vue-temp-cli create myVue 时，会新建一个项目名称为myVue 的 Vue 项目1.编写 create 指令1.修改index.js文件在第3步添加新建项目的 create 指令#!/usr/bin/env nodeconsole.log('vue-temp-cli')var program = require('com
复制链接

扫一扫