🔥

Vite で最速 React & TypeScript

commits7 min read

とりあえずやってみる

https://vitejs.dev/guide/
zsh
# npm の場合
% npm init vite

# yarn の場合
% yarn create vite

(スクショは Yarn)

1. react を選択

2. react-ts を選択

zsh
Scaffolding project in /Users/zenn/Downloads/zenn...

Done. Now run:

  cd zenn
  yarn
  yarn dev

✨  Done in 10.32s.

3. 指示にしたがう

zsh
% cd zenn
% yarn
% yarn dev

はやい(語彙力)。

カスタマイズする

https://vitejs.dev/config/

1. 自動でブラウザを開いてほしい - server.open

yarn dev(または npm run dev)したら自動でブラウザを開いてほしい場合は server.open を指定します。

vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    open: true,
  },
  plugins: [react()],
});

2. ソースコード置き場 - root

index.htmlsrc フォルダの中にないのが何か気持ち悪いので root を変更します。

vite.config.ts
  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';

  // https://vitejs.dev/config/
  export default defineConfig({
+   root: './src',
    plugins: [react()],
  });

index.htmlsrc フォルダへ移動してパスを調整します。

src/index.html
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
-     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Vite App</title>
    </head>
    <body>
      <div id="root"></div>
-     <script type="module" src="/src/main.tsx"></script>
+     <script type="module" src="/main.tsx"></script>
    </body>
  </html>

3. 本番ビルドの出力先 - build.outDir

このままビルドすると root (= ./src) ディレクトリ以下へ出力されてしまうので、出力先も指定します。

vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  root: './src',
  build: {
    // root (= ./src) から見た相対パスで指定
    outDir: '../public',
  },
  plugins: [react()],
});

ビルドしてみましょう。

zsh
% yarn build  # or 'npm run build'

yarn run v1.22.15
warning package.json: No license field
$ tsc && vite build
vite v2.6.5 building for production...
✓ 33 modules transformed.
../public/assets/favicon.17e50649.svg   1.49 KiB
../public/assets/logo.ecc203fb.svg      2.61 KiB
../public/index.html                    0.52 KiB
../public/assets/index.f53d7a04.js      1.59 KiB / gzip: 0.82 KiB
../public/assets/index.d93758c6.css     0.77 KiB / gzip: 0.49 KiB
../public/assets/vendor.c7756b9a.js     129.47 KiB / gzip: 41.77 KiB
✨  Done in 6.00s.

はやい(語彙力)。

本番ビルドをプレビューするスクリプトも用意されています。

zsh
% yarn serve  # or 'npm run serve'

4. 本番ビルド前にビルドディレクトリを空にする/しない - build.emptyOutDir

Vite はデフォルトで本番ビルド前に build.outDir に指定したフォルダを空にしてくれます。

しかし #3 のようにプロジェクトルートの外に出力先を指定した場合には、以下のようなメッセージが表示され、この機能がオフになっているとの警告を受けます。

zsh
(!) outDir C:\Users\zenn\vite-zenn\public is not inside project root and will not be emptied.
Use --emptyOutDir to override.

ここでは、この警告の指示にしたがって build.emptyOutDir を明示的に true とします。

vite.config.ts
export default defineConfig({
  root: './src',
  plugins: [react()],
  build: {
    outDir: '../public',
    emptyOutDir: true,
  },
});

逆に、出力先ディレクトリに常に置いておきたいアセット類(画像やマニフェストファイル)がある場合には、これを false とすると良いでしょう。

5. 「デプロイしたら動かない」問題への対処 - base

Vite ではリソースの読み込み先に絶対パスの /(= ルートディレクトリ) が使用されるため、GitHub Pages のようにルートディレクトリではない場所にデプロイされるサービスでは読み込みに失敗します。

base を設定しましょう。

vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  root: './src',
  build: {
    /**
     * GitHub Pages でメインブランチを公開する場合には、
     * サーブするディレクトリには
     * '/' (root) と '/docs' しか選択肢がない
     */
    outDir: '../docs',
  },
  plugins: [react()],
});

6. PWA 化する - vite-plugin-pwa

Create React AppPWA 用テンプレートほどではないにせよ、Vite でもプラグインを利用することで比較的容易に PWA 化することが出来ます。

https://create-react-app.dev/

https://www.npmjs.com/package/cra-template-pwa-typescript

プラグイン vite-plugin-pwa をインストールします。

https://vite-plugin-pwa.netlify.app/
zsh
% yarn add -D vite-plugin-pwa

# もしくは
% npm i -D vite-plugin-pwa

VitePWA をインポートし、plugin 配列に追加します。

vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

import { VitePWA } from 'vite-plugin-pwa';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  root: './src',
  build: {
    outDir: '../docs',
  },
  plugins: [react(), VitePWA()],
});

Service Worker の登録

エントリーファイル (= main.tsx) の中で Service Worker を登録する関数を実行します。

https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API

https://vite-plugin-pwa.netlify.app/guide/periodic-sw-updates.html

ただし、ただインポートしただけでは下(↓)のように型定義がないと叱られてしまうため、tsconfig.json を編集します。

tsconfig.json
{
  "compilerOptions": {
    // ~ snip ~
  },
  // "node_modules/vite-plugin-pwa/client.d.ts" を追加
  "include": ["./src", "node_modules/vite-plugin-pwa/client.d.ts"]
}

さらに node_modules ディレクトリとパッケージマネージャーのロックファイルを再構築しないといけない場合もあるようです(筆者の手元の環境では確認できず)。

zsh
% rm -rf node_modules yarn.lock && yarn install
src/main.tsx
import { registerSW } from 'virtual:pwa-register';

// ~ snip ~

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// サービスワーカーを登録
registerSW();

参考にさせていただきました

https://zenn.dev/wintyo/articles/fce84e82d65a68

https://ics.media/entry/210708/

実際に使ってみたサンプルレポジトリ

https://github.com/sprout2000/todo
GitHubで編集を提案

Discussion

ログインするとコメントできます