モノレポでのコード共有

モノレポを使用すると、アプリケーション間で摩擦なくコードを共有できます。そのためには、アプリ間でコードを共有するためのパッケージを構築します。

パッケージとは？

モノレポに関して言えば、「パッケージ」という言葉には二重の意味があります。次のいずれかを指す可能性があります。

1. npmのようなパッケージマネージャーを介して、レジストリからnode_modulesにダウンロードするファイルのセット。
2. アプリケーション間で共有できるコードを含むワークスペース - 通常は/packages内にあります。

この二重の意味は、モノレポの世界に不慣れな人にとっては非常に混乱を招く可能性があります。パッケージのインストールには精通しているでしょうが、ワークスペースにはあまり精通していないかもしれません。

事実は、それらは非常に似ています。パッケージは単に共有コードの一部です。ただし、インストールされたパッケージはnode_modulesにあり、ローカルパッケージはワークスペースにあります。おそらく/packagesフォルダーにあります。

パッケージの構造

各パッケージにはpackage.jsonが含まれています。これらを使用してアプリケーションの依存関係とスクリプトを管理することには慣れているでしょう。

ただし、以前にnameおよびexportsフィールドに気づいていないかもしれません。

{
  // The name of your package
  "name": "my-lib",
 
  // When this package is used, this file is what gets imported
  "exports": {
    ".": "./src/index.ts"
  },
}

これらのフィールドは両方とも、このパッケージがインポートされたときの動作を決定するために重要です。たとえば、index.jsにいくつかのエクスポートがある場合

export const myFunc = () => {
  console.log("Hello!");
};

そして、このファイルをアプリの1つにインポートします。

import { myFunc } from "my-lib";
 
myFunc(); // Hello!

そうすると、アプリケーション内でmy-libフォルダー内のコードを使用できるようになります。

要約すると、各パッケージは、そのpackage.json内でnameとexportsを宣言する必要があります。

次のステップ

これから、2つのスタイルのパッケージを紹介します。それは、内部パッケージと外部パッケージです。

内部パッケージは、それらが格納されているモノレポ内でのみ使用することを目的としています。設定は比較的簡単で、プロジェクトがクローズドソースの場合、最も役立つでしょう。

外部パッケージは、バンドルされてパッケージレジストリに送信されます。これは、デザインシステム、共有ユーティリティライブラリ、またはオープンソースの作業に役立ちます。ただし、バンドル、バージョン管理、公開に関して、より複雑さが増します。