ビルドツール素振り(Vite編)

created: 2021/05/08

Vite を素振りしてみました。

Vite を使ったビルド設定をやってみる

ベースはここから。

なにはともあれインストールします。

$ yarn add -D vite

vite.config.ts を作成します。js だけでなく、 ts ファイルもサポートされています。

Vite

Next Generation Frontend Tooling

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 2424,
    open: true,
  },
  build: {
    sourcemap: true,
    manifest: true,
  },
});

create-react-app 直後の状態では index.html が public/ 配下にありますが、どうやら Vite では基本的にプロジェクトルートに index.html が存在する前提となっているようでした。

Vite

Next Generation Frontend Tooling

そのため、ファイルの場所を移動します。

$ mv public/index.html index.html

Vite はエントリポイントとなるファイルを index.html から探しに行くため、 script タグを追記します。 (後から分かったのですが、この挙動はオプションで変更できるようです。)

Vite

Next Generation Frontend Tooling

   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

また下記の通り Vite は public/ ディレクトリに特別な役割を持たせているようでした。

Vite

Next Generation Frontend Tooling

以下の理由から、ビルド結果の出力先を public/ から変更することにしました。

public directory とみなすディレクトリ(ややこしい)を変更することも可能ですが、元々の静的資源の参照先を全て変えなければなりません。
Vite はビルド時に出力先ディレクトリを一度空にしてからビルドを行います。そのため、静的資源の置き場所とビルド結果出力先を一緒にしてしまうと静的資源が消えてしまい、不都合が生じます。
出力先が public/ でなければならない強い理由もありません(今回はとりあえずビルドできれば ok)。

最後に、ビルドコマンドを変更します。

"scripts": {
-    "start": "echo start",
-    "build": "echo build",
+    "start": "vite",
+    "build": "vite build",
     "test": "echo test"
   },

まとめ

Vite 自体というよりも、 create-react-app 直後の構造と Vite が置いている前提とが合っていないがために設定に苦労した印象でした。設定ファイルを ts で書けるのは地味に嬉しかったです。型定義が簡易ドキュメントの役割を果たしてくれて、設定を書くときの迷いが少なかったです。

新規構築のときには用意されている scaffold コマンドからやるのも良さそうです。

Vite

Next Generation Frontend Tooling

ここまでの結果は下記に置いています。

frontend-build-tools/vite at main · yashi8484/frontend-build-tools

Contribute to yashi8484/frontend-build-tools development by creating an account on GitHub.

引き続き、他のビルドツールの記事も書いていきます。あと少し・・・！

tags: