Turborepoによるモノレポ

私はあなたのローカルと継続的な統合ビルドで高性能ビルドシステムのPNPMとMonorepo TurborePoを使用する方法をお教えします.
まず、ルートディレクトリを作成する必要があります.
それからNPMパッケージJSONを生成します.pnpm init -yここでPNPMワークスペースを作成する必要があります.YAMLファイル.
PNPMワークスペース.YAMLはワークスペースのルートを定義し、ワークスペースからディレクトリを含める/除外できます.
我々の例では、我々は2つのプロジェクトが最初にリミックスアプリケーションとVITEを介して他のlibです.

packages:
  - application
  - lib

今、我々はTurborepoを追加することができますpnpm i -Dw turbo- wフラグはワークスペース(または--ワークスペースのルート)です.
また、PNPMをrootにインストールする必要があります.
ルートパッケージJSONファイルにターボセクションを追加する必要があります.
これはパイプラインの定義です.
キャッシュを設定することができますし、どのようにタスクは、ビルドLINTのテストのようなNPMパッケージのスクリプトに応じて関連付けられている.

"turbo": {
    "pipeline": {
      "dev": {
        "cache": false
      },
      "build": {
        "dependsOn": [
          "^build"
        ],
        "outputs": [
          "build/**",
          "dist/**"
        ]
      }
    }
  }

また、我々はmonorepoのNPMスクリプトを追加することができます.

"scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  }

この設定の後、2つのフォルダを作成します.
アプリケーションとlib.
ランpnpx init vite@latestフォルダをlibに設定します.
ランpnpx create-remix@latestアプリケーションのフォルダーを設定します.
その後、ルートフォルダに移動しpnpm i -r両方のプロジェクトにnodeoundモジュールをインストールします.
我々は、我々はリミックスアプリケーション内で使用できるライブラリを作成するためにVITEを使用することができます.
内部vite.config.jsこのセクションを追加します.
詳細については、「プロダクションライブラリモード」「vite」を参照ください.

build: {
    lib: {
      entry: "./src/index.js",
      formats: ["cjs", "es"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
    },
  },
}

簡単なコンポーネントを作成できます.

次にインデックスを作成します.srcフォルダ内のjsファイル.export { default as Card } from "./components/Card"Vite libのパッケージJSONの中で、我々は追加する必要があります

  "main": "./dist/index.cjs.js",
  "module": "./dist/index.esm.js",

最後に、実行してビルドする必要がありますpnpm run buildリミックスアプリケーション内のこのコンポーネントを使用するため.
リミックスのパッケージJSONに行き、依存関係プロパティの中にこの行を追加します"lib": "workspace:*".
その後、monorepoとのルートに行くpnpm i
Monorepo側のすべてのアプリケーションを実行するためにpnpm run dev
すべてのキャッシュとmonorepoで動作します.
迅速かつ迅速に高速であなたのアプリケーションを公開することができます.
ギタブへのリンク
https://github.com/yanirmanor/mono-turbo-example