$30 off During Our Annual Pro Sale. View Details »

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

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

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

にー兄さん

July 05, 2023
Tweet

More Decks by にー兄さん

Other Decks in Programming

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