TypeScriptのexportとimportを使ってコードを共有する方法

2024-04-11

TypeScriptプロジェクト間でコードを共有する方法

方法1：npmパッケージとして公開する

メリット:
- コードを公開して他のプロジェクトで利用可能になる
- バージョン管理が容易
- 依存関係管理が容易
デメリット:
- 設定が複雑
- 公開したコードを保守する必要がある

方法2：モジュールバンドラーを使用する

メリット:
- 複数のファイルを一括に読み込み可能
- コードの分割と再利用が可能
デメリット:
- 設定が必要
- バンドラーの種類によって使い方が異なる

方法3：単純なファイルコピー

メリット:
- 設定が簡単
- コードの共有が迅速
デメリット:

方法4：Gitリポジトリのサブモジュールを使用する

メリット:
- サブモジュールを更新するだけでコードを更新可能
デメリット:

プロジェクトのニーズに合った方法を選択する必要があります。以下は、いくつかの例です。

他のプロジェクトで利用可能なライブラリを作成したい場合は、npmパッケージとして公開するのがおすすめです。
アプリケーション間でコードを共有したい場合は、モジュールバンドラーを使用するのがおすすめです。
小規模なプロジェクトでコードを共有したい場合は、単純なファイルコピーで十分です。
コードをバージョン管理したい場合は、Gitリポジトリのサブモジュールを使用するのがおすすめです。

上記以外にも、TypeScriptプロジェクト間でコードを共有する方法はいくつかあります。詳細は、上記の参考資料を参照してください。

方法1：npmパッケージとして公開する

// index.ts

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

package.json ファイルは次のようになります。

{
  "name": "greeting",
  "version": "1.0.0",
  "main": "index.ts",
  "types": "index.d.ts",
  "scripts": {
    "test": "tsc --noImplicitAny",
    "build": "tsc --declaration --module commonjs",
    "publish": "npm publish"
  },
  "keywords": ["typescript", "greeting"],
  "author": "Your Name",
  "license": "ISC"
}

上記のコマンドを実行すると、greeting という名前のパッケージが作成されます。このパッケージは、他のプロジェクトで npm install greeting コマンドを実行してインストールできます。

方法2：モジュールバンドラーを使用する

以下のコードは、webpack を使用してモジュールバンドラーを作成する例です。

// main.ts

import { greet } from "./greeting";

console.log(greet("John"));

// greeting.ts

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

module.exports = {
  entry: "./main.ts",
  output: {
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      }
    ]
  }
};

上記のコマンドを実行すると、bundle.js という名前のファイルが作成されます。このファイルは、他のプロジェクトで <script> タグを使用して読み込むことができます。

方法3：単純なファイルコピー

以下のコードは、単純なファイルコピーを使用してコードを共有する例です。

// greeting.ts

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

// main.ts

import { greet } from "./greeting";

console.log(greet("John"));