node js 로 서버를 개발하면서 path alias를 적용하려고 했는데, 구글링 결과 module-alias 를 많이 사용하는 듯 하여 적용해 보려고 했다.

그런데.. 찾아보니..module-alias는 ES Module에는 잘 적용되지 않는다(?) 라는 검색결과를 보았다. (실제로 삽질을 많이 했는데 적용이 잘 안됐다..)

이를 해결하기 위해 나는 babel을 설치하여 ES Module실행 및 path alias 설정을 하는 방법을 택했다.

1. babel 설치

우선 package.json 내 {"type": "module"}을 지운다. (지우고 나면 서버를 실행할 때 import/export 구문을 실행할 수 없다는 에러가 뜰 것이다.)
그리고 아래 명령어를 통해 필요한 패키지를 설치한다.
각 패키지를 설치하는 이유는 여기서 확인하면 된다!
npm i -D --save @babel/core @babel/cli @babel/preset-env @babel/node

그리고 나서는 root 디렉토리 아래 .babelrc 파일을 하나 생성하여 아래의 내용을 작성해준다.

// .babelrc
{
  "presets": ["@babel/env"],
}

다시 package.json 으로 가서 scripts 를 수정해준다. (--exec babel-node 추가)

// package.json
"scripts": {
    "start": "nodemon --exec babel-node index.js",
  },

서버를 재실행하면 오류없이 ES Module로 작성된 코드가 잘 실행되는 것을 볼 수 있을 것이다!

2. Path-alias 적용

이제 path alias를 적용해보자.

babel로 별칭 경로를 설정하기 위해 npm i -D --save babel-plugin-module-resolver 를 설치해준다. (참고)

그 후 .babelrc 파일을 다음과 같이 수정한다. (alias 부분은 원하는대로 설정하면 된다.)

// .babelrc

{
  "presets": ["@babel/env"],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@": "./src"
        }
      }
    ]
  ]
}

이제 모든 설정이 끝났다.

아무 파일로 가서 import할 때 @/routes/indexRouter 이런 식으로 alias를 사용해보자.

잘 실행될 것이다.

추가적으로 현재 웹스톰을 사용하여 개발하고 있는데 alias를 적용한 부분에 마치 에러처럼 밑줄이 그어져 있고, alt + enter 를 사용해서 모듈을 제대로 import 하지 못하는 문제가 있었다.

이를 해결하기 위해 root 디렉토리 아래에 webstorm.config.js 파일을 추가로 작성해주었다.

// webstorm.config.js
System.config({
    "paths": {
        "@/*": "./src/*",
    }
});

이렇게 하니 에러 밑줄도 사라지고 alt + enter로 import도 잘 되었다!!!