tsc-watch 사용하기

https://www.npmjs.com/package/tsc-watch

tsc-watch

 

단도직입적으로 tsc-watch를 왜 사용하느냐 => nodemon과 같이 자동 실행을 해주기 때문이다.

 

---

 

npm install tsc-watch -D

package.json에 tsc-watch가 설치된 것을 확인한 후 실습을 위해 dist, src 폴더를 생성한다. (굳이 이 이름일 필요는 없다)

모든 ts는 src에 넣고 dist를 .gitignore에 추가해주자. 기존에 컴파일된 js와 js.map은 삭제하자.

 

package.json의 start 부분을 다음과 같이 수정해준다.

--onSuccess의 의미는 컴파일을 성공했을 때만 그 이하의 내용을 실행하라는 의미가 있다.

즉, 아래 scripts는 tsc-watch를 실행하되 성공하면 node로 dies/index.js를 실행하라는 것이다.

{
  "name": "blockchiain-typescript",
  "version": "1.0.0",
  "description": "making blockchain with typescript",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "tsc-watch --onSuccess \" node dist/index.js\""
  },
  "devDependencies": {
    "tsc-watch": "^4.2.3"
  }
}

 

 

tsconfig.js를 다음과 같이 수정한다. include를 수정하고 outDir를 추가했다. 앞서 script에서 dist 내부에 있는 폴더의 index.js를 node로 실행하라고 작성했으니 그대로 해주자.

 

ts가 컴파일된 결과값은 outDir에서 지정한대로 dist 폴더에 저장될 것이다.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES2015",
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

 

여기서 "src/**/*"의 의미는 src 폴더 내의 모든 파일과 폴더라는 의미이다. 

src/**/* . takes all the files inside of all the folders doesn't matter how deep, src/one/two/three/five.js will be included. src/* means all the files inside of src but not inside of folders and not deep.

 

npm start

이 결과 src에 있는 ts가 컴파일되고 컴파일된 결과물은 dist에 저장된다.