매번 yarn build 하지 않고 자동 빌드 및 재시작하는 방법

🚀 Yarn을 사용한 TypeScript 프로젝트의 자동 빌드 및 재시작 설정 방법

TypeScript 프로젝트에서 파일 변경 시 자동으로 빌드하고 Electron 애플리케이션을 재시작하려면, Nodemon과 TypeScript 컴파일러(tsc)를 활용할 수 있습니다.

1. nodemon.json 설정

Nodemon 설정 파일(nodemon.json)을 생성하고, TypeScript 파일의 변경을 감시하도록 설정합니다.

{   "watch": ["src/**/*.ts"],   "ext": "ts",   "exec": "yarn build && electron ." } 

• watch: 감시할 파일의 경로 및 패턴을 지정합니다.
• ext: 감시할 파일의 확장자를 지정합니다.
• exec: 파일 변경 시 실행할 명령어입니다. 여기서는 yarn build로 TypeScript 파일을 컴파일하고, electron .으로 애플리케이션을 실행합니다.

2. package.json 스크립트 설정

package.json에 필요한 스크립트를 추가합니다.

{   "scripts": {     "build": "tsc",     "start": "nodemon"   },   // 기타 설정… } 

• build: TypeScript 컴파일러(tsc)를 사용하여 프로젝트를 빌드합니다.
• start: nodemon을 실행하여 파일 변경 감지 및 자동 빌드 및 재시작을 합니다.

3. tsconfig.json 설정

tsconfig.json 파일에서 TypeScript 컴파일러 설정을 확인합니다. outDir을 설정하여 컴파일된 파일이 저장될 위치를 지정합니다.

{   "compilerOptions": {     "outDir": "./dist",     // 기타 옵션…   }   // 기타 설정… } 

4. 프로젝트 실행

이제 yarn start 명령어로 프로젝트를 실행하면, src 디렉토리 내 TypeScript 파일이 변경될 때마다 자동으로 빌드되고 Electron 애플리케이션이 재시작됩니다.

yarn start 

이 설정을 통해 개발 과정을 더욱 효율적으로 만들 수 있으며, 변경사항이 실시간으로 반영되어 빠른 피드백을 얻을 수 있습니다.

레퍼런스

• Announcing TypeScript support in Electron | Electron