対話型のCLIを作成したよ

こんにちは、なかにしです。

今回は対話型のCLIを作成したので、やり方などを記します。
CLIはnpmパッケージにして、こちらに公開してます。

作ったもの
使用技術
製造
npmパッケージとしてアップロード
さいごに

作ったもの

「これは必要ですか？」みたいなのを対話で聞き取り、
回答に応じてパッケージをインストールしたり、
ファイルを作成したりするnpmパッケージを作成しました。

もっと拡張したものを業務使用しようと思っているので、
その足ががりとして簡易版を作成した運びです🙌

使用技術

・Node: 18.16.1
・Inquirer: 9.2.8

inquirerは、対話型のCLIを作成できるライブラリです。
めっちゃ便利です。

製造

①作成したい場所で以下コマンド

npm init -y

パッケージ名とかはデフォルトでOKです。

②package.jsonを編集します。

“bin”の部分で、このアプリの実行時の名前を決めます。
「npm install ◯◯」の、◯◯の部分にあたる名前です。

下記の例だと、「npm install taiwa-app」、もしくは「npx taiwa-app」で実行されます。

{
  "name": "taiwa-app",
  "version": "1.0.0",
  "description": "対話型のひな形作成アプリ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "taiwa-app": "./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

③index.jsを作成します。

今回は以下のようなフローにしました。※動作確認がメインの為、フローは適当です。
・promptで、”Do you want to install the package of npm?”と聞く。
・上記の質問がYesだったら「npm install hello-world-npm」を実行し、事前に作っておいた「index.html」を対象PCにコピーする。
・上記の質問がNoだったら何もしない。

#!/usr/bin/env node

import { exec } from "child_process";
import fs from "fs";
import inquirer from "inquirer";
import path from "path";
import { fileURLToPath } from "url";

inquirer
  .prompt([
    {
      type: "confirm",
      name: "installType",
      message: "Do you want to install the package of npm?",
      default: false,
    },
  ])
  .then((answer) => {
    if (answer.installType) {
      // 追加でひな形作成（index.html的なものを追加してみる）
      exec("npm install hello-world-npm", (error, stdout, stderr) => {
        if (error) {
          console.log("エラーです。");
          return;
        }
        if (stderr) {
          console.log("stdエラーです。");
          return;
        }
        console.log(`stdout:${stdout}`);

        // 現在のファイルを取得
        const __filename = fileURLToPath(import.meta.url);
        // 現在のファイルのディレクトリを取得
        const __dirname = path.dirname(__filename);
        // index.htmlまでのフルパスを取得（現在のディレクトリ配下のindex.htmlの想定）
        const srcPath = path.join(__dirname, "index.html");
        // 対象のフルパスを取得（process.cwd()で対象PCの実行場所を取得し、その配下のindex.htmlを指定）
        const destPath = path.join(process.cwd(), "index.html");

        // copyFileで、現在のindex.htmを、対象の場所にコピー。（index.htmlがない場合は作成される）
        fs.copyFile(srcPath, destPath, (err) => {
          if (err) throw err;
          console.log("index.html is created!");
        });
      });
    }
  });

④コピー元のindex.htmlを作成する

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <h1>サンプルファイルです。</h1>
  </body>

</html>