문제 상황
/
tsconfig.json
package.json
data/
myData.json
src/
index.ts
...
-
위와 같은 프로젝트 구조에서 index.ts 코드가 아래와 같을 경우 빌드 디렉터리의 구조가 이상하게 바뀐다.
import myData from '../myData.json'; console.log(JSON.stringify(myData));
/ dist/ index.js data/ myData.json src/ index.js
-
기대하는 빌드 디렉터리 구조는 아래와 같다.
/ dist/ index.js
- 위처럼 소스 디렉터리 밖의 코드, json 파일을 import 하면 빌드 디렉터리의 구조가 기대와 다르게 나온다. → npm package 를 빌드하는 경우라면 패키지가 제대로 동작하지 않을 수 있다.
myData.json
파일을data
와src
디렉터리 내부 두 곳에 위치시키는 방법은 데이터의 일관성을 유지하기가 어렵다.fs
모듈로 읽어와서 처리할 수도 있지만 코드 intellisense 가 안되는 아쉬움이 있다.
해결 방법
-
symbolic link 기능을 활용하여 소스 디렉터리 내부에서 외부 모듈을 가져오도록 한다.
mkdir -p src/res ln -s ../../data/myData.json src/res/myData.json
-
이처럼 소스 디렉터리 (
src/
) 외부의 파일을 소스 디렉터리 내부의 symlink 로 연결하면 빌드 디렉터리의 구조가 변하지 않는다.