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
   

   View Slide

2. アジェンダ
   - create-babylon-appを作りました
   - 要件と実装
   - おわりに
   

   View Slide

3. にー兄さん(@ninisan_drumath)
   ソフトウェアエンジニア
   株式会社ホロラボ / IwakenLab
   Unity / ロケーションベースAR / WebAR /
   Babylon.js / Azure Kinect
   最新技術を使った検証開発や
   デモンストレーションが好き
   唐突な
   うちの猫たち→
   

   View Slide

4. create-babylon-appを作りました
   

   View Slide

5. crate-babylon-appは
   Babylon.js環境構築の手間を減らすために開発したCLIです。
   Babylon.jsユーザのためのCLI
   

   View Slide

6. とりあえずデモ
   

   View Slide

7. 要件と実装
   

   View Slide

8. 環境構築はわりと手間
   Babylon.js（TypeScript）の環境構築はちょっと時間かかる
   @babylonjs/core入れて、canvas配置して、css書いて、ts書いて......
   でもやってること毎回同じなんだよな……。
   create-vite的なツールみたいなのが欲しい
   

   View Slide

9. 要件
   - npmありきで使えるCLI
   - エディタを開かずにdevサーバ起動までやる
   - テンプレートから選べる
   - インターフェースも作る
   - Playgroundのコードがコピペで動く
   

   View Slide

10. 採用ツール
    - pnpm
    - 気になっていたので採用。良き
    - TypeScript
    - 型が無いと始まらないため
    - @inquirer/prompts
    - CLIフレームワーク。直観的で良い
    - コンパイルで若干苦戦した
    - fs-extra
    - node:fsでできない、痒い所に手が届く良ライブラリ
    

    View Slide

11. create xxx系のCLI
    npmで「create-xxx」という名前で公開する
    npm create xxxというコマンドで
    create-xxxというパッケージを検索してくれる
    簡単！
    create initもエイリアスになってる
    

    View Slide

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として登録
    

    View Slide

13. CI/CD
    申し訳程度にCI/CD
    自動バージョニングや
    リリースノート作成
    も追加したいな…...
    

    View Slide

14. おわりに
    

    View Slide

15. まとめ など
    - create-babylon-appで簡単に環境構築が可能に
    - 本当は公式で作ってほしいなぁ
    - Node.jsのCLIを作るのは初めてだったけど楽しかった
    - Webpack、Turbopackなどのテンプレ追加したい
    - プルリクお待ちしています！
    

    View Slide

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
    

    View Slide