腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

搭建一個nodejs腳手架的方法步驟

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

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

1 前言

1.1

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

1.2 為什么需要腳手架

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

1.3 怎樣來搭建呢？

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

1.4 本文的目標讀者

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

2 搭建前準備

2.1 第三方工具

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

2.2 上手

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

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

$ mkdir lq-cli
$ npm init

這時在我們的 lq-cli 項目中有 package.json 文件，然后需要創(chuàng)建一個 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!');

到這一步就可以簡單運行一下這個命令

npm link
lq

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

2.2.2 捕獲init之類的命令

前面的一個小節(jié)，可以跑一個命令行了，但是我們看到的 taro-cli 中還有一些命令，init初始化項目之類。這個時候 commander 就需要利用起來了。運行下面的這個命令將會把最新版的 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 來查看版本號通過 lq init name 的操作，action里面會打印出name

2.2.3 對console的美工

我們看到taro init 命令里面會有一些顏色標識，就是因為引入了chalk這個包，同樣和 commander 一樣

npm install --save chalk

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

這樣會輸出一樣綠色的

2.2.4 模板下載

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

npm install --save download-git-repo

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

2.2.5 命令行的交互

命令行交互功能可以在用戶執(zhí)行 init 命令后，向用戶提出問題，接收用戶的輸入并作出相應(yīng)的處理。用 inquirer.js 來實現(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進度顯示

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 在信息前面加上 √ 或 × 等的圖標

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é)

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

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

您可能感興趣的文章: