브라우저 확장 - Parcel을 Vite로 전환

Parcel에 문제가 있는 것은 아니지만 Vite를 사용해 보고 싶었습니다.

따라서 처음부터 모든 작업을 수행하는 대신 Parcel에서 Vite로 마이그레이션하는 방법을 살펴보겠습니다.

Note: You can also use this article as a guide on building an extension powered by Vite.

기사를 따라 해보고 싶다면 다음GitHub branch을 시작점으로 사용하십시오.

Vite를 아직 모르는 분들을 위해 개발 서버를 실행하고 빌드를 출력하는 데 사용할 수 있는 빌드 도구입니다.
그것은 Parcel과 매우 유사하며 내 연구 시점에서 선택하는 것은 개인적인 선호도에 달려 있습니다.

소포 청소

첫 번째 프로세스는 기존 Parcel 구성 및 관련 항목을 정리하는 것이었습니다.

다음 파일을 제거합니다.parcelrc.

그런 다음 package.json를 열고 다음 줄을 제거합니다.

"parcel": "^2.7.0",
"parcel-reporter-static-files-copy": "^1.3.4",

또한 package.json 파일에서 기존 스크립트를 모두 제거합니다. 우리는 새로운 것을 추가하기 위해 돌아올 것입니다.

이제 npm i를 실행하여 패키지를 제거하십시오.

이 시점에서 우리 앱은 더 이상 Parcel에 의해 구동되지 않지만 지금은 아무 것도 구동되지 않으므로 이를 수정해야 합니다.

Vite 추가

필요한 패키지를 추가하여 시작하겠습니다.
React를 실행하면서 react 플러그인이 필요합니다. 다른 프레임워크를 사용하는 경우에는 다를 수 있습니다.

Vite에 필요한 새 스크립트도 추가했습니다.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vite": "^3.0.4"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.0"
  }
}

Note: These are only the changes. Your package.json should have some more lines already.

이제 npm i를 실행하여 새 종속성을 설치합니다.

Vite는 Parcel과 약간 다른 접근 방식을 사용하므로 기본적으로 실행되지 않습니다.
가장 먼저 변경하려는 것은 모든 .js 파일의 이름을 .jsx 로 바꾸는 것입니다. (필수는 아니지만 더 쉽습니다)

App.js => App.jsx

Counter.js => Counter.jsx

index.js => index.jsx

이 작업을 수행하는 동안 index.jsx 파일을 src 디렉토리로 이동합니다. (new-tab.html 파일 내부에서 가져오기를 변경하는 것을 잊지 마십시오)

이제 static 폴더의 이름을 public 로 바꿉니다. Vite는 정적을 위해 공용 폴더를 사용합니다.

그런 다음 tailwind.config.js 대신 .jsx 파일을 사용하도록 .js 파일을 수정해야 합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  - content: ['src/*.js'],
  + content: ['src/*.jsx'],
};

마지막으로 프로젝트의 루트에 vite.config.js 파일을 정의해야 합니다.
여기에서 Vite에게 이것이 React 프로젝트임을 알려야 합니다.index.html 파일을 사용하지 않기 때문에 Vite에 다른 진입점이 있음을 알릴 수도 있습니다: new-tab.html .

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        app: './new-tab.html',
      },
    },
  },
});

그리고 그게 다야. 이제 다음 명령을 실행하여 새 빌드를 시도할 수 있습니다.

npm run build

이를 테스트하려면 this article에 설명된 단계를 따라야 하지만 로드할 dist 폴더를 선택해야 합니다.

그리고 끝났습니다. 대신 Vite를 사용하도록 Parcel 빌드를 변환했습니다.

여기에서 전체 코드 샘플을 찾을 수도 있습니다GitHub repo.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나