[Node.js, TypeScript] ES Moudles 사용 시 import 문 확장자 제거하여 사용 하는 방법

- Ndoe.js는 기본적을 Common.js를 사용하여 문서를 불러올 때 require("")를 사용해야 하지만 ES Moudle로 전환하면 개발자들에게 익숙한 import를 사용할 수 있다. 

- 하지만, Esmoudle을 사용할 때, 모듈 내부에 있는 파일을 import 하고 싶다면 확장자를 mjs 붙여주거나 package.json에서 type:moudle을 입력해 주고 확장자에 js를 붙여줘야 한다.

 

- 이런 번거로움을 해결하기 위한 방법을 포스팅한다.

 

1.  node-modules는 컴파일하지 않을 것이기 때문에 제외를 해준다.

//tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "outDir": "./dist",
    "rootDir": ".",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["**/*"],
  "exclude": ["./node_modules"]
}

 

2. nodemon을 사용하여 ts파일들을 찾고 확장자를 제거해 주는 기능을 사용할 것 이기 때문에 nodemon을 설치하여 준다.

npm install nodemon --save-dev

 

 

- 그 후 package.json의 start script를 다음과 같이 입력해 준다.

"start": "cd dist && nodemon --ignore db/ --watch '*.ts' --exec node --experimental-modules --es-module-specifier-resolution=node --loader ts-node/esm app.js"

- 명령어 설명:

 

1) cd dist : 배포용 파일들이 빌드돼 있는 폴더로 이동(배포할게 아니라면 생략해도 좋다.)

 

2) nodemon: nodemon을 사용

 

3) --ignore db/ : db폴더의 파일들은 실행하지 않겠다.(db 폴더는 노출되면 안 되는 파일이기 때문에 컴파일하지 않는다.)

 

4) --watch "*ts" --exec :파일의 확장자가. ts인 모든 파일을 찾고 조건에 해당되는 파일만 --exec 뒤의 명령어를 실행한다. 

 

5) node --experimental-modules --es-module-specifier-resolution=node: es 모듈을 사용할 수 있도록 해주는 플래그인 듯하다. (정확한 내용은 모르겠지만..)

 

6) --loader ts-node/esm: nodemon에서 ts-node를 사용할 수 있게 해주는 플러그인인 듯하다.

 

참고 내용

https://stackoverflow.com/questions/63807613/running-node-with-loader-ts-node-esm-js-requires-imports-to-have-the-js-extensi

running node with loader ts-node/esm.js requires imports to have the .js extension