node 生成 cli 實戰

又在寫bug發表於2018-11-16

前言

本文主要重點在於實戰程式碼,原理性的東西相信大家都能在其他地方搜到就不講了

程式碼部分

工程目錄

截圖

package.json

可以直接負責,也可以 npm init 。但是其中 bin 語句必不可少下面會講解到

{
"name": "webpack4_cli_yhy",
"version": "1.0.2",
"description": "test-cli",
"main": "./index.js",
"keywords": [
  "cli"
],
"bin": {
  "webpack4-cli": "./index.js"
},
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
  "chalk": "^2.4.1",
  "commander": "^2.19.0",
  "download-git-repo": "^1.1.0",
  "handlebars": "^4.0.12",
  "inquirer": "^6.2.0",
  "log-symbols": "^2.2.0",
  "ora": "^3.0.0"
}
}

複製程式碼

index.js

#!/usr/bin/env node
const fs = require('fs');
const program = require('commander');
const download = require('download-git-repo');
const handlebars = require('handlebars');
const inquirer = require('inquirer');
const ora = require('ora');
const chalk = require('chalk');
const symbols = require('log-symbols');

program.version('1.0.0', '-v, --version')
   .command('init <name>')
   .action((name) => {
       if(!fs.existsSync(name)){
           inquirer.prompt([
               {
   				name: 'description',
   				message: '請輸入專案描述'
   			},
   			{
   				name: 'author',
   				message: '請輸入作者名稱'
   			}
           ]).then((answers) => {
               const spinner = ora('正在下載模板...');
               spinner.start();
   			download('yuhaiyang1/webpack4', name, (err) => {
                   if(err){
                       spinner.fail();
                       console.log(symbols.error, chalk.red(err));
                   }else{
                       spinner.succeed();
                       const fileName = `${name}/package.json`;
                       const meta = {
                           name,
                           description: answers.description,
                           author: answers.author
                       }
                       if(fs.existsSync(fileName)){
                           const content = fs.readFileSync(fileName).toString();
                           const result = handlebars.compile(content)(meta);
                           fs.writeFileSync(fileName, result);
                       }
                       console.log(symbols.success, chalk.green('專案初始化完成'));
                   }
               })
           })
       }else{
           // 錯誤提示專案已存在,避免覆蓋原有專案
           console.log(symbols.error, chalk.red('專案已存在'));
       }
   })
program.parse(process.argv);
複製程式碼

具體為啥這麼寫可以看下其他大神文章我講下注意事項

node 生成 cli 實戰

  • 這裡是是我的github 地址,語法糖 [作者]/[倉庫名]也支援其他倉庫 更多請檢視 download-git-repo 這個庫
  • 還有就是我們對應的github倉庫package.json 也要改 因為這裡傳入三個引數 一個是 name ,一個是 description,最後是 author
    node 生成 cli 實戰

發 npm 包

npm login && npm publish 然後釋出成功

下載使用

  • 以我這個例子 npm i webpack4_cli_yhy -g 安裝完以後隨便找個資料夾

node 生成 cli 實戰
這個 webpack4-cli 就是你自己的package.json bin 物件

  • cd mycli 並開啟 如下圖
    node 生成 cli 實戰
    左邊是我 github的倉庫裡的內容同時可以看到我們剛才控制檯輸入的內容在這裡顯示出來了
  • 以後更新只需要更新 github裡的東西就行了 如果你想擴充套件自己的腳手架那麼每次更新完都要重新發 npm 包

結語

寫的比較倉促多多包涵

相關文章