搭建一個(gè)nodejs腳手架的方法步驟

更新時(shí)間：2019年06月28日 14:35:57 作者：Rick_Lee

這篇文章主要介紹了如何搭建一個(gè)nodejs腳手架的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1 前言

1.1

像我們熟悉的 vue-cli，taro-cli 等腳手架，只需要輸入簡單的命令 taro init project ，即可快速幫我們生成一個(gè)初始項(xiàng)目。在日常開發(fā)中，有一個(gè)腳手架工具可以用來提高工作效率。

1.2 為什么需要腳手架

減少重復(fù)性的工作，從零創(chuàng)建一個(gè)項(xiàng)目和文件。
根據(jù)交互動(dòng)態(tài)生成項(xiàng)目結(jié)構(gòu)和配置文件等。
多人協(xié)作更為方便，不需要把文件傳來傳去。

1.3 怎樣來搭建呢？

腳手架是怎么樣進(jìn)行構(gòu)建的呢，我是借助了 taro-cli 的思路。

1.4 本文的目標(biāo)讀者

1 想要學(xué)習(xí)更多和了解更多的人
2 對技術(shù)充滿熱情

2 搭建前準(zhǔn)備

2.1 第三方工具

commander.js ，可以自動(dòng)的解析命令和參數(shù)，用于處理用戶輸入的命令。
download-git-repo ，下載并提取 git 倉庫，用于下載項(xiàng)目模板。
Inquirer.js ，通用的命令行用戶界面集合，用于和用戶進(jìn)行交互。
handlebars.js ，模板引擎，將用戶提交的信息動(dòng)態(tài)填充到文件中。
ora ，下載過程久的話，可以用于顯示下載中的動(dòng)畫效果。
chalk ，可以給終端的字體加上顏色。
log-symbols ，可以在終端上顯示出 √ 或 × 等的圖標(biāo)

2.2 上手

2.2.1 新建一個(gè)文件夾，然后npm init初始化

npm 不單單用來管理你的應(yīng)用和網(wǎng)頁的依賴，你還能用它來封裝和分發(fā)新的 shell 命令。

$ mkdir lq-cli
$ npm init

這時(shí)在我們的 lq-cli 項(xiàng)目中有 package.json 文件，然后需要?jiǎng)?chuàng)建一個(gè) JS 文件包含我們的腳本就取名 index.js 吧。 package.json 內(nèi)容如下

{
 "name": "lq-shell",
 "version": "1.0.0",
 "description": "腳手架搭建",
 "main": "index.js",
 "bin": {
  "lq": "./index.js"
 },
 "scripts": {
  "test": "test"
 },
 "keywords": [
  "cli"
 ],
 "author": "prune",
 "license": "ISC"
}

index.js內(nèi)容如下

#!/usr/bin/env node

console.log('Hello, cli!');

到這一步就可以簡單運(yùn)行一下這個(gè)命令

npm link
lq

npm link 命令可以將一個(gè)任意位置的 npm 包鏈接到全局執(zhí)行環(huán)境，從而在任意位置使用命令行都可以直接運(yùn)行該 npm 包。控制臺(tái)會(huì)輸出 Hello, cli!

2.2.2 捕獲init之類的命令

前面的一個(gè)小節(jié)，可以跑一個(gè)命令行了，但是我們看到的 taro-cli 中還有一些命令，init初始化項(xiàng)目之類。這個(gè)時(shí)候 commander 就需要利用起來了。運(yùn)行下面的這個(gè)命令將會(huì)把最新版的 commander 加入 package.json

npm install --save commander

引入 commander 我們將 index.js 做如下修改

#!/usr/bin/env node

console.log('Hello, cli!')

const program = require('commander')
program
 .version(require('./package').version, '-v, --version')  
 .command('init <name>')
 .action((name) => {
   console.log(name)
 })
 
program.parse(process.argv)

可以通過 lq -v 來查看版本號(hào) 通過 lq init name 的操作，action里面會(huì)打印出name

2.2.3 對console的美工

我們看到taro init 命令里面會(huì)有一些顏色標(biāo)識(shí)，就是因?yàn)橐肓薱halk這個(gè)包，同樣和 commander 一樣

npm install --save chalk

console.log(chalk.green('init創(chuàng)建'))

這樣會(huì)輸出一樣綠色的

2.2.4 模板下載

download-git-repo 支持從 Github下載倉庫，詳細(xì)了解可以參考官方文檔。

npm install --save download-git-repo

download() 第一個(gè)參數(shù)就是倉庫地址,詳細(xì)了解可以看官方文檔

2.2.5 命令行的交互

命令行交互功能可以在用戶執(zhí)行 init 命令后，向用戶提出問題，接收用戶的輸入并作出相應(yīng)的處理。用 inquirer.js 來實(shí)現(xiàn)。

npm install --save inquirer

index.js文件如下

#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init創(chuàng)建'))
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
program
 .version(require('./package').version, '-v, --version')  
 .command('init <name>')
 .action((name) => {
   console.log(name)
   inquirer.prompt([
    {
      type: 'input',
      name: 'author',
      message: '請輸入你的名字'
    }
   ]).then((answers) => {
    console.log(answers.author)
    download('',
     name, {clone: true}, (err) => {
     console.log(err ? 'Error' : 'Success')
    })
   })
   
 })
program.parse(process.argv)

2.2.6 ora進(jìn)度顯示

npm install --save ora

相關(guān)命令可以如下

const ora = require('ora')
// 開始下載
const proce = ora('正在下載模板...')
proce.start()

// 下載失敗調(diào)用
proce.fail()

// 下載成功調(diào)用
proce.succeed()

2.2.6 log-symbols 在信息前面加上 √ 或 × 等的圖標(biāo)

npm install --save log-symbols

相關(guān)命令可以如下

const chalk = require('chalk')
const symbols = require('log-symbols')
console.log(symbols.success, chalk.green('SUCCESS'))
console.log(symbols.error, chalk.red('FAIL'))

2.2.7 完整文件如下

#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init創(chuàng)建'))
const fs = require('fs')
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
const ora = require('ora')
const symbols = require('log-symbols')
program
 .version(require('./package').version, '-v, --version')  
 .command('init <name>')
 .action((name) => {
   console.log(name)
   inquirer.prompt([
    {
      type: 'input',
      name: 'author',
      message: '請輸入你的名字'
    }
   ]).then((answers) => {
    console.log(answers.author)
    const lqProcess = ora('正在創(chuàng)建...')
    lqProcess.start()
    download('github:/Mr-Prune/learn/mongodb-koa',
     name, {clone: true}, (err) => {
     if (err) {
      lqProcess.fail()
      console.log(symbols.error, chalk.red(err))
     } else {
      lqProcess.succeed()
      const fileName = `${name}/package.json`
      const meta = {
       name,
       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('創(chuàng)建成gong'))
     }
    })
   })
   
 })
program.parse(process.argv)

總結(jié)

通過上面的例子只是能夠搭建出一個(gè)簡單的腳手架工具，其實(shí)bash還可以做很多東西，比如 npm 包優(yōu)雅地處理標(biāo)準(zhǔn)輸入、管理并行任務(wù)、監(jiān)聽文件、管道流、壓縮、ssh、git等，要想了解更多，就要深入了解，這里只是打開一扇門，學(xué)海無涯。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: