【TypeScript／JavaScript】他のプロジェクトのファイルをimportする

TypeScriptやJavaScriptな開発環境で他のプロジェクトのファイルをimportしたい！

概要

今回の記事では、TypeScriptやJavaScriptな開発環境で他のプロジェクトのファイルをimportする手順を掲載する。

npmとかでライブラリを作るまでもないプライベートな開発環境で別のプロジェクトのコンポーネントを単純にimportしたい！

仕様書

環境

• typescript 5.2.2

手順書

TypeScriptの場合はプロジェクトのルートにあるtsconfig.json（JavaScriptの場合はjsconfig.json）のcompilerOptionsの中でpathsにimportしたいファイルのあるパスを設定できる。

ディレクトリの構成が下記のようになってるとして

current_project
    src
    tsconfig.json
other_project
    src
        common.tsx

current_projectからother_projectのファイルをimportできるようにする例。

{
    "compilerOptions": {
        ...
        "baseUrl": "./src",
        "paths": {
            "@other/*": ["../../other_project/src/*"]
        }
    },
    ...
}

pathsのパスはbaseUrlのパスが起点になる。また、baseUrlの設定がないとpathsの設定は無視される。

importは下記のような感じでできる。

import {*} from '@other/common';

まとめ（感想文）

メインアプリ用のツール的なアプリを別のプロジェクトで作る場合とかに使えるかもね！

ただし、残念ながらCreate React Appで作られたプロジェクトではVSCode上の名前解決には使えるんだけども、ビルド時の名前解決にはこの方法は使えない。めんどい。