[typescript] build시 다른 폴더에도 복사 방법

이번에 typescript를 공부를 시작하면서 계속해서 삽질중이다.

 

강의를 들으며 문법과 빌드 방법 그리고 typescript를 통해서 얻을 수 있는 이점들을 배웠다.

 

그냥 느낀점은 왜 javascript만을 쓰느냐! 이다. typescript는 필수인게 아닐까? 하는 생각이 강하게 박히는 계기가 되었다.

 

일단 일반적인 html에서 <script src="common.js"></script>를 써서 작업을 하게 되는데 이때 ts파일이 js로 빌드되어 나오는 폴더에 html파일이 있고 src로 연결을 해주면 사실 추가 설정이 필요 없다. 그런데 나는 다른 폴더에 html파일을 두고 싶었고, js파일도 같은 폴더에 두고 싶었다. 그래서 찾다보니 빌드 명령어에 조금만 추가 해주면 되었다.

 

package.json  : 스크립트 설정

tsconfig.json : 타입스크립트 설정 

build 폴더 : 빌드 후 파일 생성되는 폴더

public 폴더 : html파일과 빌드된 파일을 복사한 폴더

 

일반적인 폴더 구성이고 public폴더에 index.html로 작업중이었고 common.js파일을 연결해서 사용중이다. 

 

package.json의 scripts 부분에만 다음과 같이 내용을 추가하면된다.

 

{
  "name": "html",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc && npm run build:cp-public",//해당 내용 추가
    "build:cp-public": "copy build public"//해당 내용 추가
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "nodemon": "^2.0.19"
  }
}

 

간단히 설명하자면 npm run build 시 tsc와 npm run bulild:cp-public도 실행된다.

그러면 아래에 추가로 스크립트 정의된 build:cp-public의 내용이 실행되어  build폴더에 있는 내용이 public폴더에 복사된다.   

*copy 명령어는 윈도우 기준이므로 사용중인 운영체제에 맞게 변경이 필요하다.