Typescript transpile CSS, etc..

Transpile

- 'tsc' 명령어를 통한  트랜스파일 ( JS로 변환) 은 TS, TSX 파일만 가능 하다.

 

하지만 이번에 맡은 Task에서, 특정 transpile 된 ts, tsx과 함께 CSS 또한 import 될 필요가 있었다.

- 직접 적으로 해당 CSS 파일을 transpile 된 ts, tsx과 함께 같은 directory (폴더)에 넣어 주면 되지만, 매번 이러한 방법은 불편하기 때문에 'tsc'라는 명령어와 함께 CSS 파일 또한 transpile 된 파일들과 묶어지는 방법을 찾아봤다. 

 

1. 두 가지 node module package를 설치해준다

 a.

npm install --save-dev rimraf 

 

b.

npm install --save-dev copyfiles

2. 특정 스크립트 명령어를 통하여 해당 node module 이 실행되게끔 해준다

"scripts": {
    "clean": "rimraf dist/",// 'rimraf' 라는 명령어를 통해 dist/ 디렉토리를 초기화 시켜준다.
    "copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css dist/", // src 디렉토리 내에 있는 모든 css, html 파일을 dist 디렉토리로 copy & paste 한다
    "build": "yarn clean && tsc && yarn copy-files" // dist 디렉토리를 초기화 & transpile 실행 & 나머지 html, css ( 트랜스파일 안된 ) 파일들을 copy & paste
},