Babylon.jsユーザのためのCLIを軽率にnpmで公開した話 / about create babylon app CLI

Babylon.jsゆるほめLT会 vol2で登壇した資料です

Transcript

1. Babylon.jsユーザのためのCLIを 軽率にnpmで公開した話 にー兄さん@ninisan_drumath Babylon.js ゆるほめLT会 vol.2
2. アジェンダ - create-babylon-appを作りました - 要件と実装 - おわりに
3. にー兄さん(@ninisan_drumath) ソフトウェアエンジニア 株式会社ホロラボ / IwakenLab Unity / ロケーションベースAR / WebAR / Babylon.js / Azure Kinect 最新技術を使った検証開発や デモンストレーションが好き 唐突な うちの猫たち→
4. create-babylon-appを作りました
5. crate-babylon-appは Babylon.js環境構築の手間を減らすために開発したCLIです。 Babylon.jsユーザのためのCLI
6. とりあえずデモ
7. 要件と実装
8. 環境構築はわりと手間 Babylon.js（TypeScript）の環境構築はちょっと時間かかる @babylonjs/core入れて、canvas配置して、css書いて、ts書いて...... でもやってること毎回同じなんだよな……。 create-vite的なツールみたいなのが欲しい
9. 要件 - npmありきで使えるCLI - エディタを開かずにdevサーバ起動までやる - テンプレートから選べる - インターフェースも作る - Playgroundのコードがコピペで動く
10. 採用ツール - pnpm - 気になっていたので採用。良き - TypeScript - 型が無いと始まらないため - @inquirer/prompts - CLIフレームワーク。直観的で良い - コンパイルで若干苦戦した - fs-extra - node:fsでできない、痒い所に手が届く良ライブラリ
11. create xxx系のCLI npmで「create-xxx」という名前で公開する npm create xxxというコマンドで create-xxxというパッケージを検索してくれる 簡単！ create initもエイリアスになってる
12. ディレクトリ構造 / ├─ src/ │ └─ index.ts ├─ dist/ │ └─ index.js ├─ index.cjs └─ package.json src/index.tsをビルドして dist/index.jsを生成 index.cjsからdist/index.jsの中身を実行 package.jsonでindex.cjsをbinとして登録
13. CI/CD 申し訳程度にCI/CD 自動バージョニングや リリースノート作成 も追加したいな…...
14. おわりに
15. まとめ など - create-babylon-appで簡単に環境構築が可能に - 本当は公式で作ってほしいなぁ - Node.jsのCLIを作るのは初めてだったけど楽しかった - Webpack、Turbopackなどのテンプレ追加したい - プルリクお待ちしています！
16. 参考 create-babylon-app - npm https://www.npmjs.com/package/create-babylon-app GitHub https://github.com/drumath2237/create-babylon-app Node.jsでのCLIの作り方と便利なライブラリまとめ https://qiita.com/toshi-toma/items/ea76b8894e7771d47e10 TypeScriptでCLIツールを作って、npmパッケージにする https://qiita.com/suzuki_sh/items/f3349efbfe1bdfc0c634 inquirer - npm https://www.npmjs.com/package/inquirer