[node.js] 타입스크립트 파일을 컴파일 후 자바스크립트로 실행하기

서론

여태까지 진행한 예제들은 타입스크립트 기반으로 개발 환경을 구성하고 ts-node 모듈을 이용하여 직접 ts파일을 빌드하여 실행했다.

이번에는 ts파일을 직접 실행하는 것이 아니라 ts 파일을 컴파일하여 생성된 js파일을 가지고 실행하는 것을 알아보고자 한다. 실제 프로젝트에서 런타임을 할 때에는 대부분의 경우가 javascript 파일을 실행하기 때문이다.

tsconfig.json 수정하기

{
   "compilerOptions": {
      "lib": [
         "es5",
         "es6"
      ],
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "outDir": "./build", // 이전에 정의 안했다면 정의하기
      "rootDir": "./src", // 새로 추가된 부분
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "sourceMap": true,
      "esModuleInterop": true,
   }
}

• outDir : 컴파일된 파일들 경로 지정
  (최상위 디렉토리 밑에 build라는 이름의 디렉토리가 생성된다.)

• rootDir : 컴파일할 대상의 최상위(Root) 디렉토리 지정
  (해당 디렉토리 구조에 맞춰서 컴파일된 파일들이 저장되는 outDir 디렉토리 안의 구조도 똑같이 만들어진다.)

build 디렉토리 생성하기 (선택)

최상위 디렉토리 안에 build 라는 이름의 폴더를 생성한다.
해당 디렉토리에는 컴파일된 여러 폴더와 파일들이 저장된다.

typeorm-example
├── build // 새로 추가된 부분
├── src
│   ├── entity
│   │   └── User.ts
│   ├── migration
│   └── index.ts
...

이런 식으로 디렉토리 구조가 구성된다.

물론 미리 만들지 않아도 빌드하면 알아서 디렉토리가 생성되므로 넘어가도 된다.

package.json 파일 수정하기

해당 파일의 scripts 부분을 다음과 같이 수정했다.

"scripts": {
      "start": "ts-node src/index.ts",
      "dev": "node build/index.js", // js파일로 실행하기
      "build": "tsc -p .", // ts파일 컴파일하기
      "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js"
   }

• npm run build 명령어를 이용하면 ts파일을 컴파일 한다.
• npm run dev 명령어는 컴파일 후 생성된 index.js파일을 실행한다.

원래 최종 완성된 프로젝트의 경우 npm run start가 .js 파일을 실행하는 것이고 npm run dev의 경우가 .ts파일을 실행하는 것인데 이번 예시에서는 정상적으로 컴파일하고 실행되는지만을 확인하기 위한 것이므로 위와 같이 임시로 정의했다.

"scripts": {
      "start": "node build/index.js",
      "dev": "ts-node src/index.ts",
      "build": "tsc -p .",
      "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js"
   }

즉 실제 프로젝트에서는 package.json 구조를 위와 같이 정의하고
npm run build 한 뒤 npm run start 를 해야한다.

이제 npm run build 명령어로 컴파일을 해보자

결과 확인하기 : 타입스크립트 컴파일

컴파일 완료된 후 build 디렉토리를 살펴보면 위와 같은 결과를 얻을 수 있다.
src 디렉토리에서 정의된 구조와 동일한 것을 확인할 수 있다.

결과 확인하기 : 자바스크립트 파일 실행

이제 npm run dev 명령어를 통해 자바스크립트 기반으로 파일을 실행했다. 서버는 실행이 되었는데 데이터베이스에 엔터티를 정의하는 부분에서 오류가 나는 것 같았다.

Trouble Shooting 1

https://stackoverflow.com/questions/59435293/typeorm-entity-in-nestjs-cannot-use-import-statement-outside-a-module

SyntaxError: Cannot use import statement outside a module 에러를 구글링하여 스택오버플로우에서 해당 에러에 대한 해결 방안을 다루는 내용이 있길래 똑같이 했는데 안에 정의된 여러 해결 방법들을 적용해도 에러가 해결되지 않았다..

Trouble Shooting 2

그래서 정의된 Entity 디렉토리에 정의된 User.ts 모듈을 불러올 수가 없다면 DB Connection에 문제가 있을 수도 있다고 생각헀다.

그래서 ormconfig.json에 정의된 DB 정보를 index.ts에 직접 정의하여 디비 연결을 해보기로 했다.

import {createConnection, ConnectionOptions} from "typeorm";

const dbInfo: ConnectionOptions = {
    "type": "mysql",
    "host": "localhost",
    "port": 3306,
    "username": "",
    "password": "",
    "database": "",
    "synchronize": true,
    "logging": false,
}


app.listen(3000, () => {
    console.log('Starting Server with 3000 port');
	
    createConnection(dbInfo)
    .then(async connection => {
        console.log("디비 연결 성공");
    
    }).catch(error => console.log(error));

});

이렇게 데이터베이스 연결 정보를 담고 있는 dbInfo 변수를 만들어 createConnection 인자로 넘겨주었다.

그리고 다시 npm run build를 해서 파일을 컴파일하고 npm run dev를 통해서 자바스크립트 파일을 실행시켜보았다.

해결이 되었다. 👏👏