Remixドキュメント日本語版

English

vite.config.ts

従来のRemixコンパイラ をまだ使用している場合は、代わりにremix.config.jsドキュメント を参照してください。

RemixはViteを使用してアプリケーションをコンパイルします。 Remix Viteプラグインを使用して、Vite設定ファイルを提供する必要があります。 以下は、必要な最小限の設定です。

vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [remix()],
});

Viteは、設定ファイルに .js ファイルを使用することをサポートしていますが、TypeScriptを使用することをお勧めします。 これにより、設定の妥当性を確認できます。

Remix Viteプラグインの設定

vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [
    remix({
      basename: "/",
      buildDirectory: "build",
      future: {
        /* any enabled future flags */
      },
      ignoredRouteFiles: ["**/*.css"],
      routes(defineRoutes) {
        return defineRoutes((route) => {
          route("/somewhere/cool/*", "catchall.tsx");
        });
      },
      serverBuildFile: "index.js",
    }),
  ],
});

appDirectory

プロジェクトルートを基準とした、appディレクトリへのパス。 デフォルトは"app"です。

future

future 設定を使用すると、将来の機能フラグ を介して、将来の破壊的な変更をオプトインできます。

ignoredRouteFiles

これは、Remixが app/routes ディレクトリを読み取るときに、ファイルに一致させるためのグロブ（minimatchを使用）の配列です。 ファイルが一致した場合、ルートモジュールとして扱われるのではなく、無視されます。 これは、共存させたいCSS/テストファイルを無視する場合に役立ちます。

routes

app/routes にあるファイルシステムの規約を使用して定義されたルートに加えて、カスタムルートを定義するための関数。 両方のルートセットがマージされます。

vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [
    remix({
      routes: async (defineRoutes) => {
        // 非同期処理が必要な場合は、`defineRoutes` を呼び出す前に実行します。
        // 内部で `route` のコールスタックを使用してネストを設定します。
 
        return defineRoutes((route) => {
          // これは、catchallルートの一般的な使用方法です。
          // - 最初の引数は、一致させるReact Routerのパスです。
          // - 2番目は、ルートハンドラの相対的なファイル名です。
          route("/some/path/*", "catchall.tsx");
 
          // ルートをネストしたい場合は、オプションのコールバック引数を使用します。
          route("some/:path", "some/route/file.js", () => {
            // - pathは、親パスに対する相対パスです。
            // - ファイル名は、引き続きappディレクトリに対する相対パスです。
            route("relative/path", "some/other/file");
          });
        });
      },
    }),
  ],
});

serverModuleFormat

サーバービルドの出力形式。 "cjs" または "esm" のいずれかです。 デフォルトは "esm" です。

buildDirectory

プロジェクトルートを基準とした、ビルドディレクトリへのパス。 デフォルトは "build" です。

basename

ルートパスのオプションのベース名。 React Routerの"basename"オプション に渡されます。 これは、アセット パスのベース名とは異なります。 Viteの"base"オプション を介して、ベースパブリックパス を使用して、アセットのパスを設定できます。

buildEnd

完全なRemixビルドが完了した後に呼び出される関数。

manifest

.remix/manifest.json ファイルをビルドディレクトリに書き込むかどうか。 デフォルトは false です。

presets

他のツールやホスティングプロバイダーとの統合を容易にするための [プリセット] の配列。

serverBuildFile

サーバービルドディレクトリに生成されるサーバーファイルの名前。 デフォルトは "index.js" です。

serverBundles

アドレス可能なルートをサーバーバンドル に割り当てるための関数。

サーバーバンドルが有効になっている場合、manifest オプションを有効にすることも検討してください。 これは、ルートとサーバーバンドルのマッピングが含まれているためです。