😎

WSL2でViteの Hot Module Replacement (HMR)を有効にする

2023/08/14に公開

WSL 2

Vite

hmr

tech

以下のコードにおいて、vite.config.tsの内部で、"usePolling: true"を設定すると、WSL2でHMRが動きました。
本来は、WSL2でViteのHMRは通常の設定では動かないようです。

#!/bin/bash

# プロジェクトのディレクトリを作成し、その中に移動する
# mkdir /path/to/app
# cd /path/to/app

# 以下のコードを/path/to/appに保存して実行する
# bash /path/to/app/init.sh

# gitの設定
git init
cat <<EOT >.gitignore
node_modules
EOT

# 必要なパッケージをインストールする
npm init -y
npm install --save-dev typescript vite
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

# TypeScriptの設定ファイルを作成する
cat <<EOT > tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "isolatedModules": true
  },
  "include": ["./src/**/*.ts", "./src/**/*.d.ts", "./src/**/*.tsx"]
}
EOT

# Viteの設定ファイルを作成する
cat <<EOT > vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  // Viteの設定をここに記述します。
  server: {
    watch: {
      usePolling: true
    }    
  }
})
EOT

# アプリケーションのエントリーポイントとなるHTMLファイルを作成する
cat <<EOT > index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
EOT

# srcディレクトリとその中にApp.tsxファイルを作成する
mkdir src
cat <<EOT > src/App.tsx
import * as React from 'react'

export default function App() {
  return <h1>Hello, world!</h1>
}
EOT

# Reactアプリケーションを起動するためのmain.tsxファイルを作成する
cat <<EOT > src/main.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))
EOT

# ビルドする
npx vite

Discussion