建立Node腳手架工具（上）

簡介

前端有各類各樣的腳手架工具, 好比咱們經常使用的vue-cli, create-react-app等工具. 爲咱們前端早期工程的開發, 帶來極大的便利.

這麼便利的node cli, 是否是特別想知道是如何開發的? 接下來, 爲你們介紹一下怎樣開發一個腳手架工具.

課程計劃

本系列, 將分爲三節: 上中下

• （上）：主要介紹開發Node工具, 須要經常使用的工具庫.
• （中）：手把手開發一個Node工具, 實現的功能是: 相似create-react-app, 經過這個工具, 能夠建立基本的react編程結構.
• （下）: 如何發佈本身的私包到npmjs上.

如今開始第一節內容的介紹.

常見的一個cli工具, 通常會實現什麼功能呢? 看看咱們屬性的命令: 咱們以npm init, npm install爲例:

• init是一條命令. 用來建立一個package.json文件.
• init命令執行後, 要你輸入一些配置好比: "package name:", "author"等信息.
• 最後還有一個確認的信息: "Is this OK(yes)"
• 另外我也能夠加一些參數, 好比npm init -y, 這樣建立過程就使用默認配置.
• 使用npm install來安裝包時, 也能夠看到進度條和簡單的loading動畫
• 最後能看到控制檯裏部分信息是高亮顯示, 好比紅色, 綠色, 加粗等.

如今咱們一一介紹, 要實現這些功能. 咱們可用的武器有哪些?

常見的工具庫

• commander
• inquirer
• ora
• chalk
• which

commander

是一個工具包，其做用是讓node命令行程序的製做更加簡單，封裝後的node命令行接口, 簡單易用.

安裝:

npm install commander -D
複製代碼

輸入-v或--version時, 顯示cli的版本好.

const program = require('commander');

// 處理-v, --version時的輸出.
program.version(require('../package.json').version, '-v, --version');

// 解析輸入參數. 記得放在最後便可.
program.parse(process.argv); 
複製代碼

建立一條命令

• 命令爲: create
• 描述爲: Create a new project.
• 支持一個參數name, 表示項目名稱.

const program = require('commander');
program
  .version(require('../package.json').version, '-v, --version')
  .command('create <name>')
  .description('Create a new project')
  .action(name => {
    console.log(name);
  })

  program.parse(process.argv); 
複製代碼

當執行create命令後, 沒有提供參數時, 會提示缺乏參數name. 提供後, 控制檯就輸出咱們提供的name值.

到如今爲止, create命令就算新建了. 實際的命令處理邏輯, 寫在action的回調裏便可. 另外, commander的用法不少. 具體的能夠參考github上commander的介紹.

inquirer

使用它很容易的完成用戶和命令行的交互. 好比npm init時, 要咱們輸入package name, author等等信息. 最後還要咱們輸入yes確認等交互.

具體的用法，基於上面的代碼. 咱們添加和命令行的交互. 輸入一個author信息和最後確認.

#!/usr/bin/env node

const program = require('commander');
const inquirer = require('inquirer');

program
  .version(require('../package.json').version, '-v, --version')
  .command('create <name>')
  .description('Create a new project')
  .action(name => {
    inquirer.prompt([
      // 輸入類型
      {
        type: 'input',
        name: 'author',
        message: 'Please input the author name.'
      },
      // 確認類型.
      {
        type: 'confirm',
        name: 'continune',
        message: 'Is that ok?'
      }
    ]).then(result => {
      // 輸出: {author, continune}的實際的值. 
      console.log(result);
    })
  })

  program.parse(process.argv); 
複製代碼

ora

輸出進度條, loading等信息

const p = ora('建立中...')
p.start();
setTimeout(() => {
  p.stop();
}, 3000);
複製代碼

控制檯中, |一直在轉, 3s後中止.

chalk

用來在控制檯中輸出不一樣樣式的信息. 好比文字顏色, 文字背景等.

const chalk = require('chalk')
console.log(chalk.red('some error'))
複製代碼

which

經過PATH環境變量到該路徑內查找可執行文件,因此基本的功能是尋找可執行. 好比查找是否安裝了npm。

const which = require('which');
const chalk = require('chalk');

// 查找系統中用於安裝依賴包的命令
function findNpm() {
  const npms = ['tnpm', 'cnpm', 'npm'];
  for (let i = 0; i < npms.length; i++) {
    try {
      // 查找環境變量下指定的可執行文件的第一個實例
      which.sync(npms[i]);
      return npms[i]
    } catch (e) {
    }
  }
  throw new Error(chalk.red('請安裝npm'));
}
複製代碼

一份完整的代碼:

bin/cli文件

#!/usr/bin/env node

const program = require('commander');
const inquirer = require('inquirer');
const chalk = require('chalk');
const ora = require('ora');

program
  .version(require('../package.json').version, '-v, --version')
  .command('create <name>')
  .description('Create a new project')
  .action(name => {
    console.log(name);

    inquirer.prompt([
      {
        type: 'input',
        name: 'author',
        message: 'Please input the author name.'
      },
      {
        type: 'confirm',
        name: 'continune',
        message: 'Is that ok?'
      }
    ]).then(result => {
      console.log(result);
      console.log(chalk.red('some error'))

      const p = ora('建立中...')
      p.start();
      setTimeout(() => {
        p.stop();
      }, 3000);
    })
  })

  program.parse(process.argv); 
複製代碼

package.json文件

{
  "name": "cli-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "xcli": "./bin/cli"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^2.4.2",
    "commander": "^3.0.1",
    "download-git-repo": "^2.0.0",
    "inquirer": "^7.0.0",
    "ora": "^3.4.0",
    "which": "^1.3.1"
  }
}

複製代碼

項目代碼

代碼

把命令行安裝到node_module下

// 進入項目文件夾
npm link
複製代碼

安裝成功後. xcli工具就能夠在任意地方使用了.

xcli create xxx
複製代碼

有了這些武器, 咱們開發一個node命令就很是的容易了. 這些工具的完整用法. 能夠直接在github上查看官方使用說明便可.

接下來, 咱們要使用這些工具, 開發一個實際的工具. 實現的功能是: 相似create-react-app, 經過這個工具, 能夠建立基本的react編程結構。

詳情請查看: 建立Node腳手架工具（中）