이 글은 <타입스크립트 환경 범위 통합> 이라는 내 블로그에도 기록되어 있다. 추후, 저 글을 보고 혼동하지 않기 위해서 붙여놓았다.
디렉토리를 수정한 이유는 다음과 같다.
우선,
client
와 server
에서 같은 타입을 공유해야한다.따라서 한쪽에서 필요한 type이 바뀌면 자동으로 다른쪽에서 오류를 뱉어야 컴파일 단계에서 오류를 잡을 수 있기 때문이다.
기존 설정대로라면, 각자가 필요한 모듈을 하나의 root directory에서 갖고 있기 때문에 배포시 문제가 생긴다.
예를 들어, server를 ec2에 배포하고 싶다면 root directory를 모두 올려서 개중 서버만 실행시켜야 하는 바보같은 일이 벌어진다.
따라서 위 두 가지를 충족시키기 위하여 다음과 같은 일이 필요했다.
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
{
"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/
디렉토리 안에 있는 파일들을 절대 경로로 import 할 수 있게 된다.즉, 아래와 같은 방식으로 사용할 수 있다.
// src/server/src/controllers/exercise.ts import * as Type from '@shared/Types';
그렇지 않다면 아래와 같이 써야한다.
import * as Type from '../../shared/Types'
{
"extends":"../../tsconfig.json",
"compilerOptions": {
"emitDecoratorMetadata": true, //typeORM을 위해
"experimentalDecorators": true, //typeORM을 위해
"outDir": "dist",
}
}
- 상위에 있는 tsconfig.json [1]의 설정을 모두 상속받되, typeORM을 위해 필요한 것을 설정하였다.
- outDir를 설정해서 tsc로 컴파일 할 때, server 디렉토리 내에 dist 폴더에 모아진다.
다른 글에서 webpack 설정과 함께!