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: {
        /* 有効にする将来のフラグ */
      },
      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) => {
          // これの一般的な用途はキャッチオールルートです。
          // - 最初の引数は、照合するReact Routerパスです
          // - 2番目は、ルートハンドラーの相対ファイル名です
          route("/some/path/*", "catchall.tsx");
 
          // ルートをネストしたい場合は、オプションのコールバック引数を使用します
          route("some/:path", "some/route/file.js", () => {
            // - パスは親パスからの相対パスです
            // - ファイル名は依然として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オプションを有効にすることもできます。