大廠技術(shù) 高級(jí)前端 Node進(jìn)階

點(diǎn)擊上方程序員成長指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

基于 Node 環(huán)境的終端 cli 翻譯工具

導(dǎo)語

大家好~我是榮頂,不知道大家平時(shí)開發(fā)時(shí),是否需要經(jīng)常查單詞,和一些報(bào)錯(cuò)長短句,由于我的英文實(shí)在是不怎么好,所以日常使用有道等查詞工具的頻率是非常高的.但是經(jīng)常在編輯器以及翻譯軟件或是其他中來回切換難免有些影響效率,所以我決定寫一個(gè)能在終端輕松方便使用的翻譯小工具. 下面就給小伙伴們分享一下我的 cli 工具制作歷程~

項(xiàng)目需求

首先明確我們這個(gè)工具是為了不在各個(gè)軟件中來回切換(實(shí)現(xiàn)在終端中通過命令使用)
可以中譯英,英譯中,不僅會(huì)翻譯單詞還要能翻譯長短句(這里我們會(huì)用到有道的 api)
可以對(duì)單詞和長短句進(jìn)行發(fā)音(遇到不會(huì)讀的單詞,肯定還是要學(xué)一下的~)
而且它需要足夠小(我的 Unpacked Size 只有 5.17kb)

前置條件

node 安裝完畢

明確邏輯需求

在 node.js 中使用有道翻譯的 API 進(jìn)行文字翻譯。不管是中譯英還是英譯中
然后將 api 的返回 Json 通過格式化后輸出到終端即完成翻譯

通過添加參數(shù)可實(shí)現(xiàn)翻譯,閱讀,幫助等其他功能的自由選擇

命令 + 文本  #對(duì)文本進(jìn)行翻譯
命令 + 文本 + -S/--say #會(huì)對(duì)文本進(jìn)行閱讀,不加參數(shù)則只翻譯
命令 + -H/--help #終端輸出幫助文檔

#其他功能可以自己根據(jù)具體需求來完成

實(shí)現(xiàn)步驟

創(chuàng)建一個(gè)項(xiàng)目目錄后,在當(dāng)前目錄打開終端
```
#輸入以下命令
npm init -y
```
我編輯器使用的是 vsCode ,在編輯器中打開項(xiàng)目目錄
新建一個(gè) bin 文件夾，在 bin 文件夾內(nèi)新建一個(gè) js 文件用于命令行工具的測試；
在 packjson.js 中配置如下信息：命令是可以自定義的(ts,也可以是aaa,bbb)
然后使用：
```
npm link
```
link 完后,我們可以通過npm ls -g查看是否成功(有當(dāng)前文件夾被映射到全局包中說明 link 成功)

我們?cè)诮K端中使用ts命令,可以看到開始創(chuàng)建的 js 文件中的 console.log 執(zhí)行了,至此,我們的工具基本完成就已經(jīng)完成一半!接下來就是寫邏輯的過程了
項(xiàng)目中文字高亮,單詞等閱讀,命令行參數(shù)的獲取主要依賴 colors,say 以及 yargs
```
#所以我們先安裝這三個(gè)依賴
yarn add say colors yargs -S
```

安裝完成后在 bin 文件夾下的 js 文件中引入

const colors = require("colors");
const say = require("say");
const argv = require("yargs").argv,
queryStr = encodeURI(argv.\_.join(" "));

首先對(duì)命令進(jìn)行邏輯處理

if (!queryStr) {
    //命令后沒有參數(shù)
    console.log("這里是幫助文本");
    console.log("請(qǐng)輸入單詞或短句[-S,--say]");
} else {
    //有參數(shù)--say或-S,播放
    if (argv.say == true || argv.S == true) {
        console.log("播放中...".rainbow);
        say.speak(queryStr);
        return;
    }
    //發(fā)送文本到有道api進(jìn)行查詞
    translate(queryStr);
}

定義查詞函數(shù)

function translate(query) {
    //發(fā)送翻譯請(qǐng)求
    let http = require("http");
    // 1.用于請(qǐng)求的選項(xiàng)
    let options = {
        host: "fanyi.youdao.com",
        port: "80",
        path:
            "/openapi.do?keyfrom=translation-tool&key=1730699468&type=data&doctype=json&version=1.1&q=" +
            query,
    };
    // let options = ` http://aidemo.youdao.com/trans?q=${query}&&from=Auto&&to=Auto`;
    // 處理響應(yīng)的回調(diào)函數(shù)
    let callback = function(response) {
        // 不斷更新數(shù)據(jù)
        response.on("data", function(data) {
            //對(duì)返回的數(shù)據(jù)進(jìn)行格式化和高亮
            format(data);
        });
        response.on("end", function() {
            // 數(shù)據(jù)接收完成
            console.log("---------------");
        });
    };
    // 向服務(wù)端發(fā)送請(qǐng)求
    let req = http.request(options, callback);
    req.end();
}

定義格式化函數(shù)

function format(json) {
    let data = JSON.parse(json),
        pronTitle = "發(fā)音：",
        pron = data.basic ? data.basic.phonetic : "無",
        mainTitle = "翻譯：",
        mainTrans = "",
        webTitle = "網(wǎng)絡(luò)釋義：",
        machineTrans = "",
        webTrans = "",
        template = "";
    let basic = data.basic,
        web = data.web,
        translation = data.translation;
    if (basic ? basic : "") {
        for (let i = 0; i < basic.explains.length; i++) {
            mainTrans += "\n" + basic.explains[i];
        }
    }
    if (web ? web : "") {
        for (let i = 0; i < web.length; i++) {
            webTrans +=
                "\n" +
                (i + 1) +
                ": " +
                web[i].key.red.bold +
                "\n" +
                web[i].value.join(",");
        }
    }
    translation ? (machineTrans = translation) : false;
    template =
        pronTitle.red.bold +
        pron +
        "\n" +
        mainTitle.green.bold +
        mainTrans +
        "\n" +
        webTitle.blue.bold +
        webTrans +
        "\n" +
        "機(jī)器翻譯：".green.bold +
        machineTrans;
    console.log(template);
}

完整的代碼

    #! /usr/bin/env node

    const colors = require("colors");
    const say = require("say");
    const argv = require("yargs").argv,
        queryStr = encodeURI(argv._.join(" "));
    //=======================================================
    if (!queryStr) {
        //命令后沒有參數(shù)
        console.log("這里是幫助文本");
        console.log("請(qǐng)輸入單詞或短句[-S,--say]");
    } else {
        //有參數(shù)--say或-S,播放
        if (argv.say == true || argv.S == true) {
            console.log("播放中...".rainbow);
            say.speak(queryStr);
            return;
        }
        //發(fā)送文本到有道api進(jìn)行查詞
        translate(queryStr);
    }
    //格式化
    function format(json) {
        let data = JSON.parse(json),
            pronTitle = "發(fā)音：",
            pron = data.basic ? data.basic.phonetic : "無",
            mainTitle = "翻譯：",
            mainTrans = "",
            webTitle = "網(wǎng)絡(luò)釋義：",
            machineTrans = "",
            webTrans = "",
            template = "";
        let basic = data.basic,
            web = data.web,
            translation = data.translation;
        if (basic ? basic : "") {
            for (let i = 0; i < basic.explains.length; i++) {
                mainTrans += "\n" + basic.explains[i];
            }
        }
        if (web ? web : "") {
            for (let i = 0; i < web.length; i++) {
                webTrans +=
                    "\n" +
                    (i + 1) +
                    ": " +
                    web[i].key.red.bold +
                    "\n" +
                    web[i].value.join(",");
            }
        }
        translation ? (machineTrans = translation) : false;
        template =
            pronTitle.red.bold +
            pron +
            "\n" +
            mainTitle.green.bold +
            mainTrans +
            "\n" +
            webTitle.blue.bold +
            webTrans +
            "\n" +
            "機(jī)器翻譯：".green.bold +
            machineTrans;
        console.log(template);
    }
    //發(fā)送請(qǐng)求
    function translate(query) {
        //發(fā)送翻譯請(qǐng)求
        let http = require("http");
        // 1.用于請(qǐng)求的選項(xiàng)
        let options = {
            host: "fanyi.youdao.com",
            port: "80",
            path:
                "/openapi.do?keyfrom=translation-tool&key=1730699468&type=data&doctype=json&version=1.1&q=" +
                query,
        };
        // let options = ` http://aidemo.youdao.com/trans?q=${query}&&from=Auto&&to=Auto`;
        // 處理響應(yīng)的回調(diào)函數(shù)
        let callback = function(response) {
            // 不斷更新數(shù)據(jù)
            response.on("data", function(data) {
                //對(duì)返回的數(shù)據(jù)進(jìn)行格式化和高亮
                format(data);
            });
            response.on("end", function() {
                // 數(shù)據(jù)接收完成
                console.log("---------------");
            });
        };
        // 向服務(wù)端發(fā)送請(qǐng)求
        let req = http.request(options, callback);
        req.end();
    }

至此翻譯工具的基本功能已經(jīng)完成

發(fā)布 cli 工具至 npm

首先要在 npm.js 官網(wǎng)要有自己的賬號(hào)。(還沒有的小伙伴先自行注冊(cè)一個(gè)~)
在當(dāng)前目錄下終端執(zhí)行 npm adduser （注意:使用淘寶源會(huì)報(bào)錯(cuò)，要改回來），輸入 npmjs 的賬號(hào)密碼郵箱。
最后執(zhí)行 npm publish ，將代碼發(fā)布在 npm 上，即發(fā)布成功~
在 npm 上查看自己剛發(fā)布的代碼
到這里,工具已經(jīng)發(fā)布成功,我們回到自己的項(xiàng)目目錄,在終端進(jìn)行npm unlink ts對(duì)前面的關(guān)聯(lián)進(jìn)行解綁,然后輸入ts,這時(shí)我們發(fā)現(xiàn)命令已經(jīng)報(bào)錯(cuò)了,說明解綁成功,我們執(zhí)行 npm i [你的包名] -g 待安裝完成后再次輸入命令ts 我們發(fā)現(xiàn)已經(jīng)可以翻譯了和閱讀了
同樣的在 linux 或者 mac 中,只要裝了 node 環(huán)境,即可通過 npm 全局安裝自己的翻譯小工具,不管是在 cmd 還是 powerShell 中都能很好的使用(下圖為 linux 中的使用截圖)
我的項(xiàng)目代碼已經(jīng)上傳至github,喜歡的小伙伴可以點(diǎn)個(gè) star,謝謝!(完結(jié)~撒花)

Node 社群

我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加考拉好友回復(fù)「Node」即可。

“分享、點(diǎn)贊、在看” 支持一波??