以前の演習では、TypeScriptを使用してブラウザ拡張機能を構築しました。これには、Viteプロジェクトの作成や、ブラウザ拡張機能の特定の要件を満たすためにカスタマイズするなど、一連の手順が含まれます。このプロセスは特に長くも複雑でもありませんでしたが、ノードCLI（コマンドラインインターフェイス）で自動化することでさらに簡素化できます。あなたがCLISを初めて使用するなら、私が作成したものをあなたに歩かせてください！

ノードプロジェクトを作成します

当然、最初のステップはノードプロジェクトを初期化してセットアップすることです。次のコマンドを使用して、コードのフォルダーを作成し、基本的なパッケージを生成します。JSONファイル：

mkdir create-browser-extension-vite && cd create-browser-extension-vite
npm init --yes

次に、生成されたpackage.jsonを変更して「タイプ」：「モジュール」を含めることにしました。これにより、プロジェクト内の.JSファイルを一般的なモジュールではなくESモジュールとして解釈するようにノードに通知します。いくつかの調整を行った後の更新されたpackage.jsonは次のとおりです。

{
  "name": "create-browser-extension-vite",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
      "cli",
    "create-project"
  ],
  "author": "",
  "license": "ISC",
  "description": "A CLI tool to create browser extensions with Vite",
  "type": "module"
}

最初のステップ

は、 create-project という名前の新しいフォルダー bin ：
で呼ばれるファイルを作成することから始めましょう。

#!/usr/bin/env node

console.log("hello world");

このファイルは、コマンドのエントリポイントとして機能し、パッケージがグローバルにインストールされたら、コンピューターにを直接実行できることを確認します。 ]

"bin"： "bin/create-project"

"bin": "bin/create-project"

今、私たちがこれまでに構築したものをテストする時が来ました。まず、実行してパッケージをローカルにインストールします。

npmリンク Create-Browser-Extension-Vite // CLIを実行します

npm link
create-browser-extension-vite // execute the CLI 

そして、それが基本的なCLIを作成するのに必要なすべてです！ここから、ノードエコシステムの全力を活用して、想像できるものをすべて構築できます。

ユーザー入力の処理

私たちの目標に向けて別の一歩を踏み出しましょう！このCLIの目的は、単一のコマンドを使用して完全に機能するTypeScriptブラウザー拡張機能を生成することです。これを達成するために、CLIはいくつかのオプションのパラメーターを受け入れます。

name
• ：提供されている場合、指定された名前のフォルダーが作成されます。それ以外の場合、現在のフォルダーにはプロジェクトが含まれます。
git
• ：指定されている場合、プロジェクトのgitリポジトリが初期化されます。
インストール
• ：指定した場合、プロジェクトの依存関係は自動的にインストールされます。
はい
• ：すべてのプロンプトをスキップして、デフォルト設定でプロジェクトを生成します。
最初のステップは、ユーザーの設定を収集するためのすべてのロジックを処理する新しいファイルSRC/CLI.JSを作成することです。この新しいモジュールは、現在の

create-project

ファイルから呼び出されます。 ＃！/usr/bin/envノード "../src/cli.js"から{cli}をインポートします。 cli（process.argv）;

ユーザーの設定を収集するプロセスを合理化するには、2つの便利なライブラリを使用します。

#!/usr/bin/env node

import { cli } from "../src/cli.js";

cli(process.argv);

npmインストール @Inquirer/Prompts arg

ARG：コマンドライン入力を処理するための強力な議論パーサー。

npm install @inquirer/prompts arg

@Inquirer/Prompts：エレガントでインタラクティブなコマンドラインインターフェイスを作成するためのライブラリ。

"arg"からargをインポートします。 "@Inquirer/Prompts"から{確認}をインポートします。 Async関数PromptFormissingOptions（options）{ if（options.skipprompts）{ 返品オプション。 } 戻る { ...オプション、 git： options.git || （待機中の確認（{メッセージ： "gitリポジトリを初期化しますか？"}）、 }; } function parseargumentsIntooptions（rawArgs）{ const args = arg（ { "-git"：boolean、 " - help"：boolean、 "-yes"：boolean、 " - Install"：boolean、 "-g"： "-git"、 "-y"： "-yes"、 "-i"： " - Install"、 }、 { argv：rawargs.slice（2）、 } ）; 戻る { skipprompts：args [" - yes"] ||間違い、 git：args [" - git"] ||間違い、 runInstall：args [" - install"] ||間違い、 ProjectName：args ._ [0]、 }; } async関数cli（args）をエクスポートする{ options = parseargumentsIntooptions（args）; options = await intectformissingoptions（options）; console.log（options）; }
基本的なヘルプメッセージを表示するための追加オプションを追加するために、お客様に任せます。これには、 - ヘルプまたは-hパラメーターによって制御される新しいユーザー設定を導入することが含まれます。このパラメーターが提供されている場合、CLIはコマンドの使用法を説明する簡単なマニュアルを表示する必要があります。以下にリンクされているリポジトリで私のソリューションを参照できます。

import arg from "arg";
import { confirm } from "@inquirer/prompts";

async function promptForMissingOptions(options) {
  if (options.skipPrompts) {
    return options;
  }

  return {
    ...options,
    git:
      options.git ||
      (await confirm({ message: "Initialize a git repository?" })),
  };
}

function parseArgumentsIntoOptions(rawArgs) {
  const args = arg(
    {
      "--git": Boolean,
      "--help": Boolean,
      "--yes": Boolean,
      "--install": Boolean,
      "-g": "--git",
      "-y": "--yes",
      "-i": "--install",
    },
    {
      argv: rawArgs.slice(2),
    }
  );

  return {
    skipPrompts: args["--yes"] || false,
    git: args["--git"] || false,
    runInstall: args["--install"] || false,
    projectName: args._[0],
  };
}

export async function cli(args) {
  let options = parseArgumentsIntoOptions(args);
  options = await promptForMissingOptions(options);
  console.log(options);
}

このステップでは、プロジェクトは前の段階で選択された設定に基づいて作成されます。まず、テンプレートという名前のフォルダーを作成し、生成されたプロジェクトを構成するファイルをコピーすることから始めます。

フォルダー構造は次のようになり、これらのファイルのコンテンツを私のgithubリポジトリに見つけることができます。それらがどのように作成されたかに興味がある場合は、以前の投稿をチェックしてください。ここでは、TypeScriptでブラウザ拡張機能の構築について説明します。

当社のコードは、テンプレートフォルダー内のファイルを利用してユーザーの新しいブラウザー拡張機能を生成し、次のパッケージはこれを達成するのに特に役立ちます。

npmインストールncp chalk execa pkg-install listr

NCP：ファイルの再帰コピーを促進します。

npm install ncp chalk execa pkg-install listr

execa：gitのような外部コマンドの実行を簡素化します。
PKG-INSTALL：ユーザーの好みに基づいてYARNインストールまたはNPMインストールのいずれかを自動的にトリガーします。
Listr：ユーザーにクリーンな進捗概要を提供しながら、タスクのリストを定義できます。
• テンプレートフォルダーからファイルをコピーしてプロジェクトを生成するコードを含むように、新しいファイルSrc/main.jsを作成することから始めます。
。
Import {createProject} from "./main.js"; ... async関数cli（args）をエクスポートする{ options = parseargumentsIntooptions（args）; options = await intectformissingoptions（options）; createproject（options）; }

"chalk"からチョークをインポートします。 「NCP」からNCPをインポートします。 「パス」からパスをインポートします。 「util」から{promisify}をインポートします。 「execa」から{execa}をインポートします。 「Listr」からListrをインポートします。 「pkg-install」から{projectinstall}をインポートします。 const copy = promisify（ncp）; async関数copytemplatefiles（options）{ return copy（options.templatedirectory、options.targetdirectory、{ Clobber：false、 }）; } async関数initgit（options）{ const result = await execa（ "git"、["init"]、{ CWD：options.targetDirectory、 }）; if（result.failed）{ promise.reject（new Error（ "Gitの初期化に失敗した"））; } 戻る; } async関数createproject（options）をエクスポートする{ options = { ...オプション、 TargetDirectory：options.ProjectName || process.cwd（）、 }; const currentFileurl = import.meta.url; const templatedir = path.resolve（ new URL（currentFileUrl）.puthname、 "../../テンプレート" ）; options.templatedirectory = templatedir; const tasks = new Listr（[[ { タイトル：「プロジェクトファイルのコピー」、 タスク：（）=> copyTemplateFiles（オプション）、 }、 { タイトル：「Gitを初期化」、 タスク：（）=> initgit（options）、 有効：（）=> options.git、 }、 { タイトル：「依存関係をインストール」、 タスク：（）=> ProjectInstall（{ CWD：options.targetDirectory、 }）、 スキップ：（）=> ！options.runinstall ？ 「パス - 依存関係を自動的にインストールするためのインストール」 ： 未定義、 }、 ]）; tasks.run（）を待ちます。 console.log（ "％s Project Ready"、chalk.green.bold（ "done"））; trueを返します。 }

上記のコードはListrを利用して、NCPを使用したファイルのコピーからGITリポジトリのセットアップまで、新しいプロジェクトを生成するために必要な一連のアクションを実行します。また、Promisifyを使用して、NCPのコールバックベースのコピーメソッドを約束ベースの関数に変換し、コードをより読みやすく保守可能にする方法に注意してください。

#!/usr/bin/env node

import { cli } from "../src/cli.js";

cli(process.argv);

それだけです！これらは、新しいCLIツールを作成するための手順であり、新しいブラウザー拡張機能の作成を合理化するために使用するステップです。あなたもそれを使用することができます！誰でも自分の拡張機能を生成するためにNPMに公開したからです。

#!/usr/bin/env node

import { cli } from "../src/cli.js";

cli(process.argv);

https://github.com/ivaneffable/create-browser-extension-vite

参照

node.jsでCLIを構築する方法