TypeScript プロジェクトにおける tsconfig.json の整合性を保つ： React Script での 'start' コマンド挙動の調整

React Script で 'start' コマンド時に tsconfig.json を上書きしないように設定する方法

Create React App で TypeScript を使用する場合、開発サーバー起動時に 'tsconfig.json' ファイルが上書きされることがあります。これは、プロジェクト固有の設定が失われる可能性があるため問題となる場合があります。

この問題を解決するには、以下の 2 つの方法があります。

方法 1: "react-app-rewired" を使用する

1. react-app-rewired パッケージをインストールします。

npm install react-app-rewired

1. package.json ファイルの scripts プロパティで、react-scripts を react-app-rewired に置き換えます。

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

1. config-overrides.js ファイルを作成し、tsconfig.json ファイルを上書きしないように設定します。

module.exports = function override(config, env) {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        'tsconfig.json': path.resolve(__dirname, './tsconfig.project.json'), // tsconfig.project.jsonへのエイリアスを設定
      }
    }
  };
};

方法 2: "postbuild" スクリプトを使用する

1. package.json ファイルの scripts プロパティに postbuild スクリプトを追加します。

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "postbuild": "cp tsconfig.json tsconfig.build.json" // tsconfig.json を tsconfig.build.json にコピー
  }
}

{
  "scripts": {
    "start": "react-scripts start --config tsconfig.build.json", // tsconfig.build.json を使用するように設定
    "build": "react-scripts build",
    "test": "react-scripts test"
  }
}

どちらの方法を選択するべきか？

• "react-app-rewired" を使用する 方法は、より簡潔で設定が簡単です。
• "postbuild" スクリプトを使用する 方法は、より柔軟性があり、tsconfig.json ファイルへの変更をより細かく制御できます。

• 上記の方法に加えて、tsconfig.json ファイルに include と exclude オプションを使用して、TypeScript コンパイラが処理するファイルを指定することもできます。

例

以下の例は、react-app-rewired を使用して tsconfig.json ファイルを上書きしないように設定する方法を示しています。

# 1. react-app-rewired をインストール
npm install react-app-rewired

# 2. package.json ファイルを編集
package.json:
{
  "name": "my-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "4.0.0", // React Script のバージョンを指定
    "react-app-rewired": "^2.0.0"
  },
  "devDependencies": {
    "typescript": "^4.4.2"
  }
}

# 3. config-overrides.js ファイルを作成
config-overrides.js:
module.exports

{
  "name": "my-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "4.0.0", // React Script のバージョンを指定
    "react-app-rewired": "^2.0.0"
  },
  "devDependencies": {
    "typescript": "^4.4.2"
  }
}

config-overrides.js

const { paths } = require('react-app-rewired'); // require normalized overrides
const overrides = require('react-app-rewired/config-overrides');
const config = require(paths.resolve('config/tsconfig.project.json')); // tsconfig.project.jsonへのパスを指定

module.exports = function override(config, env) {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        'tsconfig.json': paths.resolve('config/tsconfig.project.json'), // tsconfig.project.jsonへのエイリアスを設定
      }
    }
  };
};

tsconfig.project.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "objectLiteralShorthand": true,
    "arrowFunction": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "jsx": "react",
    "sourceMaps": true,
    "declaration": true,
    "allowJsxSyntaxInPostfixExpressions": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"] // src ディレクトリへのエイリアスを設定
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

tsconfig.build.json

{
  "extends": "./tsconfig.project.json",
  "compilerOptions": {
    "skipLibCheck": true
  }
}

使い方

1. 上記のコードをプロジェクトのルートディレクトリに作成します。

{
  "scripts": {
    "start": "react-app-rewired start --config tsconfig.build.json",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

1. 開発サーバーを起動します。

npm start

1. npm-run-all パッケージをインストールします。

npm install npm-run-all

{
  "scripts": {
    "start": "npm-run-all --parallel copy-tsconfig start-app",
    "copy-tsconfig": "cp tsconfig.json tsconfig.build.json",
    "start-app": "react-scripts start --config tsconfig.build.json"
  }
}

このスクリプトは、以下のことを順番に実行します。

1. tsconfig.json ファイルを tsconfig.build.json にコピーします。
2. react-scripts start コマンドを tsconfig.build.json ファイルを使用して実行します。

方法 4: "concurrently" を使用する

1. concurrently パッケージをインストールします。

npm install concurrently

{
  "scripts": {
    "start": "concurrently \"cp tsconfig.json tsconfig.build.json\" \"react-scripts start --config tsconfig.build.json\""
  }
}

1. cp tsconfig.json tsconfig.build.json
2. react-scripts start --config tsconfig.build.json

方法 5: "husky" と "postinstall" スクリプトを使用する

1. husky と cross-env パッケージをインストールします。

npm install husky cross-env

1. package.json ファイルに以下のスクリプトを追加します。

{
  "husky": {
    "postinstall": "npx cross-env cp tsconfig.json tsconfig.build.json"
  }
}

このスクリプトは、npm install コマンドを実行するたびに tsconfig.json ファイルを tsconfig.build.json にコピーします。

どの方法を選択するかは、個人の好みとプロジェクトのニーズによって異なります。

• 方法 1 は、最も簡潔で設定が簡単です。
• 方法 2 は、柔軟性があり、tsconfig.json ファイルへの変更をより細かく制御できます。
• 方法 3 と 方法 4 は、npm-run-all または concurrently を使用して、複数のタスクを同時に実行したい場合に役立ちます。
• 方法 5 は、npm install コマンドを実行するたびに tsconfig.json ファイルを自動的にコピーしたい場合に役立ちます。

注意事項

• 上記の方法を使用する前に、必ずプロジェクトの tsconfig.json ファイルをバックアップしてください。
• これらの方法は、Create React App バージョン 4 以降でのみ動作します。