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
830
Babylon.jsユーザのためのCLIを軽率にnpmで公開した話 / about create babylon app CLI
Babylon.jsゆるほめLT会 vol2で登壇した資料です
にー兄さん
July 05, 2023
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
16
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
43
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
28
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
72
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
12
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.5k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.7k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
380
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
490
Other Decks in Programming
See All in Programming
Design Pressure
hynek
0
140
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
150
Rubyの!メソッドをちゃんと理解する
alstrocrack
1
370
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
270
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
160
REALITY コマンド作成チュートリアル
nishiuriraku
0
120
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
120
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
980
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
150
In geheimer Mission: AI Agents entwickeln
joergneumann
0
120
VibeCoding時代のエンジニアリング
daisuketakeda
0
250
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
523
40k
Bash Introduction
62gerente
613
210k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Building Applications with DynamoDB
mza
94
6.4k
Visualization
eitanlees
146
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
710
The Pragmatic Product Professional
lauravandoore
33
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
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