ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

mycliコマンドラインツールのノード実践開発

著者：Eve Cole 更新時間：2022-06-09 17:33:27
この記事では、実際にノードを使用する方法を段階的に説明し、ノードに基づいて mycli コマンド ライン ツール/スキャフォールディングを作成する方法について説明します。

初期化するには、

まずコンピューター上に node.js 環境があることを確認し

、コマンド ラインで次のコードを実行してpackage.jsonファイルを初期化する必要があります

npm init -y

このとき、必ずエラーが報告されます。コマンドラインでmycli実行します。

1.png

カスタム コマンド

package.jsonを構成してbinフィールドを追加し、 mycliコマンドを

  • 実行可能ファイル
「bin」
に関連付けます。
    "mycli": "./test.js"
  • 新しい/test.jsファイル console.log を作成します
(
「mycli コマンドが正常に実行されました」)。
  • installコマンドが必要ですが、プロジェクトは npm に公開されていないため、当面はnpm linkコマンドを使用して、 mycliコマンドをグローバル世界に関連付けます。

この時点で、コマンド ラインからmycli実行すると、エラーは報告されなくなります。

2.png

スクリプト構成

test.js ファイル:

console.log("mycli コマンド実行成功");

その後、 mycliを実行すると、エラー ポップアップ ウィンドウが表示されます。

3.png

これは、 mycliコマンドを実行する場合、コンピュータにファイルを実行させるのと同じであり、コンピュータ システムはjs ファイルを直接実行できないため、スクリプト コードの最初の行にnode.jsコンピュータ上で実行するプログラムです。

#!/usr/bin/env ノード

実行環境が変更されたため、以前にリンクされたファイルの場所はC:Program Filesnodejsnode_modulesである可能性がありますので、 mycli見つけて削除し、実行する必要があります。もう一度npm link 。

ここで、コンソールでmycli再度実行すると、コンソールが正しく印刷されることがわかります。

関連ツールキットは、

  • Chalkコマンド ラインを使用して、カラフルなフォントを出力します。
  • Oraローディング効果。プログレス ライブラリ
  • commanderデザイン コマンド
  • inquirerインタラクティブ機能 (質問するなど)
    • に似ています。

Chalk

  • のインストール
npm install [email protected] -S
  • テストの使用.js
const チョーク = require("チョーク");

// チョーク
// const hello = chalk.red("hello");
// const hello = chalk.blue.bgRed("hello");
// const hello = chalk.blue.bgYellow("hello");
const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello");
console.log(こんにちは);

4.png

Ora

  • のインストール
npm install [email protected] -S
  • use test.js
const ora = require("ora");

// オラ
const スピナー = ora({
  テキスト: 「インストール中...」
});
スピナー.スタート();
setTimeout(() => {
  // スピナー.stop();
  Spinner.succeed("インストール成功");
  // console.log("インストール成功");
}, 2000)
  • 一般的に使用される API
    • start読み込みを開始
    • stop読み込みを停止します
    • succeed成功したスタイルで読み込みを終了します

5.gif

vue -V git --version vue createやその他のコマンドなど、

コマンダー

開発で一般的に使用されるコマンドは、そのようなコマンドを実装するためにコマンダー ライブラリを使用する必要があります。

使用したコマンドの後にある-V --helpなどはコマンドのパラメータとして理解できるので、これらのパラメータを取得し、パラメータの違いを判断してさまざまなイベントを処理する必要があります。

ノード環境では、このパラメーターはprocess.argvを通じて取得できます。コマンダーライブラリは、ユーザーの入力によって伝えられる命令を判断することなく、いくつかのメソッドをカプセル化するのに役立ちます。

const command = require("commander");
  • を使用して
npm install [email protected] -S
  • をインストールします
。
// ...
Commander.parse(process.argv); //

インストールが完了すると、コマンダーは--helpなどのコマンドを自動的に提供します。以下でテストしてみましょう。

mycli --help は、
コマンダーの
  • バージョン番号を設定する方法を提供します。
. version("1.0.0");

mycli -Vを実行すると、コンソールに1.0.0のバージョン番号が表示されることがわかります。

カスタム コマンド メソッド

commander.option(指令名, 描述, 回调函数)

  • 上記で記述した関数の一部を--initコマンドに設定します。command.option
("--init", "this is init", () => {
  // チョーク
  // const hello = chalk.red("hello");
  // const hello = chalk.blue.bgRed("hello");
  // const hello = chalk.blue.bgYellow("hello");
  const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello");
  console.log(こんにちは);

  // オラ
  const スピナー = ora({
    テキスト: 「インストール中...」
  });
  スピナー.スタート();
  setTimeout(() => {
    // スピナー.stop();
    Spinner.succeed("インストール成功");
    // console.log("インストール成功");
  }、1000)
})

次に、 mycli --initテストを実行します。

6.gif

  • コマンドでパラメータを渡す方法は
、commandor.option("--number <num>", "log a number", (num) => {
  コンソール.ログ(番号);
})

<参数名>渡す必要があるパラメータを示し、 [参数名]は渡す必要のないパラメータを示します。コンソールにmycli --number 100と入力して Enter を押すと、 100出力されることがわかります。

カスタム コマンド メソッド

Commander.command("create <projectName>").action((projectName)=>{
  console.log(プロジェクト名);
})

mycli create xxを実行して Enter を押すと、コンソールにxxが確認できます。

mycli --help を実行して

ヘルプを表示します

mycli --help構成した手順とコマンドがヘルプ リストに表示されることがわかります。

7.png

recruiter

  • のインストール
npm install recruiter -S
  • 質問するためのpromptメソッド
.prompt([
    {
      type: "input",
      name: "username",
      メッセージ: 「ユーザー名を入力してください:」
    }
  ]).then((answer)=>{

  })

type質問のタイプを示し、値はinput 、 number 、 password 、 editorなどです。

answerは{username: 输入的值}です。

  • type は入力タイプのinputです。
const recruiter = require("inquirer");

コマンダー.command("ユーザーの追加").action(() => {
  問い合わせ者.プロンプト([
    {
      タイプ: "入力"、
      名前: "ユーザー名",
      メッセージ: 「ユーザー名を入力してください:」
    }
  ]).then((答え) => {
    console.log(回答);
  })
})
  • タイプはconfirm
("testcon").action(() => {
  問い合わせ者.プロンプト([
    {
      タイプ:「確認」、
      名前：「年齢」、
      メッセージ：「あなたは18歳以上ですか？」
    }
  ]).then((答え) => {
    console.log(回答);
  })
})

yまたはn入力して判定します。

8.png

  • type は無線選択タイプのlist
command.command("testlist").action(() => {
  問い合わせ者.プロンプト([
    {
      タイプ:「リスト」、
      名前: "lib"、
      メッセージ: "使用するフレームワークを選択してください:",
      選択肢: [
        "vue2"、
        「vue3」、
        「反応する」、
        「しなやか」、
      】
    }
  ]).then((答え) => {
    console.log(回答);
  })
})

mycli testlistコマンドを実行します。

9.png

テンプレートのダウンロード

  • download-git-repo はコードをプルするためのツールです。

const downgit = require("download-git-repo");
  • を使用して
npm install [email protected] -S

  • をインストールします

。

downgit("github:kongcodes/vue3-vant", downUrl, { clone: false }, function (err) {
    コンソールログ(エラー)
})

downgitメソッドの最初のパラメーターは、kongcodes ユーザーのvue3-vantプロジェクト テンプレートを github からダウンロードすることであると理解されています。 2 番目のパラメーターdownUrlは、テンプレートをダウンロードするディレクトリです。 3 番目のパラメーターcloneは、ダウンロードにgit clone使用するかどうかです。 4 番目のパラメータは、ダウンロードが完了したときに実行されるいくつかのパラメータです。

command メソッドと組み合わせて
、command.command("create <projectName>").action((projectName) => {
  • command
。
  const spinner = ora({
    テキスト: 「https://github.com/kongcodes/vue3-vant... をダウンロードしています...」
  });
  spinner.start();
  fs.mkdirSync(`./${プロジェクト名}`);
  const downUrl = `${process.cwd()}\${プロジェクト名}`;
  downgit("github:kongcodes/vue3-vant", downUrl, { clone: false }, function (err) {
    if (err) throw err;
    spinner.stop();
    console.log(chalk.green("downgit success"));
  })
})

mycli create proを実行し、Enter キーを押します。pro proが現在のディレクトリに作成され、 vue3-vantテンプレートがこのディレクトリにダウンロードされます。

コードアドレス

https://github.com/kongcodes/mycli
関連記事