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