본문 바로가기
개발

개발과 빌드

현재 package scripts로 워치 빌드, 검증과 번들을 실행합니다.

Node.js를 설치하고 FLICK 저장소를 내려받습니다. 저장소 폴더에서 의존성을 설치합니다.

npm install

개발

npm run dev

Vite가 watch 모드로 번들을 만들며 content/에 bundle.js와 bundle.css를 갱신합니다.

개발용 확장 프로그램 불러오기

첫 번들이 생성되면 작업 중인 코드를 Chrome에 로드합니다.

  1. Chrome에서 chrome://extensions를 엽니다.
  2. 오른쪽 위 개발자 모드를 켭니다.
  3. 압축해제된 확장 프로그램을 로드를 누릅니다.
  4. manifest.json이 들어 있는 저장소의 content/ 폴더를 선택합니다.

스토어 버전이 설치되어 있다면 개발 중에는 꺼 두세요. 두 버전이 같은 게시글에서 동시에 동작하는 것을 막을 수 있습니다.

코드를 수정한 뒤에는 확장 관리 화면에서 개발용 FLICK을 다시 로드하고, 테스트할 게시글도 새로고침합니다.

프로덕션 빌드

npm run build

현재 build task는 다음 순서로 실행됩니다.

  1. content/manifest.json 버전 증가
  2. TypeScript --noEmit 검사
  3. Vite 프로덕션 번들
  4. manifest와 산출물 참조 검증

단순 확인만 하더라도 build가 버전을 바꾼다는 점에 주의하세요.

코드 정리

npm run lint

Oxlint 수정, Oxfmt 포맷과 package.json 정렬을 함께 실행합니다.