[NodeCG] イチから(簡単な)バンドルを作ってみた(その3)

前回のおさらい

• graphicsとdashboardについて、React製な画面を出せるようにした
• ちょっと便利になるpackage.jsonのscripts整備した

今回の目標

• extensionについて、TypeScriptでいい感じにしていきたい。

今回の登場人物

• TypeScript

作業

コマンドラインでのカレントディレクトリが、自作バンドルの直下にいる想定で進めます。
余談かも)nodecg本体がESM対応してないように見えた(package.jsonのtype="module"とかそういう表記が無い)ので、PureESMで作るのは無理そう（出典無し

tsconfigを作る

流れ

1. extensionへ移動する
2. yarn initする。
3. yarn add -D typescriptする
4. yarn tsc --initする
5. .gitignore作る
6. tsc-alias導入する
7. (お好みで)ついでにこのタイミングでeslint入れる(前回記事を参考にするか、他の記事見てもらえるといいのかも)

作業

cd extension
yarn init # ここは基本Enterだけでいいです。なんなら-yオプション付けてもよかったかも
yarn add -D typescript
yarn tsc --init
touch .gitignore && echo dist > .gitignore
yarn add -D tsc-alias

ここまで来たらVSCodeを開いて、tscinfig.jsonを確認します。気になる箇所があれば好きにカスタマイズしてください。

ディレクトリ構成をいい感じにする

想像していたものの1000倍難しかったので説明が難しいです。とりあえず、これのextensionディレクトリ以下を見てもらえると助かります。。。少なくとも執筆時点での私には、extensionのindex.jsファイルの位置の指定の変更がわからなくてどうしようもないです。とりあえず動くように作ります。。。該当コミット段階ですでに下の型定義追加までやっています。ちなみにextension直下にいるindex.jsはこれをコンパイルした物です

index.ts

import main from './dist/main';
export default main;

NodeCGの型定義を追加する

ここ(リンク)を参考に、index.tsをいじります。
ついでに微修正します。

一度使ってみる

流れ

1. extension内のpackage.jsonのscripts追加
2. バンドル直下のpackage.json修正
3. NodeCG起動

作業

extension内のpackage.jsonにビルド用スクリプトを追加します。

extension/package.json

	"scripts": {
		"build": "yarn tsc -p tsconfig.json && yarn tsc-alias -p tsconfig.json"
	}

バンドル直下のpackage.json修正します(extensionだけ書き方違うのアレなので後で直しておきます。。。)

package.json

scripts: {
		"build": "yarn build:extension && cd dashboard && yarn build && cd ../graphics && yarn build",
		"build:extension": "cd extension && yarn build",
}

ここまで来たら起動してみます。
バンドル直下のpackage.jsonのscriptsにnodecg:startの定義をしてあるなら同階層でyarn nodecg:startしてあげれば起動します。

info: [my-usual-layout] Hello, from your bundle's extension!
info: [my-usual-layout] I'm where you put all your server-side code.
info: [my-usual-layout] To edit me, open "/home/na2na/develop/nodecg/bundles/my-usual-layout/extension/dist/main.js" in your favorite text editor or IDE.
info: [my-usual-layout] You can use any libraries, frameworks, and tools you want. There are no limits.
info: [my-usual-layout] Visit https://nodecg.com for full documentation.
info: [my-usual-layout] Good luck!

と表示が出ていれば問題ありません。お疲れさまでした。

まとめ

• extensionに使うエントリポイントとしてのindex.jsの場所変える方法が欲しい

とりあえず、Yoでできたテンプレートがすべて出るような状態になったのでこのシリーズの目標は達成です。
もしかしたらその4書くかも...?