【toio】toio.jsをブラウザで動かすまでの手順について

# はじめに
toio.jsをブラウザで動かしたいと思った時に、参考記事通りに実行してみたのですが、Webpackのバージョンが４から５にバージョンアップしたことで、モジュールのインストールやwebpackの追加設定が必要でした。
その手順をまとめます。

初心者のため、不要な箇所があるかもしれませんが、参考程度に見ていただければ幸いです。


# 動作環境
Windows11
Node.js：v20.11.0
npm：10.2.4
yarn：1.22.21
webpack：5.90.3

# 前準備


## 手順１　package.json作成
作業環境のディレクトリで作成します。
今回は```C:\Users\ユーザー名\project```に作成しました。
```package.json作成
yarn init -y
```

## 手順２　@toio/scannerを追加
toio.jsのパッケージをインストールします。
```@toio/scanner
yarn add @toio/scanner
```

## 手順３　webpackインストール
webpackに関するツールを３つインストールします

* webpack
* webpack-cli
* copy-webpack-plugin

```webpack
npm install -D webpack webpack-cli copy-webpack-plugin
```

## 手順４　ファイルを作成
```webpack.config.js```ファイルを作業環境のディレクトリに作成します。
参考記事をベースにしましたが、このまま実行するとエラーがでます。

```参考記事のコードを引用 webpack.config.js
module.exports = {
  ...
  resolve: {
    alias: {
      // noble-macをnobleにバイパス
      'noble-mac': 'noble'
    }
  },
  plugins: [
    // ついでにwsも不要なので無効化
    new webpack.IgnorePlugin(/^ws$/)
  ],
  ...
};

```

# webpack.config.jsを編集
webpack.config.jsの中身については以下の記事を参考にしました。

https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3

## 手順１ utilを追加

```util.
npm install util
```
```webpack.config.js```に以下のコードを追加する
```webpack.config.js
fallback: {
      util: require.resolve("util/"),
    },

```

以下のページを参考にしました。

https://stackoverflow.com/questions/64402821/module-not-found-error-cant-resolve-util-in-webpack


## 手順２　processを追加
prosessをインストール
```process.
npm install process
```
```webpack.config.js```に以下のコードを追加する

```webpack.config.js
new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
```
以下のページを参考にしました。

https://zenn.dev/szgk/articles/2d0843136d2fa8

## 手順３　stream-browserifyを追加

```stream-browserify.
npm i stream-browserify
```
```webpack.config.js```に以下のコードを追加する

```webpack.config.js
resolve: {
    fallback: {
      "stream": require.resolve("stream-browserify"),
    }
  }
```

以下のページを参考にしました

https://teratail.com/questions/atnqium0ql7abw


## 手順４　bufferを追加

```buffer.
npm install --save buffer
```
```webpack.config.js```に以下のコードを追加する
```webpack.config.js
resolve: {
    ...
    fallback: {
        ...
      "buffer": require.resolve("buffer")
    },

  },
  plugins: [
      ...
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
};
```
以下のページを参考にしました

https://viglucci.io/articles/how-to-polyfill-buffer-with-webpack-5



ここまでで、追加設定は終了です。
最終的な```webpack.config.js```ファイルは以下のようにしました。
```webpack.config.js
'use strict';

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  target: 'web',
  mode: 'production',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  resolve: {
    alias: {
      'noble-mac': 'noble'
    },

    extensions: [ '.ts', '.js' ],
    fallback: {
      util: require.resolve("util/"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer")
    },

  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
    
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),

    new webpack.IgnorePlugin({ resourceRegExp: /^ws$/ })
  ],
  devtool: 'source-map'
};
```

## 手順５　main.jsを編集
Web Bluetoothを動作させるには、クリックイベントを設置する必要があるようです。参考記事からコードを引用しました。

```参考記事のコードを引用 main.js
import { NearestScanner } from '@toio/scanner';

document.getElementById('connect').addEventListener('click', async () => {
  const cube = await new NearestScanner().start();
  await cube.connect();
}
```
## 手順６　webpackビルド
以下のコードをコマンドプロンプトで実行すると、「dist」というフォルダができていると思います。

```webpackビルド.
npx webpack
```

## 参考文献

この記事は以下の情報を参考にして執筆しました。

https://qiita.com/shinsuke-noguchi/items/037d729327232b6c0d33