[プロジェクト]プロジェクト構造の変更🔥

この文章は私のブログ「統合タイプスクリプト環境範囲」にも記録されています.その後、その文章を読んで紛らわないように貼り付けました.
ディレクトリを変更する理由は次のとおりです.
まず、

1.クライアントとサーバは同じタイプを共有する必要があります。

したがって、一方が必要なtypeを変更した場合、コンパイルフェーズでエラーをキャプチャするには、他方からエラーを自動的に投げ出す必要があります.

2.クライアントとサーバの両方に必要なモジュールが異なります。

既存の設定に従うと、デプロイ時に問題が発生します.誰もがルートディレクトリに必要なモジュールを持っているためです.
たとえば、ec 2にサーバを配備したい場合は、すべてのルートディレクトリを1つのサーバにアップロードして実行する必要があるという愚かなことが起こります.
そのため、以上の2つの条件を満たすために、以下の作業が必要です.

各client/serverにtsconfigを構成します.jsonを持っているのでtypescriptの働き方を独立して割り当てなければなりません.

誰もがpackage.jsonを持つべきだ.そのため,必要なモジュールを別々に管理する必要がある.

これによりフォルダ構造が再変更されました.

wo
├─ src
│  ├─ client
│  │  ├─ src
│  │  │  └─ ts.ts
│  │  └─ tsconfig.json [3]
│  ├─ server
│  │  ├─ .gitignore
│  │  ├─ ormconfig.js
│  │  ├─ package.json
│  │  ├─ src
│  │  │  ├─ app.ts
│  │  │  ├─ controllers
│  │  │  ├─ entity
│  │  │  ├─ factories
│  │  │  ├─ routes
│  │  │  ├─ seeds
│  │  │  ├─ server.ts
│  │  │  └─ utils
│  │  ├─ tsconfig.json [2]
│  │  └─ yarn.lock
│  └─ shared
│     └─ Types.ts
├─ tsconfig.json [1]
└─ yarn.lock

tsconfig.json [1]

{
    "compilerOptions": {
      "target": "ES5", 
      "module": "commonjs", 
      "moduleResolution": "node",
      "strict": true, 
      "esModuleInterop": true, 
      "skipLibCheck": true, 
      "forceConsistentCasingInFileNames": true,
      "baseUrl": ".", 
      "paths": {
        "@shared/*" : ["src/shared/*"]
      }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
} 

paths
`src/shared/ディレクトリのファイルは、絶対パスとしてインポートできます.

つまり、以下の方法で使用できます.

 // src/server/src/controllers/exercise.ts
import * as Type from '@shared/Types';

そうでなければ、以下のようにします.

import * as Type from '../../shared/Types'

tsconfig.json [2]

{
    "extends":"../../tsconfig.json",
    
    "compilerOptions": {
      "emitDecoratorMetadata": true, //typeORM을 위해
      "experimentalDecorators": true, //typeORM을 위해
      "outDir": "dist",
    }
  
}

の上にあるtsconfig.json[1]の設定はすべて継承されますが、typeORMに必要なものが設定されています.

outDirを設定してtscにコンパイルすると、サーバディレクトリ内でdistフォルダに集約されます.

tsconfig.json [3]

別の記事では、webpack設定と一緒に!