Vite+ 베타 공개

 (voidzero.dev)
1P by GN⁺ | ★ favorite | 댓글 1개
  • 웹 개발 도구를 프로젝트마다 따로 조립하던 부담을 줄이기 위해 Vite+ 가 런타임, 패키지 매니저, 빌드·테스트·검사 도구를 하나의 진입점으로 묶음
  • vp dev, vp check, vp test, vp build, vp pack, vp run이 Vite 8, Vitest, Rolldown, tsdown, Oxlint, Oxfmt와 연결되어 일관된 명령 체계를 제공함
  • 알파 이후 12개 이상 버전과 500개 이상 PR을 거치며 캐싱, 마이그레이션, 조직 템플릿, 기업 네트워크 대응, 크로스 플랫폼 안정성이 개선됨
  • 공개 저장소 기준 1,300개 이상이 vite-plus에 의존하며, Dify, critical, BlockNote, vinext, îles, Inkline, npmx 같은 프로젝트가 이미 사용 중임
  • 아직 1.0 전 단계이므로 원격 캐싱, GitLab CI/CD 지원, 프레임워크·플러그인 호환성, 마이그레이션, 배포 채널과 진단 개선이 남아 있음

Vite+가 제공하는 통합 툴체인

  • Vite+는 웹 개발을 위한 통합 툴체인으로 베타 공개됨
  • 하나의 진입점에서 런타임과 패키지 매니저를 관리하고, 여러 프론트엔드 도구를 테스트된 스택으로 함께 제공함
  • MIT 라이선스의 완전한 오픈소스이며, 특정 프레임워크에 종속되지 않음
  • CLI, 라이브러리, 웹 앱 등 다양한 웹 프로젝트에서 사용할 수 있음
  • 새 프로젝트는 vp create, 기존 프로젝트는 vp migrate로 시작함

같은 명령으로 개발·검사·빌드 실행

  • Vite+는 저장소마다 다른 도구 조합과 명령을 익히는 대신, 같은 명령 체계를 쓰도록 설계됨
  • 주요 명령은 다음과 같음
    • vp dev: Vite 8 기반으로 핫 모듈 교체가 포함된 개발 서버를 시작함
    • vp check: Oxfmt 포맷, Oxlint 린트, 타입 검사를 한 번에 실행함
    • vp test: Vitest 기반 단위 테스트를 실행함
    • vp build: Vite 8 기반으로 프로덕션 빌드를 수행함
    • vp pack: tsdown 기반으로 라이브러리를 번들링하며 모범 사례를 포함함
    • vp run: 내장된 모노레포 인식 작업 실행기로 npm 스크립트나 작업을 실행하고 지능형 캐싱을 사용함
  • 팀과 코드베이스가 커질수록 다음 이점이 커짐
    • 도구 버전이 정렬됨
    • 설정 공유가 쉬워짐
    • 신규 기여자의 설정 단계가 줄어듦
    • CI가 로컬 개발과 같은 명령을 실행함
  • 반복적으로 툴체인을 직접 조립하고 싶지 않은 개발자와, 프로젝트 전반에 일관된 설정을 원하는 팀에 맞춰져 있음
  • Vite+는 Vite 생태계를 대체하지 않음
    • Vite 플러그인은 계속 Vite 플러그인으로 남음
    • 프로젝트는 내부적으로 원하는 패키지 매니저를 계속 사용할 수 있음
    • Vite+는 이 요소들이 하나의 툴체인처럼 작동하도록 통합 계층을 제공함

알파 이후 베타까지의 변화

  • Vite+ 알파 이후 실제 프로젝트 테스트를 거치며 12개 이상 버전이 릴리스되고 500개 이상 PR이 병합됨
  • 주요 개선점은 다음과 같음
    • 더 똑똑한 캐싱: vp run이 자동 데이터 추적과 Vite가 보고하는 메타데이터를 결합해 입력, 출력, 환경 변수를 수동 나열하지 않아도 빌드 캐시가 올바르게 동작함
    • 마이그레이션 개선: vp migrate가 다양한 앱 설정을 처리하고, 에이전트를 위한 마이그레이션 프롬프트도 제공함
    • 엔터프라이즈 기능: 조직 템플릿으로 팀 간 설정을 표준화하고, 프록시 및 커스텀 CA 인식 HTTP로 기업 프록시와 방화벽 뒤에서도 vp를 실행할 수 있음
    • 크로스 플랫폼: 주요 운영체제와 셸에서 더 잘 동작하도록 vp가 강화됨
    • 정제와 개선: vite-plus에 180개 이상의 수정과 개선이 반영됨
  • 자세한 변경 내역은 Vite+ 릴리스 기록에서 확인할 수 있음

함께 발전한 기반 도구들

실제 도입 사례

  • vite-plus에 의존하는 공개 저장소가 1,300개 이상이며, 비공개 프로젝트와 전역 CLI 설치는 포함되지 않음
  • 다양한 프로젝트 유형에서 Vite+가 사용되고 있음
    • Dify: LLM 앱 구축용 오픈소스 플랫폼
    • critical: Addy Osmani의 프레임워크 독립적 critical-path CSS 도구
    • BlockNote: React용 블록 기반 Notion 스타일 리치 텍스트 편집기
    • vinext: Vite 기반의 Next.js 호환 드롭인 프레임워크
    • zerobyte: TanStack과 React로 만든 셀프호스팅 사용자용 백업 자동화
    • îles: Vue용 부분 하이드레이션 islands 사이트 생성기
    • agentsview: Svelte로 만든 코딩 에이전트용 로컬 우선 세션 검색·분석 도구
    • Inkline: Vue, React, Svelte, Angular, Solid, Qwik, Astro를 지원하는 UI 컴포넌트 라이브러리
    • npmx: Nuxt 기반 오픈소스 npm 레지스트리 브라우저
  • npmx의 Daniel Roe는 Vite+가 개발 경험을 빠르게 유지하고 CI와 리뷰 과정도 빠르게 만든다고 밝힘

1.0 전까지 남은 과제

  • Vite+는 안정적이지만 아직 완성 단계는 아니며, 통합 툴체인이 필요한 기능을 충족한다면 도입을 권장함
  • 1.0까지 집중할 항목은 다음과 같음
    • vp run인 Vite Task용 원격 캐싱 구현
    • GitLab CI/CD용 setup-vp 도입
    • Vite 프레임워크와 플러그인 전반의 호환성 개선
    • 더 많은 마이그레이션 대상 지원
    • 공식 Homebrew formula 같은 배포 채널 추가
    • 문서와 진단을 더 명확하게 개선
  • 1.0 릴리스 전 남은 호환성 격차를 줄이기 위해 커뮤니티 피드백을 우선시함

설치와 마이그레이션

  • 전역 vp 명령은 macOS/Linux에서 다음 명령으로 설치함
curl -fsSL https://vite.plus | bash
  • Windows에서는 다음 PowerShell 명령을 사용함
irm https://vite.plus/ps1 | iex
  • 새 프로젝트 생성은 다음 명령을 사용함
vp create
  • 기존 Vite 프로젝트에서 Vite+를 시도하려면 다음 명령을 사용함
vp migrate

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • Vite는 정말 좋아하지만, 다른 도구들은 뭔지 전혀 모르겠음
    잠깐 고개 숙이고 일하다 보니 프런트엔드 도구 체계가 갑자기 진화해 있었고, 지루하지만 잘 작동하는 스택으로 가려는 흐름이 있는지 궁금함

    • 포함된 도구들은 실제로 꽤 훌륭함: vitest는 매우 빠른 테스트 실행기이고, jest나 Node 내장 테스트 실행기 등 여러 도구를 써본 뒤에도 마음에 듦
      oxlint는 eslint를 대체하면서 설정 파일 형식과 호환되고, JavaScript로 작성되지 않아 매우 빠름. biome도 써봤지만 oxlint가 규칙이 더 많고 eslint 호환성이 좋았음
      oxfmt는 prettier를 대체하며 JavaScript로 작성되지 않아 더 빠르고, rolldown은 rollup을 대체하면서 호환되지만 훨씬 빠름. 새 프로젝트에서는 이미 이런 도구들을 주로 쓰고 있음
    • 다른 도구들은 테스트, 번들링, 린트, 포맷팅용임
      예전에는 서로 다른 오픈소스 프로젝트의 도구들을 각각 다른 설정과 업데이트 주기로 써야 했는데, 이제는 하나의 단순한 도구 체인으로 다뤄짐
      Vite+ 가 사실상 “지루하지만 잘 작동하는” 스택이고, 성능도 더 좋고 설정도 덜 필요함
    • 맞음, 딱 그 방향임
      eslint → oxlint, prettier → oxfmt처럼 Rust로 다시 써서 빠르게 만들고, webpack → Vite는 이미 충분히 널리 쓰이니 받아들이는 흐름임
      rolldown → tsdown은 TypeScript 지원을 더하고, jest → vitest는 Vite와 잘 맞음
      지난 10년간 자리 잡은 관례를 가져와 TypeScript 지원, Rust 기반 성능, 상호운용성을 한데 묶는 셈임
    • Vite를 써보려다 esbuild보다 큰 장점을 못 느껴서 멀어졌음
      Deno도 쓰고 있는데, 어떤 점이 유용한지 궁금함
    • 이게 요즘 떠오르는 최신 지루하지만 잘 작동하는 스택임

  • Vite, Vitest, Oxlint, Oxfmt를 좋아하고 새 프로젝트 대부분에서 이쪽을 먼저 봄
    이 사람들이 충분한 자금을 확보해서 적어도 향후 10년은 계속 개발할 수 있으면 좋겠음
    오래된 프로젝트를 열었더니 Gulp, Grunt, webpack과 기타 제각각인 도구가 뒤섞여 있는 것보다 훨씬 나음. 그런 프로젝트 하나도 새 스택으로 옮겼음

    • VoidZero는 Cloudflare에 인수된 것으로 알고 있어서 자금은 문제가 아닐 듯함
      관건은 Cloudflare가 이 사람들이 Vite와 Vite+ 기능을 계속 만들게 두느냐임. Cloudflare뿐 아니라 모든 클라우드 플랫폼에 이득이 되는 기능들이기 때문임
      https://blog.cloudflare.com/voidzero-joins-cloudflare/
    • Vite, ESLint, Prettier, TypeScript, React를 모두 자연스럽게 맞물리게 만드는 건 까다로울 수 있음
      특히 서버 측 렌더링이 있는 풀스택이면 더 그렇고, 프런트엔드만 보면서 TypeScript를 빼면 꽤 쉬워짐
      더 복잡한 경우에 Vite+ 가 도움이 되는지는 지켜봐야 함

  • 이 프로젝트는 더 나은 이름을 찾아야 한다고 봄
    실제로 더 나은 Vite라기보다는 다른 도구 묶음이라서 꽤 헷갈림
    당시 Void Zero는 Vite 브랜드로 수익화하려 했을 수 있지만, 이제 Cloudflare에 인수됐으니 그럴 필요도 없어졌음

    • Vite에 여러 가지가 더해진 것이니 “plus”가 여러 의미를 가질 수 있음

  • Vite, Vitest, Rolldown, tsdown, Oxlint, Oxfmt를 매우 만족하며 쓰고 있음
    하드포크한 패키지도 많고 돌아가고 싶지 않음. 전부 그냥 잘 작동함
    이름 때문에 헷갈린다면 Oxlint https://oxc.rs/docs/guide/usage/linter와 Rolldown https://rolldown.rs/부터 보면 됨
    지난 6개월간 도입하면서 tsconfig는 아주 조금만 바꿨음
    평소에는 antd6, echart, 렌더링 엔진, 지리공간 라이브러리 같은 게 아니면 새 패키지를 가져와 Claude로 정리하고, 엄격하고 통일된 타입 체계로 맞춘 뒤 Vite, tsconfig, oxlint 취향에 맞춤
    결과적으로 라이브러리 비대화나 공급망 공격 문제를 계속 따라갈 필요가 줄고, 읽고 고치기 쉬워짐

  • Vite는 2022~2026년 4년 동안 주요 버전이 다섯 번 올라갔음: 3 → 4 → 5 → 6 → 7 → 8
    매번 깨지는 변경이 있었고 개발자들이 마이그레이션을 해야 했는데, 너무 많음. 버전 3 때보다 극적으로 좋아진 것도 아닌데 말임
    이런 수준의 불필요한 변화와 지속적인 혼란을 나머지 개발 도구 체인까지 가져오고 싶지는 않음
    Vite+가 결국 기존 도구를 추상화된 명령줄 인터페이스로 감싸는 것뿐이라면, 원하는 동작을 만들기 위해 더 많은 간접 계층을 헤쳐 나가야 하는 셈이라 아직 낙관적이지 않음

    • 주요 마이그레이션을 모두 따라갔는데 꽤 매끄러웠음
      큰 문제는 기억나지 않고, 매번 대체로 그만한 가치가 있었음
    • 직접 마이그레이션했지만 끔찍하지 않았음
      깨지는 변경은 몇 개 있었지만 비교적 고립돼 있었고, 이 버전들 사이의 속도와 개선은 꽤 컸음
    • 우리도 그 주요 버전 마이그레이션을 모두 했지만 깨짐이나 큰 churn은 없었음
      어떤 깨짐을 겪었는지 궁금함
    • 버전 3과 비교해 별로 좋아진 게 없다는 건 동의하기 어려움
      서버 측 렌더링 관련 기능 추가는 큰 개선이었음
    • 4에서 8로 한 번에 올렸고 설정 5줄만 바꾸면 됐음
      존재하지 않는 문제를 두고 계속 불평하는 건 그만했으면 함. 실제로 이 도구들을 쓰는지조차 의문임

  • 프런트엔드, 아니면 JavaScript 생태계를 따라가기가 정말 힘듦
    Laravel로 일하던 때가 그립고, Laravel을 쓰는 일자리가 더 높은 보수를 줬으면 좋겠음

    • Laravel Livewire와 Alpine.js로 일하는 건 원하지 않을 것임
      그래도 계속 따라가야 하고, 결과도 그다지 만족스럽지 않을 수 있음
    • 사실 꼭 따라갈 필요는 없음
      이전에 쓰던 것도 여전히 작동함
    • 공감함. 우리도 Laravel 모놀리스를 Python Lambda로 천천히 대체하는 중임
      Laravel 6 시절이 정말 그리움

  • uv에서 통했던 방식이니, 유능한 팀이라면 JavaScript에서도 같은 일을 할 수 있을 것 같음

    • 댓글에서 uv 얘기가 이것뿐이라는 게 의외임
      나에게는 아주 분명한 비교 대상이고, JavaScript 생태계에도 매우 반가운 발전으로 느껴짐
      uv 덕분에 Python으로 작업하는 게 다시 즐거워졌음

  • Vite처럼 Node 빌드에도 쓸 수 있는지, 아니면 브라우저 전용인지 궁금함

    • Vite를 사용하므로 제약도 Vite와 같음
      다만 vite-plugin-node를 써서 NestJS 서버에 Vite를 문제없이 쓰고 있음
      예시는 https://github.com/leosuncin/nest-vite-example/blob/master/v... 참고
    • Node를 대상으로 할 때 잘 작동하는 내 주문 같은 설정은 여기 있음: https://pastebin.com/ynz4B5X0
      기본적으로 자신을 라이브러리인 척하면 됨
    • CLI에도 Vite+를 쓰고 있음
      이 경우 Vite를 개발 서버로 쓰지는 않지만, 린트, 포맷팅, 작업 실행, 캐싱은 그대로 있음
    • 누군가 Node 코드 번들링을 제안할 때마다 항상 사용 사례가 궁금함
      장점이 뭘까? SEA에서 난독화하려는 용도인가?

  • 이것도 구독이 붙어 있는지 궁금함
    이름에 “+”가 붙으면 경계하게 되고, 당연히 구독이 딸려 있다고 생각하게 됨
    살펴보니 그런 것 같지는 않음

    • 나도 첫 생각이 그거였음
      이제 “$name+”는 “$name의 구독 서비스”라는 의미로 강하게 각인돼 있음
    • “MIT 라이선스의 완전한 오픈소스”라고 되어 있음
    • 원래는 그런 구상이었을 수도 있지만, 이후 acqui-hire된 것 같음
    • 이름이 걱정스럽긴 함

  • Astro와 함께 쓸 수 있는지 궁금함

답변달기