美文网首页
构建一个自己的cli

构建一个自己的cli

作者: IsaacHHH | 来源:发表于2018-11-24 18:09 被阅读8次

一个类似于vue、ract的脚手架,可以快速初始化一个基于hapi.js的项目目录结构。

准备工具

npm install commander log-update shelljs
  • commander
    • commander是一个很成熟的Node命令行交互工具。
  • shelljs
    • shelljs可以很方便的在Node中执行一些命令。
  • log-update
    • log-update通过在命令行中覆盖前面的内容,来渲染进度条、动画等。

开始

这里我们的目的是创建一个可以用于初始化一个项目结构的cli。

整体思路很简单:

  • 编写一个基本的项目结构作为项目模板;
  • 将该模板提交到Github上;
  • 构建cli;
  • 执行cli,拉取模板代码。

这里,我们直接使用一个现成的项目的git地址作为模板:git@github.com:imhxc/hapi-temp.git

构建cli代码

#! /usr/bin/env node

const program = require('commander');
const logUpdate = require('log-update');
const shell = rqeuire('shelljs');

program
  .version('1.0.1')
  .usage('app_name')
  .description('构建hapi模板')
  .parse(process.argv);

 if (!program.args.length) {
   program.help();
 }
 if (program.args.length === 1) {
   shell.mkdir('-p', program.args[0]);
   shell.cd(program.args[0]);
   shell.exec('git init');
   let i = 0;
   const frames = ['-', '\\', '|', '/'];
   const interval = setInterval(() => {
    const frame = frames[i = ++i % frames.length];
    logUpdate(`👉 👉 ${frame} initializing ${frame} 👈 👈`);
   }, 50)
   shell.exec('git pull git@github.com:imhxc/hapi-temp.git', (code) => {
     clearInterval(interval);
     if (code !== 0) {
       console.log('Error! Try again');
       shell.exit(1);
     }
     console.log('👏 👏 Completed! You are  good to go! 👏 👏');
   })
 }

代码并不多,核心就是通过拉去一个模板代码到本地。

发布

在发布之前,我们需要配置一下我们的package.json文件。

// package.json
....
"name": "create-hapi-cli", // npm依赖名称
"bin": {
    "create-hapi-app": './bin/index.js'
},
"keywords": {
    "hapi",
    "node",
    "cli"
}
....

在这里,我们主要配置了name,binkeywords字段,其中最关键的就是bin

这里我们指定了cli的调用名称以及执行的文件,这样,我们就可以通过下列方法来执行cli:

create-hapi-app my_app

构建好后,我们需要通过npm publish来发布。如果你是第一次发布,可能需要添加--access public参数:

npm publish --access public

发布成功后,我们就可以通过执行npm install create-hapi-cli -g就可以安装到本地了,就可以调用create-hapi-app命令了。

项目地址

相关文章

  • 构建一个自己的cli

    一个类似于vue、ract的脚手架,可以快速初始化一个基于hapi.js的项目目录结构。 准备工具 command...

  • Vue+Element-UI构建项目

    vue-cli构建基于webpack的项目 使用vue-cli构建项目vue init webpack proje...

  • Vue 学习笔记

    1. 使用vue-cli3构建项目 全局安装 vue-cli3 查看 vue-cli 版本 快速构建项目 使用 v...

  • Vue Cli2 项目打包优化

    一、新建项目 使用 vue-cli2构建一个初始的Vue项目:vue init webpack cli2_base...

  • Vue Cli2 项目配置

    使用vue-cli2构建一个项目,vue inint webpack cli2_base,然后运行起项目 npm ...

  • Vue Cli3 项目打包优化

    一、新建项目 使用 vue-cli3 构建一个初始的Vue项目:Cli3 官方文档 因为使用了cli3,很多目录结...

  • 122、Vue Cli3 项目打包优化

    一、新建项目 使用 vue-cli3 构建一个初始的Vue项目:Cli3 官方文档 因为使用了cli3,很多目录结...

  • 快速建立vue项目

    安装vue-cli 全局安装npm install --globalvue-cli 用vue-cli来构建项目 创...

  • vue webpack 包管理与配置项

    vue-cli 构建项目,以下是 vue-cli 3 构建的基础模型: name : 项目名称也就是包名称,命名规...

  • 构建属于自己的CLI工具

    前言 CLI,全称是command-line interface,也就是命令行交互接口。无论是在前端还是后端,都可...

网友评论

      本文标题:构建一个自己的cli

      本文链接:https://www.haomeiwen.com/subject/oeuyqqtx.html