最初の環境構築

正直コレがほぼすべて…

# current directoryに作ります
yarn create vite@latest ./ --template vanilla-ts
# package.jsonの内容をインストール
yarn

起動するとこんな画面が出ます。

# 起動
yarn dev
# o でブラウザで開きます。
# 起動時にteminalに表示されるlocalhostのアドレスにアクセスしてももちろんOK！
o

とりあえずこれだけでViteの開発環境の9割は完了。
表示されてるカウンターのボタンを押すとカウントが上がります。

ちなみに h でその他どういうコマンドがあるか表示されます

試しに変更

ではカウンターを上げた後HTMLを変更してみます。

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
+   <div id="hoge">ほげ</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

HMRではなくhot reloadされますね。カウンターを見る限り。
にしても速い！

CSS modules

ついでにCSS modulesもデフォで効くとのことなので、検証。
先ほどのhogeの背景色を赤にしてみます。

このcssファイルを追加。

test.module.css

.hoge {
    background-color: red;
}

main.ts

import './style.css'
+ import mystyles from './test.module.css';
import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'

// ...中略

+ // css modulesでスタイル適用
+ document.getElementById("hoge")!.classList.add(mystyles.hoge)

ばっちりですね。

番外: wslでもhot reload

実はwindowsの場合、powershellやcommand promptなどwindowsのterminalでは良いんですが、wslではhot reloadが効きません。

しかしwslでも使いたい、チーム開発で他の人はどのターミナルを使用するかわからないなどの場合でも対応する方法はあります。

vite.config.jsというviteの設定ファイルを追加し、以下の記述をします。

vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    watch: {
      usePolling: true,
    },
  },
});

これでwslを使用してyarn devで起動してもhot reloadが効きます！

終わりに

ほんとに爆速でびっくりしました。

CRAでReactアプリをよく作ってたんですが、置き換えていきたい…。

Viteでvanilla-ts開発環境

最初の環境構築

試しに変更

CSS modules

番外: wslでもhot reload

終わりに