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/*"]
    },
  },
}

• baseUrl … 絶対パス指定する場合の起点をどこにするか
• paths … baseUrl からの相対パスでマッピングされるパスを指定できる

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 を移動させて開発関連のファイルを丸っと単一のディレクトリに格納することができました！
おわり ₍ ᐢ. ̫ .ᐢ ₎

---

[参考]

• Shared Options | Vite
  • Getting Started | Vite
  • Building for Production | Vite
  • Static Asset Handling | Vite
• Build Options | Vite
• Shared Options | Vite
  • Env Variables and Modes | Vite
• vite-tsconfig-paths - npm
• 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
• ViteとEleventyで静的サイト構築 | EvoLab.
• Viteで静的なLPサイトを開発する
• Viteで従来型静的サイトの開発環境を構築するためにプラグインをたくさん作った - Qiita

青春コンプレックス(初回仕様限定盤)

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

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