乐趣区

关于cli:从0构建cli脚手架

jiezi

前言

脚手架的作用

  • 缩小重复性的工作，不须要复制其余我的项目再删除无关代码，或者从零创立一个我的项目和文件。
  • 能够依据交互动静生成我的项目构造和配置文件。
  • 多人合作更为不便，不须要把文件传来传去。

本文我的项目残缺代码 请戳https://github.com/xiumubai/xiumu-cli

实现性能

  • xiumu init <projectName>依据近程模板，初始化一个我的项目（vue、react）
  • xiumu --version 查看以后版本号
  • xiumu -h 帮忙命令

第三方库

仓库 用处
commander 命令行工具
download-git-repo 用来下载近程模板
inquirer 交互式命令行工具
ora 显示 loading 动画

我的项目初始化

创立一个空我的项目(xiumu-cli)，应用 npm init 进行初始化。

装置依赖

yarn add commander inquirer download-git-repo

增加 bin 命令

在 package.json 文件中增加

{
  "bin": {"xiumu": "./index.js"},
}

这样咱们就能够应用 xiumu 这个命令了。

在 index.js 文件头部中增加 #!/usr/bin/env node 用来指定运行环境。

增加 command 命令

接下来须要增加 init 命令，这样就能够应用 xiumu init <projectName> 进行我的项目的初始化。

commander 是 node.js 命令行解决方案。能够应用它进行命令交互。

index.js

#!/usr/bin/env node

const {Command} = require('commander');
const program = new Command();

class Init {start() {
    program
      .version(require('./package.json').version)
      .option('-v, --version', '查看以后版本');

    program
      .command('init <projectName>')
      .description('create a new project')
      .action((projectName, options) => {console.log('projectName': projectName)
      });
    program.parse(process.argv);
  }
}

new Init().start();

运行node index.js init test，在日志中失去

projectName: test

这阐明曾经拿到了初始化的 test 目录名字，初始化实现的我的项目会放在 test 目录下。

增加模板抉择

接下来须要抉择模板抉择，当初提供的模板有 vue 和 react 两个。

代码地址：react、vue。

增加 inquirer 命令交互，能够供用户抉择。

#!/usr/bin/env node

const {Command} = require('commander');
const inquirer = require('inquirer');
const program = new Command();

class Init {start() {
    program
      .version(require('./package.json').version)
      .option('-v, --version', '查看以后版本');

    program
      .command('init <projectName>')
      .description('create a new project')
      .action((projectName, options) => {console.log(projectName, options)
        inquirer
          .prompt([
            {
              type: 'list',
              name: 'template',
              message: 'please select frame type',
              choices: ['Vue', 'React']
            }
          ])
          .then((answer) => {console.log(answer.template)
          })
      });
    program.parse(process.argv);
  }
}

new Init().start();

如果抉择的是 Vue，这里的日志打印为Vue，反之就是React, 也就意味着咱们能够拿到不同的值去抉择不同的模板。接下来就是须要从 git 上拉取不同的模板代码，clone 到本地就能够了。

增加模板下载

模板增加须要应用 download-git-repo，具体用法参考官网。

#!/usr/bin/env node

const {Command} = require('commander');
const fs = require('fs');
const inquirer = require('inquirer');
const ora = require('ora')
const downloadGit  = require('download-git-repo');
const program = new Command();

class Init {start() {
    program
      .version(require('./package.json').version)
      .option('-v, --version', '查看以后版本');

    program
      .command('init <projectName>')
      .description('create a new project')
      .action((projectName, options) => {console.log(projectName)
        inquirer
          .prompt([
            {
              type: 'list',
              name: 'template',
              message: 'please select frame type',
              choices: ['Vue', 'React']
            }
          ])
          .then((answer) => {console.log(answer.tempalate);
            const spinner = ora('downloading template ...');
            spinner.start();
            const template = answer.template === 'Vue' ? 'vue-template' : 'react-template';
            const api = `github:xiumubai/cli-template-store#${template}`;
            downloadGit(api, projectName, (err) =>{if (err) {spinner.fail('模板下载失败')
              } else {spinner.succeed('模板下载胜利')
              }
            })
          })
      });
    program.parse(process.argv);
  }
}

new Init().start();

这里咱们依据抉择的不同模板，抉择了不同的分支，而后进行了拼接，api为实现的代码地址。

当初整个流程就实现跑通了，一个最简略的 cli 脚手架工具就曾经写完了。运行命令node index.js init test, 而后抉择模板，静静期待模板下载。

公布至 npm

没有注册账号的能够先去 npm 官网注册一个账号。注册胜利当前就能够在本地进行登录了。

登录

npm login 输出账户名、明码、邮箱、邮箱验证码就能够登录胜利。

公布包

npm publish --access=public // 如果是公开包这样公布，如果不是公开的包则去掉 --access=public 即可

公布胜利当前，皆能够在本地应用了。

装置应用

装置

yarn add @xiumu/cli -g

创立我的项目

xiumu init <projectName>

输出我的项目名字，抉择对应的 vue 或者 react 模板

写在最初

置信到这里，你曾经学会了如何去写一个最根本的脚手架。那么就动起手来，亲自去实际一遍，你的了解就会更粗浅。

这里还有很多要做的额定工作，比方创立我的项目的时候判断以后的我的项目是不是曾经存在，package.json文件里的 name,author 等的初始化等。

我是朽木白，一个酷爱分享的程序猿。如果感觉本文还不错，记得 三连 + 关注，说不定哪天就用得上！您的激励是我坚持下去的最大能源❤️。

退出移动版