UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS

v-tokyo 12でLT登壇したスライド資料です
Web版：https://drumath2237.github.io/slides-create-cli-with-unjs/

Transcript

1. UnJSを使って軽率に CLIを作ってみたら めちゃくちゃ便利だった にー兄さん@ninisan_drumath v-tokyo #21
2. にー兄さん ソフトウェアエンジニア@HoloLab inc. Babylon.js勉強会運営 Iwaken Lab. 好きなもの Babylon.js / WebXR Device API / C# ねこ / コーヒー / ウィスキー / ギター アカウント @ninisan_drumath @drumath2237
3. 本日の話 個人開発しているCLIでUnJSを使ってみた どんなパッケージを使ったのか、用途別にご紹介 UnJSのパッケージが気になっている方に刺さると嬉しいです
4. アジェンダ 1. はじめに 2. 使用したUnJSパッケージ 3. おわりに
5. はじめに
6. create-babylon-app とは Babylon.jsのプロジェクトを簡単に作成 するためのCLI コマンドラインから質問に答えるとプロ ジェクトができ、そのまま開発できる手 軽さが売り お手元のターミナルでぜひ試してみてくだ さい！ GitHub: https://github.com/drumath2237/create- babylon-app npm create babylon-app
7. create-babylon-appの要件 1. 作成するプロジェクト名を指定 2. テンプレートを選択 3. 設定を反映したプロジェクトを作成 create-viteやNuxt CLIの動作に近いので参考にしている。
8. UnJSとは UnJSは、Nuxt 開発チームが中心となっ て開発・メンテナンスされている、あら ゆるJavaScriptフレームワーク上で統一 的に動作するユーティリティーツール・ ライブラリ群です。 つまりUnJSはパッケージそのものではな く、パッケージ群のこと。 2024/07/26時点で63個ものパッケージが 提供されていてすごい 1. 『UnJS にどんなツールがあるのか、上位30件すべて紹 介してみた（前編）』より ↩︎ [1]
9. UnJSを使ってみたい 便利なパッケージがたくさんあるんだなぁ 自分でメンテしているCLIに使えないか な…？ 当初はcitty目当てで調べ始めた GANGANさんのツイートを発見
10. 使用したUnJSパッケージ
11. 使用したパッケージ一覧 unbuild citty jiti consola giget pkg-types
12. 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);
14. 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}`;
15. 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); }
16. 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"], });
17. おわりに
19. 参考文献 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