Vanilla TypeScript + Web Front

 

npm init -y

 

npm i -D typescript

npm i -D copyfiles

npm i -D live-server

 

npx tsc --init

 

프로젝트 구조

 

tsconfig.json

 

package.json

 

index.html

 

index.ts

 

style.css

 

index.html 파일의 태그 경로는 후에 빌드될 파일의 경로로 작성.

 

빌드: npm run build

 

빌드 후 프로젝트 구조

 

실행: npx live-server build

 

개발 중,

- ts 파일은 npx tsc --watch를 입력해 src 아래 변경사항을 실시간으로 빌드 디렉터리에 반영해 확인한다.

- html / css 파일은 지금 복잡하고 무거운 라이브러리를 쓰고 싶지 않은 것이기 때문에 어쩔 수 없이 build 아래 파일을 직접 수정해서 실시간으로 확인해야 한다. 물론 그러고 나서 수정사항은 다시 src 아래로 덮어씌워줘야 한다. 

 

개발이 완전히 끝나면 빌드 폴더만 배포할 곳에 옮겨서 npm install을 입력해 의존성 설치 후 실행하면 된다.

 

 

https://github.com/Hyeonnam-J/assets.git

GitHub - Hyeonnam-J/assets