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

[先の記事](https://qiita.com/na2na/items/90e7297a8fb1d91bc7af)の最後の状態になっている(nodecg/bundles/作ったまだひな形の状態のバンドル)前提で進めます。

# 前回のおさらい

https://qiita.com/na2na/items/90e7297a8fb1d91bc7af

- `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

#### 流れ

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

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

```shell
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 の編集をします。

```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 と同じ見た目を作ることをします。

1. main.tsx をいい感じにする(参考用に[私の改変済み](https://github.com/na2na-p/my-usual-layout/blob/develop/dashboard/src/App.tsx)を貼っておきます。)
1. vite.config.ts をいい感じにする

vite.config.ts について、

```ts:vite.config.ts
	base: `/bundles/バンドル名/dashboard/dist/`,
```

と入れてやります。

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

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

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

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

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

### graphics

ほとんど Dashboard 一緒です。

#### 流れ

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

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

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

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

```json: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`を作成します。

```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 を用いてパッケージを最新に保つ
  詳細は以前に書いた記事があるので省きます

https://qiita.com/na2na/items/51d1ca0fe5fd5c187d8b

# まとめ

かなりまとまりがなく、見づらい気がしますが許してください。
多分tsconfigもeslintrcももう少し何かやりようがあった気もします。
とりあえずこんな感じになりました。([リンク](https://github.com/na2na-p/my-usual-layout/tree/6a0a9d2298a7961e9937da8f584124d3dea901ea))
まだ続きますので、暖かく見守ってください（？）
次は、extentionsのts化です。