Nodejs開發簡單的腳手架工具

時間  2019-11-07
標籤 nodejs 開發 簡單 腳手架 工具 简体版
原文   原文鏈接

腳手架，這個名詞對於做爲前端的咱們來講，也許並不陌生吧，像vue-cli，react-native-cli等，全局安裝後，只須要在命令行中敲入一個簡單的命令，即可幫咱們快速的生成一個初始項目，如vue init webpack projectName，便可生成一個初始的vue項目。
本文主要是介紹開發一個簡單的腳手架，瞭解開發的基本流程、最終經過npm link連接到全局包。
<!-- more -->javascript

腳手架的做用

一、減小時間，沒必要從零開始搭建初始項目，提升開發效率。
二、便於多人協做。
三、項目更新同步方便，只須要更新代碼庫中項目模板，便可下載最新的項目。html

node相關基礎知識

在開始項目前，先簡單介紹下node相關的一些基礎知識，經過npm init初始化一個node項目時，會生成一個package.json的配置文件，包括項目名稱、版本、做者、依賴等相關信息，主要說一下其中的bin字段。
不少包都有一個或多個可執行的文件，但願放在PATH中，（實際上，就是這個功能讓npm可執行的）。
當你要用這個功能時，須要給package.json中的bin字段添加一個命令名，並指向須要執行的文件（即後文的入口文件）。初始化的時候npm會將他連接到prefix/bin（全局初始化）或者./node_modules/.bin/（本地初始化）。
好比，npm有：前端

{ "bin" : { "npm" : "./npm-cli.js" } }

因此，當你初始化npm，它會建立一個符號連接到npm-cli.js腳本到/usr/local/bin/npm。vue

若是你只有一個可執行文件，而且名字和包名同樣。那麼你能夠只用一個字符串，好比：java

{ "name": "my-program"
  , "version": "1.2.5"
  , "bin": "./path/to/program" }

結果和這個同樣：node

{ "name": "my-program"
  , "version": "1.2.5"
  , "bin" : { "my-program" : "./path/to/program" } }

想要了解package.json更多的詳細配置，請參考這篇文章react

思路

要開發腳手架，首先要理清思路，腳手架是如何工做的？咱們能夠借鑑 vue-cli 的基本思路。vue-cli 是將項目模板放在 git 上，運行的時候再根據用戶交互下載不一樣的模板，通過模板引擎渲染出來，生成項目。這樣將模板和腳手架分離，就能夠各自維護，即便模板有變更，只須要上傳最新的模板便可，而不須要用戶去更新腳手架就能夠生成最新的項目。那麼就能夠按照這個思路來進行開發了。webpack

初始化項目

新建一個文件夾，打開命令行工具，經過npm init 進行項目初始化，會在項目根目錄下生成package.json文件。git

npm init

安裝依賴

npm install commander download-git-repo inquirer handlebars ora chalk log-symbols shelljs -S

除此以外，還使用了nodejs的幾個內置模塊：fs、path、child_process
commander.js：能夠自動的解析命令和參數，用於處理用戶輸入的命令。github

download-git-repo：下載並提取 git 倉庫，用於下載項目模板。

Inquirer.js：通用的命令行用戶界面集合，用於和用戶進行交互。

handlebars.js：模板引擎，將用戶提交的信息動態填充到文件中。

ora：下載過程久的話，能夠用於顯示下載中的動畫效果。

chalk：能夠給終端的字體加上顏色。

log-symbols：能夠在終端上顯示出 √ 或 × 等的圖標。

fs：node內置的文件處理模塊。

path：node內置的路徑處理、解析模塊。

child_process：node中建立子進程模塊。

配置入口文件

一、在package.json文件中增長bin字段，暫且先命名爲okcli吧。

"bin": {
    "okcli": "./index.js"
  }

二、在項目根目錄新建index.js文件，在index.js文件頂部添加如下代碼：

#!/usr/bin/env node

便可進行開發。
在這裏，簡單介紹下這行代碼含義。
<font color=#f00>
!/usr/bin/node是告訴操做系統執行這個腳本的時候，調用/usr/bin下的node解釋器；
!/usr/bin/env node這種用法是爲了防止操做系統用戶沒有將node裝在默認的/usr/bin路徑裏。當系統看到這一行的時候，首先會到env設置裏查找node的安裝路徑，再調用對應路徑下的解釋器程序完成操做。
!/usr/bin/node至關於寫死了node路徑;
!/usr/bin/env node會去環境設置尋找node目錄,推薦這種寫法
</font>

處理命令行

const program = require('commander');
  const inquirer = require('inquirer');
  const symbols = require('log-symbols');
  const download = require('download-git-repo');
  const handlebars = require('handlebars');
  const chalk = require('chalk');
  const ora = require('ora');
  const shell = require('shelljs');
  const child_process = require('child_process');
  const fs = require('fs');
  const path = require('path');
  program.version('1.0.0', '-v, --version')
  .command('init <name>')
  .action((name) => {
    console.log(name);
  });
  program.parse(process.argv);

調用program.version('1.0.0', '-v, --version')會將-v和--version添加到命令行中，調用時可經過帶上該參數獲取該腳手架的版本號（命令 -v/--version），調用comand('init <name>')定義初始化命令，name參數必傳，做爲項目的文件夾名，如vue init webpack parojectName
action是執行command命令時發生的回調，參數爲命令行中輸入的name，即init <name>中的name，項目生成過程便發生在回調函數中。
如今能夠經過調用node index.js init test，能夠看到控制檯中已經打印了輸入的項目名，也就是test。
其中：program.parse(process.argv)解析命令行中的參數，解析出name,並傳入action回調。

下載模板

經過download-git-repo或者直接使用shelljs或者child_process直接運行命令進行下載模塊（我的選擇的是第三種）。
download-git-repo 支持從 Github、Gitlab 和 Bitbucket 下載倉庫，各自的具體用法能夠參考官方文檔。

download('https://github.com/jefferyE/webpack-configuration-for-vue', name, {clone: true}, (err) => {
    if(err){
     // spinner.fail();
      console.log(symbols.error, chalk.red(err));
    }else{
     // spinner.fail();
    }
  })

或者

if (shell.exec('git clone https://github.com/jefferyE/webpack-configuration-for-vue').code == 0) {
   // spinner.succeed();
  } else {
   // spinner.fail();
    console.log(symbols.error, chalk.red('模板下載失敗'))
  }

或者

child_process.exec('git clone https://github.com/jefferyE/webpack-configuration-for-vue', function(err, stdout, stderr) {
    if (err) {
    //  spinner.fail();
      console.log(symbols.error, chalk.red('模板下載失敗'))
    } else {
    //  spinner.succeed();
    }
  })

其中：download() 第一個參數就是倉庫地址，可是有一點點不同。實際的倉庫地址是 https://github.com/jefferyE/w... ，能夠看到端口號後面的 ‘/‘ 在參數中要寫成 ‘:’，#master 表明的就是分支名，不一樣的模板能夠放在不一樣的分支中，更改分支即可以實現下載不一樣的模板文件了。第二個參數是路徑，上面咱們直接在當前路徑下建立一個 name 的文件夾存放模板，也可使用二級目錄好比 test/${name}

交互命令行

命令行交互功能能夠在用戶執行 init 命令後，向用戶提出問題，接收用戶的輸入並做出相應的處理。這裏使用 inquirer.js 來實現，也能夠本身使用node內置的readline模塊。
具體能夠參考個人這篇文章

inquirer.prompt([
      {
          type: 'input',
          name: 'author',
          message: '請輸入做者名稱'
      }
  ]).then((answers) => {
      console.log(answers.author);
  })

經過這裏例子能夠看出，問題就放在 prompt() 中，問題的類型爲 input 就是輸入類型，name 就是做爲答案對象中的 key，message 就是問題了，用戶輸入的答案就在 answers 中，使用起來就是這麼簡單。更多的參數設置能夠參考官方文檔。

渲染package模板

這裏用 handlebars 的語法對 HTML5/H5Template 倉庫的模板中的 package.json 文件作一些修改。並在下載模板完成以後將用戶輸入的答案渲染到 package.json 中。

{
    "name": "{{name}}",
    "version": "1.0.0",
    "description": "{{description}}",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "{{author}}",
    "license": "ISC"
  }

注意：因爲個人項目沒有更改package模板，所以經過在下載模板後，解析時進行動態修改的。
除此以外，經過ora、chalk模塊也進行了一些視覺美化。具體請參考完整代碼。
完整代碼以下：

#!/usr/bin/env node

  const program = require('commander');
  const chalk = require('chalk');
  const ora = require('ora');
  const fs = require('fs');
  const inquirer = require('inquirer');
  const shell = require('shelljs');
  const symbols = require('log-symbols');
  const download = require('download-git-repo');
  const child_process = require('child_process');
  const handlebars = require('handlebars');
  const path = require('path');

  program.version('1.0.0', '-v, --version').
  command('init <name>').
  action(name => {
    console.log(name);
    if (!fs.existsSync(name)) {
      console.log('正在建立項目...');
      inquirer.prompt([
        {
            name: 'description',
            message: '請輸入項目描述'
        },
        {
            name: 'author',
            message: '請輸入做者名稱'
        }
      ]).then(answers => {
        console.log(answers)
        const spinner = ora('正在向下載模板...\n');
        spinner.start();
        child_process.exec('git clone https://github.com/jefferyE/webpack-configuration-for-vue', function(err, stdout, stderr) {
          if (err) {
            spinner.fail();
            console.log(symbols.error, chalk.red('模板下載失敗'))
          } else {
            spinner.succeed();
            shell.mv(__dirname + '/webpack-configuration-for-vue', __dirname + '/' + name)
            const filename = `${name}/package.json`;
            const meta = {
              name,
              description: answers.description,
              author: answers.author
            }
            if (fs.existsSync(filename)) {
              const content = fs.readFileSync(filename).toString();
              let dt = JSON.parse(content);
              dt.name = '{{name}}';
              dt.description = '{{description}}'
              const result = handlebars.compile(JSON.stringify(dt, null, 2))(meta);
              fs.writeFileSync(filename, result);
              console.log(symbols.success, chalk.green('項目初始化完成'));
            } else {
              console.log(symbols.error, chalk.red('package不存在'))
            }
          }
        })
      })
    } else {
      console.log(symbols.error, chalk.red('項目已存在'));
    }
  })
  program.parse(process.argv);

其中：
一、在用戶輸入答案以後，開始下載模板，這時候使用 ora 來提示用戶正在下載中。
二、而後經過 chalk 來爲打印信息加上樣式，好比成功信息爲綠色，失敗信息爲紅色，這樣子會讓用戶更加容易分辨，同時也讓終端的顯示更加的好看。
三、除了給打印信息加上顏色以外，還可使用 log-symbols 在信息前面加上 √ 或 × 等的圖標。

完成以後，就能夠把腳手架發佈到 npm 上面，經過 -g 進行全局安裝，就能夠在本身本機上執行 okcli init [name] 來初始化項目，這樣便完成了一個簡單的腳手架工具了。

連接全局命令

在根目錄運行 npm link命令，將包連接到全局環境。
npm link命令能夠將一個任意位置的npm包連接到全局執行環境，從而在任意位置使用命令行均可以直接運行該npm包。
具體請參考這篇文章

感謝：
參考文章  文章1
                文章2

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程