2. Vue + 크롬 확장프로그램 구현: Vite로 프로젝트 구성

Vite로 프로젝트 새로 구성하기

 

이전 게시글에서 만들었던 프로젝트는 삭제하고

vue와 vite로 프로젝트를 다시 구성해보겠습니다.

아 manifest.json 파일은 나중에 사용할거니 삭제하지 마세요!

vite는 웹팩 등 여러 복잡한 설정들을 대신 해주는 툴이라고 보면 됩니다.

들어본 적은 있는데 vue와 함께 사용할 수 있는지는 전혀 몰랐습니다.

우선 프로젝트를 진행한 후에 vite가 어떤 건지 자세히 찾아봐야겠습니다.

 

궁금하신 분들은 아래 공식문서를 참고하시면 될 것 같습니다.

참고로 '빗'이라고 읽으면 됩니다.

 

 

Vite

 

 

 

프로젝트 생성 명령어입니다.

npm 버전에 따라 명령어가 다르고, 명령어가 업데이트 되는 경우도 있기 때문에 

오류가 난다면 본인의 npm 버전을 확인하거나

공식문서의 명령어와 일치하는지 확인해보는게 좋습니다.

뭐든 공식문서가 가장 정확할 수 밖에 없습니다 -!

// npm 7+

// 프로젝트 이름 명시하고 싶은 경우
npm create vite@latest my-vue-app -- --template vue


// 바로 생성
npm create vite@latest

내 실습 화면

 

 

 

생성한 프로젝트 경로로 이동한 후, 

npm i 명령어로 필요한 패키지들을 설치해줍니다.

cd quickchive-extension
npm i

 

 

 

 

개발 서버를 열어줍니다.

신기하게 5173포트에서 열립니다.

처음 보는 번호네요.

npm run dev

 

 

 

 

 

package.json파일을 보니 vue3네요..!

저희 프로젝트는 vue2로 개발하였는데 

어차피 확장프로그램은 별도로 개발해야하니까 vue3로 해봐야겠습니다..!

 

 

 

 

 

 

Vite로 확장프로그램 실행하기

 

저번 게시글에서 생성했던 manifest.json 파일을 public 폴더에 넣어줍니다.

 

 

 

 

그리고 나서 빌드를 하면 확장프로그램으로 작동합니다!

이유는 vite가 프로젝트 빌드 시에

폴더에 있는 파일들의 코드는 건드리지 않고

바로 'dist' 폴더로 옮겨주기 때문입니다.

npm run build

 

 

 

 

지난 게시글에서 했던 대로 chrome://extensions/ 에 접속하여

우리가 만든 프로젝트를 확장프로그램으로 실행해봅니다.

아주 잘 실행됩니다.

 

 

 

 

지난 글 참고

1. Vue + 크롬 확장프로그램 구현: 개발환경 세팅 및 manifest 설정

 

 

 

 

우리가 개발한 화면을 확인하려면 매번 빌드를 해야만 하는데

상당히 시간 낭비입니다.

package.json 의 script.build를 아래처럼 수정해줍니다.

이제 npm run dev 대신 npm run build 명령어를 실행하면 

개발 서버처럼 동작하되 코드를 수정할 때마다 빌드를 하게 됩니다.

 

 

 

// package.json

{
  "name": "quickchive-extension",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build --watch",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}

 

 

 

정리하면

1. 평소 개발할 때: npm run dev -> watch모드로 빌드
2. 완성되어 배포할 때: npm run build -> dist 폴더를 dist.zip으로 만들어줌

.zip으로 만드는 이유는 확장 프로그램을 스토어에 배포할 때 zip으로 제출해야 하기 때문입니다.