vue - 如何打造属于自己的CLI脚手架工具?
文章 1824 0 0 0
发布时间:2019年10月12日

概述

有哪些CLI?

Vue-cli

Gulp

create-react-app

webpack

yeoman

express-generator

为什么需要CLI?

减少重复性工作。

根据动态命令更方便的生成开发环境。

团队协同,效率高。

我们要达到的设计?

zmz-vuecli init demo
zmz-vuecli list

最终的效果图

vue - 如何打造属于自己的CLI脚手架工具?

步骤

一. 新建文件,进入文件夹

npm init

二. 在package.json文件夹下加入

bin:{
    "zmz-vuecli": "./bin/index.js"
}

三.在目录下新建文件夹 bin,在bin下新建index.js

vue - 如何打造属于自己的CLI脚手架工具?

四. 执行命令

npm link

五.在index.js文件夹下写入

第一行是检测是否安装node

#!/usr/bin/env node
//1.获取用户输入的命令
console.log(process.argv)

六. 在控制台执行

zmz-vuecli

便可以看见控制台有这个zmz-vuecli命令了。

七. 代码(我都有注释)

#!/usr/bin/env node
//逻辑:
//1.获取用户输入的命令 console.log(process.argv)
//2.根据命令进行操作。。。。。
// 处理 用户 命令 比如: zmz-vuecli -version 
//处理用户命令
const program = require('commander'),
      //下载
      download = require('download-git-repo'),
      //模板引擎当作字符串
      handlebars = require('handlebars'),
      // 交互
      inquirer = require('inquirer'),
      //视觉美化
      ora = require('ora'),
      //字体颜色
      chalk = require('chalk'),
      //路径
      fs = require('fs'),
      //对勾优化
      logSymbols = require('log-symbols'),
      //自定义字符画
      chars = [
          "complete",
          "~~~~~~~~~~~~~~~~~~~~~~~~~~~~",
          "~~~~~~~~~~ qq: 1028470211 ~~~~~~~~~~",
          "~~~~~~~email:jiawenguang0213@sina.com~~~~~~",
          "~~~~~~~~~  www.zhuimengzhu.com ~~~~~~~~",
          "~~~~~~~~~~~~~~~~~~~~~~~~~~~~",
      ]
//查看版本号
program
    .version('1.0.0')
//设计命令 初始化命令
//zmz-vuecli init demo
program
    .command('init <template>')
    .description('Initializing BFF architecture')
    .action(function(template){
    download('github:jiawenguang/zmz-vuecli', template, function (err) {
        const spinner = ora(chalk.green('Download in progress…')).start();
        if(err){
            spinner.fail(chalk.red('Download failed…'));
            return false
        }
        spinner.succeed();

        inquirer.prompt([{
            type:'input',
            name:'name',
            message:'Please click Enter?'
        }]).then(answers => {
            const packagePath = ${template}/package.json;
            const packageJson =  fs.readFileSync(packagePath,'utf-8');
            const packageResult =  handlebars.compile(packageJson)(answers);
            fs.writeFileSync(packagePath,packageResult);
            console.log(logSymbols.success,chalk.green(chars.join('\n')))

        });
    })
});
//设计命令 查看所有帮助
//zmz-vuecli list
program
    .command('list')
    .description('View all commands') 
    .action(function(){
    console.log('mode');
})
//设计命令 其他命令处理
program
    .command('*')
    .action(function(env){
    console.log('No operation was found.', env);
});
program.parse(process.argv);

七.发布(需要注册一个npm号)

npm login
npm publish

八. 删除

npm unpublish zmz-vuecli@1.0.0 删除某个版本
npm unpublish zmz-vuecli —force 删除整个npm市场的包
评论专区