Viteを使ったSvelteのプロジェクト生成時のメモ

Viteを使ってSvelteでシンプルなアプリを作ってGitHub Pagesへデプロイする際、いくつかの手順が必要になるので、書き残しておく。

環境

• Windows10
• npm
• VSCode
• 2023年3月頭の時点の諸々のバージョン

やること

Viteを使って、Svelteのシンプルなアプリを作り、GitHub Pagesへデプロイする。

• Viteによるプロジェクト作成とテスト実行
• VSCodeで発生するエラーへの対応
• Vitestによるテストの実行
• GitHub Pagesへのデプロイ

Viteによるプロジェクト作成とテスト実行

プロジェクトを作成したいフォルダでターミナルを開き、npm init vite を実行する。

• プロジェクト名を聞かれるので命名。（例えば test-vite とか）
• フレームワークは Svelte を選択。
• TypeScript を使うように設定。（お好み）

できたプロジェクトをVSCodeで開き、npm i を実行して必要なパッケージのインストールを行う。

それからひとまずターミナルで npm run dev と実行すると、ローカルホストで超シンプルなカウンターが起動する。

VSCodeでエラーが表示されたときの対応（1度だけ）

もしも、プロジェクト内の .svelte ファイルをVSCodeで開いたときに、こんなエラーが表示されたときの対処法。

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@sveltejs/vite-plugin-svelte' imported from <プロジェクトのディレクトリ>\svelte.config.js

これは以下の設定を行えば解消できる。

1. VSCodeの「設定」を開く。（Ctrl + ,）
2. 設定を「Svelte」で検索する。
3. 「Svelte › Language-server: Runtime」に、node へのパスを入れる。（例えば C:\\Program Files\\nodejs\\node.exe）
4. 「ウィンドウの再読み込み」を行う。（F1を押して「Reload Window」を実行する）

Vitestの有効化

Vitestを使って、スクリプト部分の単体テストを行うための手順。

npm i -D vitest によりVitestをインストールする。

package.jsonのscriptsの部分に、"test": "vitest" を追記する。（前の行にカンマを追加するのを忘れないこと）

...(略)...
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "check": "svelte-check --tsconfig ./tsconfig.json",
  "test": "vitest"
},
...(略)...

src ディレクトリ内に、適当なテスト用ファイルを作成する。

// test.test.ts

import { expect, test } from "vitest";

test("One plus Two", () => {
  expect(1 + 2).toBe(3);
});

npm run test によりテストを実行する。Vitestはファイルの変更をチェックし続けるので、コードを変更して保存すれば自動的にテストが走る。

GitHub Pagesへのデプロイ

リポジトリへプッシュしたときに、GitHub Actionsで自動ビルドされてgh-pagesブランチがGitHub Pagesとして公開されるよう設定する。

ファイルの作成・編集

.github/workflows/deploy.yaml として、以下のファイルを作成する。

name: deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: "16"
          cache: npm

      - run: npm install
      - run: npm run build

      - uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

GitHub Pagesの相対パスに対応するよう、vite.config.ts を編集し、ビルド時の設定を変更する。具体的には以下のようにbaseを追加する。

// vite.config.ts
export default defineConfig({
  plugins: [svelte()],
  base: "./",
});

また、独自ドメインを使わず普通にGitHub Pagesにデプロイする場合、src/index.htmlのパス指定を、相対パスで読み込むよう書き換える。

<script type="module" src="/src/main.ts"></script>
　　　　↓
<script type="module" src="./src/main.ts"></script>

GitHub側の設定

リポジトリをWebブラウザで開き、Settings > Actions > General 内の Workflow permissions で Read and write permissions を選択する。

プッシュ

GitHubにリポジトリを作ってプッシュする。

1. ローカルでgit init
2. GitHubに空のリポジトリを作成
3. ローカルでリモートとしてリポジトリを追加
4. プッシュ

GitHub Pagesの公開設定

Settings > Pages > Branch で gh-pages と /(root) を選択して Save する。

公開の確認

これでGitHub Pagesに公開されているはず。URLはリポジトリの Actions タブの実行結果を見れば分かる。