[typescript] ts-node 설치

Yeonjoo Yoo·2022년 2월 3일
4

TIL

목록 보기
7/12
ts-node를 설치하고 node 서버를 실행시키는데, 오류가 발생하고 서버가 켜지지 않았다. 
node 서버에서 ES6 모듈 시스템을 사용하려 추가했던 부분이 문제였다.
문제 해결 방법을 적으려고 한다.

ts-node

ts-node 란?

  • Node.js에서 Typesciprt 를 실행 시키는 도구
  • ts 파일을 미리 컴파일하지 않고 바로 실행 시키는 엔진
  • JIT(Just In Time) 으로 Typescript를 Javascript로 변환하여 실행 가능

설치 방법

  • 명령어
# 전역
npm install -g ts-node
# 지역
npm install --save-dev ts-node
  • 개발에만 사용할 것으로 -D(--save-dev) 옵션으로 설치함
    • 지역 설치 하면 npm script을 통해 사용 가능 (or npx 사용)
    // package.json
    {
      //...
      "scripts": {
        "dev": "ts-node server.js",
      },
      //...
    }

nodemon과 ts-node 같이 쓰기

  • ndemon과 ts-node를 함께 사용 가능
  • 개발 시 ts 파일을 컴파일 하지 않고 바로 실행하고, 수정이 필요한 파일을 수정하여 바로 반영하여 확인 가능
  • 성능 이슈로 개발에만 사용 권고
  • 사용법
# 설치
npm install -D nodemon ts-node
// package.json
{
  //...
  "scripts": {
    "start": "nodemon server.ts",
  },
  //...
}

프로젝트에서 발생한 이슈

개발 환경 (version)

  • node : 16.13.1
  • typescript : 4.5.5
  • nodemon : 2.0.15
  • ts-node : 10.4.0

문제 상황

script로 ts-node server.ts 명령어 실행 시, 오류 발생하고 실행되지 않음
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

  • node.js 에서 ES6 모듈 시스템을 쓰기 위해 package.json 파일에 "type": "module"을 추가한 부분이 문제가 되는 것으로 보임

해결 방법

package.json에 script를 아래와 같이 추가하여 실행

// package.json
{
  //...
  "scripts": {
    "dev": "nodemon --exec node --loader ts-node/esm server.ts",
  },
  //...
}

참고 내용

module in JS

  • CJS (CommonJS)
    • 동기적인 특징으로 서버사이드에 사용하기 용이
    • Node.js는 CommonJS를 사용
    • 모든 파일이 로컬 디스크에 있어 필요할 때 바로 불러올 수 있는 상황을 전제
    • 필요한 모듈이 모두 다운로드할 때까지 아무것도 할 수 없음 (단점)
  • ESM (ECMAScript Module)
    • ES6 부터 자바스크립트 모듈 기능 추가됨
    • ECMAScript에서 지원하는 자바스크립트 공식 모듈 시스템
  • AMD (Asynchronous Module Definition)
    • 비동기적인 특징으로 클라이언트 사이드 개발에 적합
    • 브라우저에 중점
    • 브라우저는 네트워크를 통해 모듈들을 내려받기 때문에 비동기적으로 동작
    • 대표 : RequireJS
  • UMD (Universal Module Definition)
    • CJS와 AMD 모두 사용 가능한 모듈을 만들기 위해 사용
    • AMD와 CJS가 서로 호환되도록 하기 위해 나온 것
    • UMD는 디자인 패턴에 더 가까움

참고
https://github.com/TypeStrong/ts-node
https://github.com/TypeStrong/ts-node/issues/1007
https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/
https://www.higithub.com/TypeStrong/issue/ts-node/1007

profile
to be frontend engineer

0개의 댓글