[Typescript/타입스크립트] path alias로 경로 깔끔하게 만들기 (build 이후 can not find module)

0. 목차

1. 개요

2. path alias 사용하기

3. javascript 에서 적용

1. 개요

프로젝트를 진행하다 보면 디렉토리 구조는 점점 복잡해지고
import 구문에 적힌 경로들은 무수히 많은 ../ 들을 포함하게 된다.

근데 이거 꼴보기 싫다.

 

typescript 에서 type alias를 이용하여 경로들을 깔끔하게 재설정 해주고,
build이후에 js 파일 실행시 터지는 can not find module 에러 까지 처리해보자.

2. path alias 사용하기

생각보다 매우 간단하다.

 

// src/testPath/test.ts

export const number: number = 10; 

 

 

// src/index.ts
import { number } from './testPath/test';

console.log(number);

 

이렇게 문서가 두개가 있을때, index 에서 number 를 import 해온다.

 

지금은 디렉토리 구조가 간단하지만 프로젝트가 진행되면 될 수록,
디렉토리 구조는 복잡해지고
import 구문은 더러워진다.

 

이걸 해결하기 위해 path alias 를 사용할 수 있다.

 

우선 라이브러리를 하나 설치해야한다.

 

npm i -D tsconfig-paths

 

그리고 tsconfig.json 파일을 만져줘야 한다.

 

{
  "compilerOptions": {
    "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
    "paths": {
      "@testPath/*": ["src/testPath/*"],
    }
  },
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  }
}

 

이렇게 작성해준 뒤에

ts-node 로 index.ts를 실행 시키면 아주 잘 작동된다.

 

3. javascript 에서 적용

문제는 build 이후이다.

tsc --build 이후에
index.js 파일을 실행시키면

 

Error: Cannot find module '@testPath/test'

이런 에러가 발생한다.

 

index.js 파일을 확인해보면

 

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const test_1 = require("@testPath/test");
console.log(test_1.number);

 

요렇게 생겼는데, require 의 주소가 @testPath/test 로 되어있다.

 

지금은 하나니까 뭐 그냥 수정해주면 되지 라고 생각 할 수 있지만,
import 가 많다면 굉장히 번거로운 일이 될거다.

 

그래서 이 문제를 해결 하기 위해, 또 라이브러리를 하나 설치해줘야 한다.

 

npm install module-alias

 

위 라이브러리를 설치한 뒤에,
이번엔 package.json 파일에 설정을 추가해줘야 한다.

 

  "_moduleAliases": {
    "@testPath": "dist/testPath"
  },

 

dependencies 밑에다가 추가해주면 된다.

그리고 index.ts 파일에

 

import 'module-alias/register';

 

이 한줄을 추가해준뒤에 다시 build를 해주자.

 

이 작업 이후에 다시 index.js를 실행 해보면,
정상적으로 잘 동작하는걸 확인할 수 있다.