UnJSを使って軽率に CLIを作ってみたら めちゃくちゃ便利だった にー兄さん@ninisan_drumath v-tokyo #21

にー兄さん ソフトウェアエンジニア@HoloLab inc. Babylon.js勉強会運営 Iwaken Lab. 好きなもの Babylon.js / WebXR Device API / C# ねこ / コーヒー / ウィスキー / ギター アカウント @ninisan_drumath @drumath2237

本日の話 個人開発しているCLIでUnJSを使ってみた どんなパッケージを使ったのか、用途別にご紹介 UnJSのパッケージが気になっている方に刺さると嬉しいです

アジェンダ 1. はじめに 2. 使用したUnJSパッケージ 3. おわりに

はじめに

create-babylon-app とは Babylon.jsのプロジェクトを簡単に作成 するためのCLI コマンドラインから質問に答えるとプロ ジェクトができ、そのまま開発できる手 軽さが売り お手元のターミナルでぜひ試してみてくだ さい！ GitHub: https://github.com/drumath2237/create- babylon-app npm create babylon-app

create-babylon-appの要件 1. 作成するプロジェクト名を指定 2. テンプレートを選択 3. 設定を反映したプロジェクトを作成 create-viteやNuxt CLIの動作に近いので参考にしている。

UnJSとは UnJSは、Nuxt 開発チームが中心となっ て開発・メンテナンスされている、あら ゆるJavaScriptフレームワーク上で統一 的に動作するユーティリティーツール・ ライブラリ群です。 つまりUnJSはパッケージそのものではな く、パッケージ群のこと。 2024/07/26時点で63個ものパッケージが 提供されていてすごい 1. 『UnJS にどんなツールがあるのか、上位30件すべて紹 介してみた（前編）』より ↩︎ [1]

UnJSを使ってみたい 便利なパッケージがたくさんあるんだなぁ 自分でメンテしているCLIに使えないか な…？ 当初はcitty目当てで調べ始めた GANGANさんのツイートを発見

使用したUnJSパッケージ

使用したパッケージ一覧 unbuild citty jiti consola giget pkg-types

citty Elegant CLI Builder いわゆるCLIフレームワーク的なものだと思 う コマンドライン引数やサブコマンドなど、 いい感じに設定できて良さげ 今回は run に処理を書いただけだけど、自 動で --help などに対応してくれるのはう れしい Nuxt CLIの中身を見ると使い方が分かりや すい import { defineCommand, runMain } from "citty"; const main = defineCommand({ meta: { name: "hello", version: "1.0.0", description: "My Awesome CLI App", }, args: { name: { type: "positional", description: "Your name", required: true, }, }, run({ args }) { console.log(`Hi, ${args.name}!`); }, }); runMain(main);

No content

giget Download templates and git repositories with pleasure! GitHubなどからファイルをごそっとダウン ロードしてローカルに展開できる Scaffoldingツールにはもってこいのツール 内部でnypmも使っているので、ダウンロー ドした後にnpmやpnpmで依存解決も可能 使用例 特定のディレクトリも指定できる const { dir: appDir } = await downloadTemplate( `${githubRepoUrlBase}/${templateName}`, { dir: projectName, install: doInstall, }, ); const githubRepoUrlBase = "gh:drumath2237/create const templateName = `${buildTool}-${language}`;

pkg-types Node.js utilities and TypeScript definitions for package.json and tsconfig.json ディレクトリやファイルパスを指定して package.json や tsconfig をを読み書きできる 自前で書いてもいいけど、型がついたりするのでいい感じ // パッケージ名を変更 const packageJson = await readPackageJSON(appDir); if (packageJson.name) { packageJson.name = projectName; const jsonPath = path.resolve(appDir, "package.json"); await writePackageJSON(jsonPath, packageJson); }

jiti Runtime TypeScript and ESM support for Node.js 開発中にビルドせずに動作を確認するとき に使用 もともとはvite-nodeを使っていたが なんとなく移行してみた 特殊な使い方はしておらず、シンプルにts ファイルを指定して実行するだけ unbuild A unified javascript build system ビルドツールの選択肢はいろいろある中で 元々はtscでコンパイルした.cjsを bin に指 定して動かしていた バンドルなども考慮したいと思い移行 Zero Configでも普通に動くし、 build.config.ts にビルド設定を記述可能 pnpm exec jiti src/run.ts import { defineBuildConfig } from "unbuild"; export default defineBuildConfig({ entries: ["./src/index.ts"], });

おわりに

No content

参考文献 UnJS https://unjs.io/ create-babylon-app　v1.0に向けたアプデ作業 https://zenn.dev/drumath2237/scraps/b085d5f90b65f3 drumath2237/create-babylon-app https://github.com/drumath2237/create-babylon-app