JavaScript >> Javascript 文檔 >  >> Node.js

創建您的第一個 Node.js 命令行應用程序

命令行實用程序是每個經驗豐富的 Web 開發人員的必備工具。得益於豐富的開源模塊和出色的包管理器,Node.js 使開發此類工具變得非常容易。

在本教程中,我們將把上週發布的可愛文件瀏覽器從 PHP 轉換為 Node.js。我們的目標是創建一個命令行實用程序,用戶可以在他們的機器上啟動它並使本地網絡上的任何文件夾可用。這可用於家庭或辦公室環境中,以快速將包含文件的文件夾共享給同一網絡上的每個人。

快速入門

源代碼在 github 和 npm 上可用。如果不想學本教程,只想玩玩,可以直接用這個命令安裝:

npm install -g cute-files

然後,導航到您希望在終端中共享的文件夾,並執行您剛剛安裝的命令:

cute-files

現在該文件夾將在 <yourip>:3000 上可用 並且您局域網中的任何人都可以訪問。

讓我們一步一步構建它

命令行實用程序只是常規的節點程序。它們在全球範圍內可用,並且可以從任何文件夾中調用。因此,創建我們的命令行應用程序的步驟幾乎與您之前開發的任何其他基於節點的項目相同。為您的項目創建一個新文件夾並在終端中導航到該文件夾。我們將其稱為您的項目文件夾 .

設置 package.json

假設你已經安裝了node,我們首先要創建一個package.json 文件。 npm 實用程序可以幫助您。在您的項目文件夾中運行此命令:

npm init

系統將提示您輸入有關您的項目的信息。如果您不確定要鍵入什麼,只需按默認值返回即可。填寫cute-files.js 作為入口點。這將是主文件,將由節點調用。 package.json 還沒有完成 - 我們想讓我們的腳本在全球範圍內可用,所以我們需要添加一個額外的字段 - bin (以我的 package.json 為例)。這告訴 npm 將這些腳本作為可執行文件提供。

安裝一些包

現在您需要安裝文件瀏覽器所需的一些庫。 --保存 flag 會自動將它們添加到你的 package.json 中:

npm install commander content-disposition express --save

以下是我們將使用它們的目的:

  • commander 將解析命令行參數。我們只支持一個 - 端口 ,但由於屬性解析是編寫命令行應用程序的基本部分,因此最好了解如何使用該庫。
  • content-disposition 會告訴我們每個文件的正確附件標題。需要這些標頭才能強制下載文件(否則瀏覽器只會打開它們)。
  • express 將提供文件並處理 /scan 將所有文件和目錄的 JSON 發送到前端的路由。

文件掃描模塊

為了提供即時搜索和瀏覽,我們的應用程序將在加載時將包含所有文件和文件夾的 JSON 發送到前端。在最初的教程中,我們使用 PHP 進行了此操作,但現在我們將使用 Node.js 進行此操作。在項目文件夾中創建一個新文件 - scan.js - 並粘貼以下代碼:

var fs = require('fs'),
    path = require('path');

module.exports = function scan(dir, alias){

    return {
        name: alias,
        type: 'folder',
        path: alias,
        items: walk(dir, alias)
    };

};

function walk(dir, prefix){

    prefix = prefix || '';

    if(!fs.existsSync(dir)){
        return [];
    }

    return fs.readdirSync(dir).filter(function(f){

        return f && f[0] != '.'; // Ignore hidden files

    }).map(function(f){

        var p = path.join(dir, f),
            stat = fs.statSync(p);

        if(stat.isDirectory()){

            return {
                name: f,
                type: 'folder',
                path: path.join(prefix, p),
                items: walk(p, prefix)
            };

        }

        return {
            name: f,
            type: 'file',
            path: path.join(prefix, p),
            size: stat.size
        }

    });

};

此代碼使用節點的 fs 模塊,並遞歸遍歷目錄中的所有文件和文件夾。它導出掃描 使用路徑和別名調用的函數。路徑是要掃描的文件夾,別名是它將在界面中顯示的名稱(我們不想顯示所服務的真實目錄名稱)。在我們的示例中,我們將其替換為“文件”。

主模塊

我們應用的主文件是 cute-files.js .創建文件,粘貼以下代碼:

#!/usr/bin/env node

var path = require('path');
var express = require('express');
var contentDisposition = require('content-disposition');
var pkg = require( path.join(__dirname, 'package.json') );

var scan = require('./scan');

// Parse command line options

var program = require('commander');

program
    .version(pkg.version)
    .option('-p, --port <port>', 'Port on which to listen to (defaults to 3000)', parseInt)
    .parse(process.argv);

var port = program.port || 3000;

// Scan the directory in which the script was called. It will
// add the 'files/' prefix to all files and folders, so that
// download links point to our /files route

var tree = scan('.', 'files');

// Ceate a new express app

var app = express();

// Serve static files from the frontend folder

app.use('/', express.static(path.join(__dirname, 'frontend')));

// Serve files from the current directory under the /files route

app.use('/files', express.static(process.cwd(), {
    index: false,
    setHeaders: function(res, path){

        // Set header to force files to download

        res.setHeader('Content-Disposition', contentDisposition(path))

    }
}));

// This endpoint is requested by our frontend JS

app.get('/scan', function(req,res){
    res.send(tree);
});

// Everything is setup. Listen on the port.

app.listen(port);

console.log('Cute files is running on port ' + port);

第一行很重要。雖然它不是有效的 JS,但它在 *nix 系統上用於允許腳本作為程序執行,這正是我們製作 cute-files 所需要的 命令隨處可用。

此腳本使用 express 以及我們之前安裝的其他模塊,以及我們的 scan.js 模塊。剩下的就是從原始教程中復制前端。

前端

Nick 已經完成了上週教程中的大部分工作。我們的 scan.js 腳本返回與 scan.php 相同的輸出,因此無需對前端進行任何修改。我們只需要復制 index.html資產 上次的文件夾到一個新文件夾 - frontend ,將由快遞送達。你可以從 repo 中看到你的目錄應該是什麼樣子。

鏈接模塊

您的新模塊已準備就緒!當您運行 node cute-files.js 時它應該可以工作 在項目文件夾中。但這不是很有用,因為它只服務於項目文件夾 - 我們希望能夠調用 cute-files 來自任何目錄的命令,但除非您全局安裝該模塊,否則它不可用。 npm 有一個有用的命令可以幫助我們。從項目文件夾在終端中運行它:

npm link

這將使模塊在全球範圍內可用,所以現在您可以使用 cute-files 隨處指揮!

發佈到 npm

編寫模塊而不與朋友分享的樂趣在哪裡?在 npm 上發布你的新模塊很簡單(但我建議不要為這個特定模塊這樣做 - 它只會與可愛文件重複):

  1. 在 npm 的網站上創建一個帳戶
  2. 使用 npm login 從 npm 命令行實用程序登錄 命令
  3. 為您的模塊選擇一個唯一的名稱,然後更新 package.json
  4. cd 進入項目文件夾並運行 npm publish .

如果一切順利,幾秒鐘後你就會在 npm 的網站上看到你的模塊,每個人都可以安裝它。

幹得好!您剛剛使用 node 創建了您的第一個命令行應用程序!


Tutorial JavaScript 教程
  1. Svelte - 新的前端框架!

  2. 將 JavaScript 對象轉換為地圖的最簡單方法!

  3. 我們的組件開發負責人。

  4. React 中的 Monaco 與 CodeMirror

  5. 加入紅帽團隊參加 OpenJS World 2022

  6. 為什麼你應該在 Create React App 中使用代理服務器

  7. 從數組 JavaScript 中刪除前 n 個元素 |示例代碼

  1. 通過 6 個簡單步驟使用 Code.xyz 和 Node.js 構建、部署和發布 API

  2. npm Create Package JSon:創建你的第一個 npm 包

  3. 在深入了解 node.js 之前

  4. JavaScript對多個數組進行排序

  5. 通過凍結 npm 註冊表狀態進行一致的測試和構建

  6. 在 2 分鐘內創建自定義 ESLint 規則

  7. 語言統計

  1. React 項目 - 從創意到生產 - 第二部分 - 設置組件庫

  2. 使用 Node.js 在 Arduino LCD 上顯示 Web API

  3. 如何構建實時拍賣系統 - 使用 React 連接 Socket.io 🔥(第 2 部分)

  4. 你無法解決的最簡單的問題。