如何打造本身的CLI？

有哪些CLI？

• Vue-cli
• Gulp
• create-react-app
• webpack
• yeoman
• express-generator
• ...

爲何須要CLI？

1. 減小重複性工做。
2. 根據動態命令更方便的生成開發環境。
3. 團隊協同，效率高。

咱們要達到的設計？

1. Node-Simple-BFF-Architecture init node-BFF

2. Node-Simple-BFF-Architecture list

最終的效果圖

步驟：

一. 新建文件,進入文件夾 npm init

二. 在package.json文件夾下加入：

bin:{
           "Node-Simple-BFF-Architecture": "./bin/index.js"    
        }
複製代碼

三.在目錄下新建文件夾 bin,在bin下新建index.js

四. 執行命令:

npm link
複製代碼

五.在index.js文件夾下寫入:

#!/usr/bin/env node
    
    
    //1.獲取用戶輸入的命令 
    
    console.log(process.argv)
複製代碼

六. 在控制檯執行:

Node-Simple-BFF-Architecture 
複製代碼

即可以看見控制檯有這個Node-Simple-BFF-Architecture命令了。

七. 代碼(我都有註釋):

#!/usr/bin/env node 
//邏輯：
  //1.獲取用戶輸入的命令 console.log(process.argv)
  //2.根據命令進行操做。。。。。




// 處理 用戶 命令 好比: Node-Simple-BFF-Architecture -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 = [
        "",
                " ▍ ★∴",
         " s ．t ．▍▍a．..r．█▍ ☆ ★∵t ..../ ",
        "  ◥█▅▅██▅▅██▅▅▅▅▅███◤ ",
        "   ．◥███████████████◤",
        "～～～～◥█████████████◤～～～～",
        "～～～～～～～～～～～～～～～～～～～～～～～～"
    ]


//查看版本號
program
  .version('1.0.0')

//設計命令 初始化命令
//Node-Simple-BFF-Architecture init node-BFF
program
  .command('init <template>')
  .description('Initializing BFF architecture')
  .action(function(template){
    download('https://github.com:1049229070/node-middleware-php#master', 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 enter the project name?'

        }]).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')))
           
        });
      })
  });

//設計命令 查看全部幫助
//Node-Simple-BFF-Architecture 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號)：

1. npm login
    
2. npm publish
複製代碼

八. 發佈過程當中遇到的問題。

1. publish Failed PUT 400
複製代碼

package.json中name須要小寫:

"name": "node-simple-bff-architecture"
複製代碼

九. 疑惑。 1.我但願在與用戶交互的時候多一些動畫效果，不知道有沒有大神能給我推薦一些npm包。記得給我流言哦，但願這篇文章對你們理解CLI實際工做原理有用。