RPCE는 Vite 지원을 @crxjs/vite-plugin으로 이동합니다.

tldr;

RPCE는 더 이상 롤업 플러그인이 아니므로 @crxjs/vite-plugin라는 새 이름을 갖게 됩니다.

Vite와 함께 rollup-plugin-chrome-extension를 사용하는 경우 다음 codemod를 사용하여 기존 프로젝트를 마이그레이션할 수 있습니다.

npx @crxjs/migrate

이미 @crxjs/vite-plugin 를 사용하고 있다면 이 문서를 읽을 필요가 없습니다.

RPCE는 성장하고 있습니다

기능과 견고성 측면에서 아직 할 일이 많지만 초기 기능 세트는 완료되었습니다.

확장 페이지 및 콘텐츠 스크립트의 React 및 Vue용 HMR

구성이 없는 동적 콘텐츠 스크립트

콘텐츠 스크립트에서 Vite 스타일 정적 자산 가져오기

RPCE에서 Vite 지원을 테스트하고 문제를 생성하는 데 시간을 할애한 모든 개발자에게 감사드립니다. Chrome 확장 프로그램을 구축하는 것은 쉽지 않습니다! Chrome 확장 프로그램을 위한 더 나은 DX를 구축하려면 시간과 인내심이 매우 중요합니다.

RPCE는 새로운 이름을 얻습니다

원래 계획은 Vite와 Rollup을 지원하는 실제 Rollup 플러그인을 만드는 것이었습니다. 불행히도 그것은 엄청난 작업으로 판명되었습니다. 모든 기능과 사용 사례는 프로젝트의 복잡성을 증가시키며 RPCE도 예외는 아닙니다. 마침내 우리가 원하는 Vite 스타일의 경험을 향해 나아가기 위해 롤업 지원을 타협하고 제거해야 했습니다.

그것은 우리에게 작은 문제를 남깁니다. rollup-plugin-chrome-extension는 롤업 플러그인이 아니므로 @crxjs/vite-plugin로 리브랜딩할 기회를 잡겠습니다.

마이그레이션 지침

쉽게 마이그레이션할 수 있도록 codemod를 게시했습니다. 프로젝트 루트 폴더에서 이 패키지를 실행합니다.

npx @crxjs/migrate

스크립트는 rollup-plugin-chrome-extension를 제거할지 묻는 메시지를 표시한 다음 설치하고@crxjs/vite-plugin Vite 구성에서 가져오기 이름을 대체합니다.



OFC, 당신은 이것을 스스로 할 수 있습니다:

npm rm rollup-plugin-chrome-extension
npm i -D @crxjs/vite-plugin

// vite.config.js

-- import { chromeExtension } from 'rollup-plugin-chrome-extension'
++ import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default {
--  plugins: [chromeExtension({ manifest })]
++  plugins: [crx({ manifest })]
}

플러그인 API 옵션은 동일하게 유지됩니다. 내보내기crx는 chromeExtension의 별칭일 뿐입니다. chromeExtension 또는 crx 를 가져올 수 있지만 간결성을 위해 향후 예제에서는 crx 를 사용하겠습니다.

기여

아직 베타 버전일 때 RPCE를 사용해 주셔서 감사합니다! 앞으로 몇 달 동안 더 나은 문서, 더 나은 Vue 지원 및 Svelte 지원을 기대할 수 있습니다.

이 플러그인이 귀하 또는 귀하의 비즈니스에 가치가 있다면 sponsoring me on GitHub을 고려하십시오. Chrome 확장 프로그램은 웹 개발 세계에서 진화하고 있지만 잘 이해되지 않는 공간입니다. 개발자 환경을 계속 개선하고 싶습니다. 귀하의 기여와 후원은 이것을 실현하는 데 큰 도움이 될 것입니다.

여기 우리의 새로운 로고가 있습니다!