从零开始搭建一个建议的脚手架

为什么要搭建cli

在前端开发中，在搭建好一套自己满意的代码架子后，希望以后可以在别的开发中也一直沿用。之前或许把这份代码的结构再手动码一份，但这样的重复劳动其实搭建好自己的cli后，就可以通过几个命令来完成了

搭建cli准备

首先新建自己cli项目完成初始化配置之后。然后完成以下步骤

npm init

在package.json中新建bin对象，如下图

这个对象中存放着之后需要执行的命令及对象的文件。

安装搭建cli的包（如上图）dependencies字段中的包。

简单介绍下面几个包的作用
commander：设置一些node命令，如包的help、usage、version、parse输入的参数，
download-git-repo：下载git上的模板，并存到本地,
chalk:可以修改输出console颜色,
inquirer:用户判断，是否执行
ora：下载包时，产生loading的图标。

编写cli代码

• 创建目录文件index.ts。

#!/usr/bin/env node
const program = require('commander'); // 命令行参数解析工具
const chalk = require('chalk'); // 输出颜色工具
const downloadGit = require('./downloadGitRepo/index.ts'); // 下载
const inquirer = require('./inquirer/index.ts'); // 问题
const log = console.log; // eslint-disable-line
const url = '项目地址'; // 模版所在为止 默认为gitHub, 也可以是全局的

program
  .command('create <name> [otherDirs...]')
  .description('提示')
  .action(async (options, otherDirs) => {
    log(options, otherDirs);
    if (!options) {
      log(chalk.red('缺少必要参数name'));
      process.exit(1); // eslint-disable-line
      return;
    }
    // const userResult = await inquirer(); // eslint-disable-line
    // log(userResult);
    log(chalk.yellow('正在初始化***'));
    downloadGit(url, options);
  });
program.parse(process.argv); // eslint-disable-line

注意 文件厚度需要添加   #!/usr/bin/env node， 代表可执行的文件，对应package。json bin目录里命令的文件。

 

downloadGit文件 ----负责下载。

const downloadGitRepo = require('download-git-repo'); // 下载工具
const ora = require('ora'); // 进度条

module.exports = (url, name) => {
  const progressBar = ora('拉取模板......');
  progressBar.start();
  downloadGitRepo(url, name, { clone: false }, (err) => {
    progressBar.stop();
    console.log(err ? err : '拉取模板完毕'); // eslint-disable-line
    process.exit(1); // eslint-disable-line
  });
};

使用

1 .本地调试或使用

npm install . -g

自己的命令名称 create 项目名称 

2 .发布到npm
首先需要注册npm账号，然后执行如下命令

npm login 
npm publish

每次发布版本号要更新，其次就是包的名字要唯一，假如被人使用只能换个名字了。

 

 

谢谢大家