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
project
ディレクトリを作成しファイルを移動させる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', });
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
を使ってパスエイリアスの設定を行う場合
vite-tsconfig-paths
からtsconfig.json
の場所を指定する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 fortsconfig.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'ssearchForWorkspaceRoot
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
を移動させて開発関連のファイルを丸っと単一のディレクトリに格納することができました!
おわり ₍ ᐢ. ̫ .ᐢ ₎
[参考]
- Shared Options | Vite
- Build Options | Vite
- Shared Options | Vite
- vite-tsconfig-paths - npm
- TypeScript: TSConfig Reference - Docs on every TSConfig option
- TypeScript: TSConfig Reference - Docs on every TSConfig option
- ViteとEleventyで静的サイト構築 | EvoLab.
- Viteで静的なLPサイトを開発する
- Viteで従来型静的サイトの開発環境を構築するためにプラグインをたくさん作った - Qiita