先の記事の最後の状態になっている(nodecg/bundles/作ったまだひな形の状態のバンドル)前提で進めます。

前回のおさらい

nodecg-cli入れた
Yeoman入れた
nodecg setupした
新しくバンドルを作り、git 管理しやすいような形にした。
nodecg/bundles/my-usual-layoutになるように nodecg install した

今回の目標

dashboard と、graphics について、React を用いていい感じにできるようにする。
eslint 等のツールも入れていきたい。
この後のextensionの記事でNodeCGの型定義をやってくれるパッケージを導入しますが、とりあえず今回はドキュメントにあるとおりにやります。

今回の登場人物

React
Vite (Webpack を使ったあれこれを、私が知らないというのもあって Vite 採用しています。~~今後主流になると信じて...~~)
Emotion(@emotion/react) CSS in JS のフレームワークです。(結局今回の記事で使う場面無かったので入れてないです。。。)

作業

画面

できるだけことを単純にするために、dashboard と graphic で vite create を 2 回やります。

dashboard

流れ

まずは今ある panel.html を別の場所に移動させる
dashboard ディレクトリごと消す
yarn create viteする(今回は使用フレームワークに React を使用)
先ほど退避させた panel.html をもとに戻す。
dashboard ディレクトリの中で、必要な npm パッケージのインストールをする
eslint 入れる
(Dashboard に何枚の操作盤を出すかによってここだけちょっと分岐します。)
自作バンドル直下にある package.json 修正

dashboard という名前の vite プロジェクトを作る

mv dashboard/panel.html
rm -rf dashboard
yarn create vite # Project nameはdashboardとすること！！！
cd dashboard/ && yarn install
mv panel.html dashboard/

最後のyarn create viteについて、今回は使用フレームワークに React(react-ts)を使用しますが、もちろん他の物でも構いません。Project name については dashboard としてください。

eslint 入れる

カレントが dashboard になっている状態です。

yarn add -D eslint
yarn eslint --init

eslint はこんな感じの選択をします。正直スタイルガイドどれ選ぶかは趣味だと思っています。何を選んでも結局「あ、コレ要らない」とかやりがちなので。

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · google
✔ What format do you want your config file to be in? · JavaScript

dashboard 配下の package.json の編集をします。

"scripts": {
	"lint": "yarn eslint --ext .tsx,.ts ./src",
	"lint:fix": "yarn eslint --ext .tsx,.ts ./src --fix"
},
"eslintIgnore": [
	".eslintrc.js",
	"node_modules",
	"dist",
	"vite.config.*",
	"vite-env.d.ts"
]

次に、.eslintrc.cjs の編集をします。これをやらないと、nodecg 本体に含まれる eslint との設定と衝突します。

  'root': true,

を追加してやるだけです。

エントリポイントをいい感じにする

流れの所で一瞬触れた、分岐の話をします。

Dashboard に操作盤を 1 つだけ出す場合

流れ

ここも先に流れだけ説明します。dashboard/index.html と dashboard/src/main.tsx を編集して今ある panel.html と同じ見た目を作ることをします。

main.tsx をいい感じにする(参考用に私の改変済みを貼っておきます。)
vite.config.ts をいい感じにする

vite.config.ts について、

vite.config.ts

	base: `/bundles/バンドル名/dashboard/dist/`,

と入れてやります。

Dashboard に操作盤を 2 つ以上出す場合

追記予定あり
(Vite でマルチページアプリケーションを作る、とかで出てくるかもしれません。エントリポイントが複数の html になるような感じになるはずです。)

自作バンドル直下にある package.json 修正

dashboardPanelsの中のfileのパスを"dist/index.html"に修正します。

ここまでで、とりあえずはおしまいです。

graphics

ほとんど Dashboard 一緒です。

流れ

まずは今ある index.html を別の場所に移動させる
graphics ディレクトリごと消す
yarn create viteする(今回は使用フレームワークに React を使用)
先ほど退避させた index.html を見つつ、いい感じにしていく
graphics ディレクトリの中で、必要な npm パッケージのインストールをする
eslint 入れる

yo でテンプレートから作った時にエントリポイントは dist/index.html 指定していたので今回は自作バンドル直下にある package.json 修正は不要です。

諸々の操作をまとめてやりやすいように設定

バンドル直下の package.json の編集をします。
まずは scripts の編集をします。

package.json

	"scripts": {
		"install": "cd dashboard && yarn install && cd ../graphics && yarn install",
		"install:ci": "cd dashboard && yarn install --immutable --immutable-cache --check-cache && cd ../graphics && yarn install --immutable --immutable-cache --check-cache",
		"nodecg:start": "cd ../../ && nodecg start",
		"build": "cd dashboard && yarn build && cd ../graphics && yarn build",
		"lint": "cd dashboard && yarn lint && cd ../graphics && yarn lint",
		"lint:fix": "cd dashboard && yarn lint:fix && cd ../graphics && yarn lint:fix"
	}

(お好みで)Github Actions の設定をする
.github/workflows/ci.ymlを作成します。

ci.yml

name: CI
on: push
jobs:
  ESLint:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set Node.js 18.x
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - name: ci
        run: yarn install:ci
      - name: ESLint
        run: yarn lint
  tscNoEmit:
    runs-on: ubuntu-latest
    steps:
      - name: Set Node.js 16.x
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - name: settingUp packages
        run: npm install --global nodecg-cli
      - name: Checkout
        run: mkdir nodecg && cd nodecg && nodecg setup && nodecg install na2na-p/my-usual-layout
      - name: ci
        run: cd nodecg/bundles/my-usual-layout && yarn install:ci
      - name: tscNoEmit
        run: cd nodecg/bundles/my-usual-layout && yarn tscNoEmit

後々テストとかも追加したいのであえて ci という名前で準備してます。

(お好みで)Renovate を用いてパッケージを最新に保つ
詳細は以前に書いた記事があるので省きます

まとめ

かなりまとまりがなく、見づらい気がしますが許してください。
多分tsconfigもeslintrcももう少し何かやりようがあった気もします。
とりあえずこんな感じになりました。(リンク)
まだ続きますので、暖かく見守ってください（？）
次は、extentionsのts化です。

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