かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Vite index.html を移動させて開発ディレクトリを作りたいときの Tips

Vite Vanilla JS で静的サイトを作るテンプレートを作成していて index.html を移動させると色々大変だったのでメモを残しておく
作ったもの

デフォルトの Vite プロジェクト

$ npm create vite@latest
✔ Project name: … <Project Name>
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

👇 構成

/root
  |- /public
  |- /src
  |    |- main.ts
  |- index.html
  |- tsconfig.json

ゴール

/root
  |- /project
  |     |- /public
  |     |- /src
  |     |    |- main.ts
  |     |- index.html
  |- tsconfig.json
  • build した dist ディレクトリは root 直下に出力される
  • .env ファイルは root 直下に置きたい

1. vite.config.js をプロジェクトのルートに作成する

$ touch vite.config.js
/root
  |- /public
  |- /src
  |    |- main.ts
  |- index.html
  |- vite.config.js ←
  |- tsconfig.json

2. 開発環境の root を project ディレクトリにする

/root
  |- /project ← 開発用のディレクトリ
  |     |- /public
  |     |- /src
  |     |    |- main.ts
  |     |- index.html
  |- vite.config.js
  |- tsconfig.json
  1. project ディレクトリを作成しファイルを移動させる
  2. vite.config.js を作成しパスの変更の設定を行う

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  // index.html の場所
  root: 'project',
  // アセットなどのパスを変換するベースとなるパス
  // `/foo/` とすると `/foo/` 始まりのパスに変換される
  base: '/',
  // 静的ファイルの場所
  //  `public` を指定した場合 `<root>/public` が静的ファイルの格納場所になる
  publicDir: 'public',
});

cf. Shared Options | Vite

3. ビルドしたファイルの出力先をプロジェクトのルートにする

デフォルトだと vite.config.js の root の場所に出力される

/root
  |- /dist ← ここに出力されるようにしたい
  |- /project

build.outDir オプションでビルドファイルの出力場所を指定できる

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  root: 'project',
  base: '/',
  publicDir: 'public',
  build: {
    // `root` からの相対パスで指定する
    outDir: '../dist',
  },
});

build.outDir

  • Type: string
  • Default: dist

Specify the output directory (relative to project root).
cf. Build Options | Vite

4. .env ファイルの場所をプロジェクトのルートにする

/root
  |- /project
  |- .env ← ここに `.env` を置きたい
  |- vite.config.js
  |- tsconfig.json

Vite はデフォルトで .env を読み込める。デフォルトでは .env の場所は vite.config.js の root の場所なので /project ディレクトリとなる。envDir を使って .env のファイルの場所を指定できるのでプロジェクトのルートに変更する

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  root: 'project',
  base: '/',
  publicDir: 'public',
    build: {
    outDir: '../dist',
  },
  // 絶対パスか、`root` からの相対パスで指定する
  envDir: '../',
});

envDir
The directory from which .env files are loaded. Can be an absolute path, or a path relative to the project root.
cf. Shared Options | Vite

絶対パスの場合は __dirname を使う。パスの最後が / で終わる必要があるので path.join(__dirname, '/') と指定すればプロジェクトのルートになる

5. path alias の解決

vite-tsconfig-paths を使ってパスエイリアスの設定を行う場合

  1. vite-tsconfig-paths から tsconfig.json の場所を指定する
  2. tsconfig.json でパスエイリアス/project からの指定で行う

1. vite-tsconfig-paths から tsconfig.json の場所を指定する

vite.config.js

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  root: 'project',
  base: '/',
  publicDir: 'public',
  build: {
    outDir: '../dist',
  },
  envDir: '../',
  plugins: [
    // `root` からの相対パスで `tsconfig.json` の場所を指定する
    tsconfigPaths({
      root: '../',
    }),
  ],
});

Options
root: string
The directory to search for tsconfig.json files.
The default value of this option depends on whether projects is defined. If it is, then the Vite project root is used. Otherwise, Vite's searchForWorkspaceRoot function is used.

cf. - vite-tsconfig-paths - npm - Vite + React で path alias を使いたい! - かもメモ

2. tsconfig.json でパスエイリアス/project からの指定で行う

tsconfig.json

{
  "compilerOptions": {
    // …
    "baseUrl": "./project",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./public/*"]
    },
  },
}

cf. - TypeScript: TSConfig Reference - Docs on every TSConfig option - tsconfig.jsonのrootDirとbaseUrlに関するメモ [TypeScript] - Qiita - TypeScript: TSConfig Reference - Docs on every TSConfig option - TypeScript: Documentation - Module Resolution - ts-nodeを使ってtsconfigのpathsをちゃんと読み込ませる | Oinari Tech Blog

3. VS Code のパスエイリアスの補完が効くようにする

./vscode/settings.json"path-autocomplete.pathMappings" で指定する

{
  // …
  "path-autocomplete.pathMappings": {
    "@": "${folder}/project/src",
    "~": "${folder}/project/public"
  }
}

これで Vite のプロジェクトで index.html を移動させて開発関連のファイルを丸っと単一のディレクトリに格納することができました!
おわり ₍ ᐢ. ̫ .ᐢ ₎


[参考]

サムネ画像のアイディアネタ切れ