开发构建脚手架命令行工具总结

构建脚手架命令行工具

我们这一章节呢，来总结下构建脚手架的基本过程，总的来说呢，过程也是相当愉快轻松的，愉快，心情完美 ~

安装依赖

首先我们需要安装构建脚手架所需要的依赖，如下：

cnpm install -D commander inquirer chalk ora download-git-repo

核心工具：commander、inquirer、download-git-repo
每个工具的作用

• commander: 这是用来编写指令和处理命令行的
• inquirer: 这是个强大的交互式命令行工具，问答类型的
• download-git-repo: 用来下载远程模板的，支持 GitHub、 GitLab 和 Bitbucket 等
• chalk: 修改控制台输出内容样式的，比如颜色
• ora: 这是一个好看的加载，就是你下载的时候会有个转圈圈的那种效果

命令编写

首先我们需要在bin目录下，定义我们的执行文件 ( 绑定/解绑全局 npm link/unlink )：

"bin": {
	"xr": "bin/rc",
	"xr-add": "bin/rc-add",
	"xr-delete": "bin/rc-delete",
	"xr-list": "bin/rc-list",
	"xr-init": "bin/rc-init"
}

入口文件bin/rc

首先我们需要编写，我们的入口文件，也就是我们的入口命令，当我们在命令行输入rc的时候，就会打印出该脚手架相关的一些信息：

#!/usr/bin/env node
const commander = require('commander')
const path = require('path')

// 定义当前的版本 定义使用的方法 定义四个指令
commander
  .version(require(path.resolve(__dirname,'../package.json')).version)
  .usage('<command> [options]')
  .command('add','add a new template')
  .command('delete','delete a new template')
  .command('list','list all templates')
  .command('init','add a new template')

// 解析命令行的参数
commander.parse(process.argv)

命令行打印如下：

E:webgithubcli-tool>node ./bin/xr -h
Usage: xr <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  add            add a new template
  delete         delete a new template
  list           list all templates
  init           add a new template

新增模板内容命令行交互

接着呢，我们需要编写rc-add文件，在命令行新增我们的模板内容：

//...
// 接收问题的答案
inquirer.prompt(questions).then(answers => {
  console.log(answers)
  // 获取传递过来的参数
  const { name, url } = answers;
  // 过滤 unicode 字符
  tpl[name] = url.replace(/[u0000-u0019]/g, '')
  // 把信息写入 template.json 文件中
  fs.writeFile(path.resolve(__dirname,'../template.json'),JSON.stringify(tpl), 'utf-8', err => {
    if(err) console.log(err)
    console.log('n')
    console.log(chalk.green('新增成功 success!n'))
    console.log(chalk.grey('最新的模板列表如下: n'))
    console.log(tpl)
    console.log('n')
  })
})

最终效果：

E:webgithubcli-tool>node ./bin/xr-add
? 请输入模板名称 riverscoder
? 请输入模板地址 riverscoder/webpack-vue-cli-yourowm
{ name: 'riverscoder', url: 'riverscoder/webpack-vue-cli-yourowm' }
新增成功 success!

最新的模板列表如下:

{ riverscoder: 'riverscoder/webpack-vue-cli-yourowm' }

删除及模板列表打印

这两个文件rc-delete和rc-list很简单，这里呢，直接贴核心代码：

• 删除

//...
// 接收问题的答案
inquirer.prompt(questions).then(answers => {
  // 获取传递过来的参数 删除对应属性
  const { name } = answers;
  delete tpl[name];

  // 把信息写入 template.json 文件中
  fs.writeFile(path.resolve(__dirname,'../template.json'),JSON.stringify(tpl), 'utf-8', err => {
    if(err) console.log(err)
    console.log('n')
    console.log(chalk.green('删除成功 success!n'))
    console.log(chalk.grey('最新的模板列表如下: n'))
    console.log(tpl)
    console.log('n')
  });
})

• 列表

#!/usr/bin/env node

const path = require('path');
const chalk = require('chalk');
const tpl = require(path.resolve(__dirname, '../template.json'));

console.log(chalk.grey('当前的模板列表如下: n'))
console.log(tpl)

rc init 初始化项目

最终呢，我们需要使用rc-init这样的命令来初始化我们的本地项目，这里呢，贴出核心代码，主要实现的就是，获取仓库地址，然后使用download-git-repo新项目文件夹，下载存放到到项目文件夹内即可

//...
// 获取对应模板名称对应的 url
let url = tpl[templateName];
console.log(chalk.white('n 开始生成项目…… n'));
//出现加载图标
const spinner = ora('下载中……');
spinner.start();

// 开始下载拉取仓库资源
download(url,projectName,err => {
  if(err){
    spinner.fail();
    console.log(chalk.red(`n构建失败.`))
    return
  }
  // 结束加载
  spinner.succeed();
  console.log(chalk.green('n 构建完成.'))
  console.log('n To get started')
  console.log(`n  cd ${projectName} n`);
  return true;
});

结语

好，整个的脚手架工具构建呢，就基本大功告成，当然目前也有很多其他的yomen等脚手架，直接生成脚手架工具模板，也是一种很不错的选择；基本的思路呢，就是想办法获取用户输入的信息，并且通过这些信息，拉取对应的远程仓库构建本地的项目内容；

最后

以上就是温婉指甲油为你收集整理的开发构建脚手架命令行工具总结的全部内容，希望文章能够帮你解决开发构建脚手架命令行工具总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。