Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Babylon.jsユーザのためのCLIを軽率にnpmで公開した話 / about creat...
Search
にー兄さん
July 05, 2023
Programming
0
680
Babylon.jsユーザのためのCLIを軽率にnpmで公開した話 / about create babylon app CLI
Babylon.jsゆるほめLT会 vol2で登壇した資料です
にー兄さん
July 05, 2023
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.1k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.3k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
170
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
210
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.8k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
620
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
110
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
140
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
590
Other Decks in Programming
See All in Programming
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
360
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
210
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
3
190
CSC305 Lecture 01
javiergs
PRO
1
140
Unlocking Python's Core Magic
leew
0
110
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
110
ECS向けのドリフト検知機構を実装してみた
tkikuc
0
270
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
3.7k
What is TDD?
urakawa_jinsei
1
200
App Router 悲喜交々
quramy
7
370
Assembling the Future: crafting the missing pieces of the Ruby on Wasm puzzle
skryukov
0
120
文化が生産性を作る
jimpei
2
480
Featured
See All Featured
Designing with Data
zakiwarfel
98
5.1k
Building an army of robots
kneath
302
42k
Designing the Hi-DPI Web
ddemaree
279
34k
Building Adaptive Systems
keathley
37
2.1k
Optimizing for Happiness
mojombo
375
69k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
GraphQLとの向き合い方2022年版
quramy
43
13k
Music & Morning Musume
bryan
46
6.1k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
It's Worth the Effort
3n
183
27k
Web development in the modern age
philhawksworth
205
10k
Designing for humans not robots
tammielis
249
25k
Transcript
Babylon.jsユーザのためのCLIを 軽率にnpmで公開した話 にー兄さん@ninisan_drumath Babylon.js ゆるほめLT会 vol.2
アジェンダ - create-babylon-appを作りました - 要件と実装 - おわりに
にー兄さん(@ninisan_drumath) ソフトウェアエンジニア 株式会社ホロラボ / IwakenLab Unity / ロケーションベース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系のCLI npmで「create-xxx」という名前で公開する npm create xxxというコマンドで create-xxxというパッケージを検索してくれる 簡単! create initもエイリアスになってる
ディレクトリ構造 / ├─ 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として登録
CI/CD 申し訳程度にCI/CD 自動バージョニングや リリースノート作成 も追加したいな…...
おわりに
まとめ など - create-babylon-appで簡単に環境構築が可能に - 本当は公式で作ってほしいなぁ - Node.jsのCLIを作るのは初めてだったけど楽しかった - Webpack、Turbopackなどのテンプレ追加したい
- プルリクお待ちしています!
参考 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