如何實現一個簡單的Node.js腳手架

hizengzeng 發布于2019-08-21 17:53 / 531人閱讀

摘要：目標開發一個簡單的腳手架，能夠提供給用戶進行安裝。在腳手架中使用腳本。具體用法如下具體展示效果如下對用戶文件進行讀寫操作通過上面的步驟，我們已經能夠完成一個簡單的腳手架了。

原因

在工作中，需要開發一個腳手架，用于給相關用戶提供相關的開發便利性。

適合人群

對前端、Node操作有一定的了解，同時向了解腳手架開發過程或者需要自己實現一個腳手架的開發者。

目標

開發一個簡單的腳手架，能夠提供給用戶進行安裝。

能夠輸出相關提示。

對用戶文件進行讀寫操作。

在腳手架中使用Shell腳本。

更多與用戶交互和文件操作等進階內容可以查看同系列第二篇：如何實現一個腳手架進階版（Vue-cli v2.9學習篇）

步驟 開發腳手架

腳手架的開發最開始過程與普通的前端項目相同，需要一個入口文件command.js和配置文件package.json。

與其他配置文件不同的是，你需要在command.js文件第一行增加如下聲明：

#! /usr/bin/env node

同時需要在package.json文件中加上一下一項：

{
  ...,
  "bin": {
       "cm-cli": "command.js"
   }
}

在配置文件中增加了此項后，只需要在配置文件根目錄下執行npm link命令，即可使用cm-cli --help命令來查看加載的cm-cli腳手架。

如果你發布了你的腳手架，那么在其他用戶使用命令npm install -g cm-cli之后，便可以在全局下使用你的腳手架了。

對用戶進行提示

在對注釋和命令進行提示中，我們需要使用到commander包，使用npm install commander即可進行安裝。（如果NPM版本低于5，則需要添加--save參數保證更新package.json配置文件）。

commander是一個提供用戶命令行輸入和參數解析的強大功能。有需要的可以閱讀相關的庫文檔。在這里我介紹兩個用的最多的方法。

option

能夠初始化自定義的參數對象，設置關鍵字和描述，同時還可以設置讀取用戶輸入的參數。具體用法如下：

const commander = require("commander");

commander.version("1.0.0")
    .option("-a, --aaa", "aaaaa")
    .option("-b, --bbb", "bbbbb")
    .option("-c, --ccc [name]", "ccccc")
    .parse(process.argv);


if (commander.aaa) {
    console.log("aaa");
}

if (commander.bbb) {
    console.log("bbb");
}

if (commander.ccc) {
    console.log("ccc", commander.ccc);
}

具體展示如下：

command

該方法能夠在命令行增加一個命令。用戶在執行此命令后，能夠執行回調中的邏輯。具體用法如下：

commander
    .command("init ")
    .description("init extension project")
    .action((extensionId) => {
        console.log(`init Extension Project "${extensionId}"`);
        // todo something you need
    });

具體展示效果如下：

對用戶文件進行讀寫操作

通過上面的步驟，我們已經能夠完成一個簡單的腳手架了。下面，我們需要讀取用戶配置，同時為用戶生成一些模板文件。

讀取文件

現在，我們需要讀取用戶的cm-cli.json配置文件來進行一些配置。

我們可以使用Node.js的fs文件模塊來對文件進度讀操作，由于此處沒有太多難點，因此略去。

寫入文件模板

我們提前將模板文件存儲在CDN上，再根據本地讀取到的相關腳手架配置文件來進行模板的下載。

注：腳手架中讀取的路徑為使用者使用時當前路徑，因此沒有辦法將模板文件存儲在腳手架中進行讀取。

我們可以使用諸如request這種庫來幫助我們進行文件下載，簡化操作步驟。執行npm install request`即可進行安裝。

注：在文件寫入時建議先判斷文件是否存在，再進行覆蓋。

使用Shell腳本

與Node.js提供的API函數來看，有些人更加傾向于使用Shell腳本來進行文件操作。幸運的是，我們也可以在我們的腳手架中引入node-cmd來啟用對Shell腳本的支持。執行npm install node-cmd即可進行安裝。

具體示例如下：

commander
    .command("init ")
    .description("init extension project")
    .action((extensionId) => {
        id = extensionId;
        console.log(`init Extension Project "${extensionId}"`);

        cmd.get(
            `
            mkdir -p static/${extensionId}

            mkdir tmp
            mkdir tmp/source-file
            mkdir tmp/build-file
            curl -o tmp/source-file/index.js https://xxxxxxxx.com?filename=index.js
            touch tmp/source-file/index.css

            curl -o tmp/build-file/server.js https://xxxxxxxx.com?filename=server.js
            curl -o tmp/build-file/router.js https://xxxxxxxx.com?filename=router.js
            curl -o tmp/build-file/package.json https://xxxxxxxx.com?filename=package.json
            
            cp  tmp/source-file/* static/${extensionId}
            cp tmp/build-file/* ./
            rm -fr tmp
            npm install
            `,
            (err, data) => {
                console.log(data)
                if (!err) {
                    console.log("init success");
                    return;
                }

                console.error("init error");
            });
    });

我們可以快速的使用Shell腳本來進行文件夾的創建和文件模板的下載。

總結

腳手架想要在終端能夠快速執行，可以在package.json配置文件中增加相關字段。

腳手架需要能夠讀取相關終端輸入，可以使用commander庫來快速開發。

腳手架需要能夠執行Shell腳本，可以使用node-cmd庫來快速實現需求。

云服務器 GPU云服務器 js實現的簡單特效 node.js服務器如何部署到云上用c實現簡單的shell java實現簡單的web服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90165.html

如何實現一個腳手架進階版（Vue-cli v2.9學習篇）

摘要：如果沒有看過之前一篇博客的，或者對的腳手架沒有了解過的同學，推薦先看上一篇如何實現一個簡單的腳手架。它是一個用來構建靜態網站的類庫，也能夠用來對文件進行處理。有任何問題歡迎進行交流。前言在之前一篇博客介紹了關于Node腳手架的一些基礎的知識，這篇博客是在之前的基礎上針對在Node中開發腳手架中遇到的問題，如：終端樣式、交互問題文件處理問題通過對Vue-cli 2.9.2的...

thekingisalwaysluc 2019-08-26 11:34 評論0 收藏0
前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓

摘要：前端每周清單第期支付寶前端構建工具發展用加快網頁響應速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領域內容，分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓了么PWA 升級實踐為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆...

liuchengxu 2019-08-20 16:23 評論0 收藏0
后端知識點總結——NODE.JS（高級）

摘要：階段是事件循環的第一階段習慣上往往都會設置數將回調函數添加到事件循環的階段的隊列中等待執行。后端知識點總結——NODE.JS（高級） 1.Node入門: 什么是: 針對網絡應用開發的平臺主要特征: 基于Google的JavaScript運行時引擎V8 擴展了Node標準類庫: TCP，同步或異步文件管理，HTTP 為什么使用Node: 可以在服務器端運行js: 現有前端團隊可直...

bovenson 2019-08-22 16:38 評論0 收藏0
7月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 評論0 收藏0
開發一個 Parcel-vue 腳手架工具

摘要：在實際工作中，我們可以定制一個屬于自己的腳手架，來提高自己的工作效率。思路要開發腳手架，首先要理清思路，腳手架是如何工作的我們可以借鑒的基本思路。本地測試以上是我寫的一個的腳手架源碼，點擊即可查看，歡迎前言像我們熟悉的 vue-cli，create-react-app 等腳手架，只需要輸入簡單的命令 vue init webpack project，即可快速幫我們生成一個初始項目。...

xiaochao 2019-08-26 12:21 評論0 收藏0