Vite on Rails-7 설정

레일스 앱 만들기

$ rails new vite-app --skip-javascript

--skip-javascript는 다음 단계에서 conflicts을 피하기 위해 필요합니다. 부트스트랩/재단 사이트의 경우 자산 파이프라인이 도움이 되므로 --skip-asset-pipeline가 적용되지 않습니다.

패키지 추가

$ bundle add vite_rails
$ bundle exec vite install

참조: GitHub/vite_rails

gem "haml-rails" #=> optional (i love it!)
gem "sassc-rails" #=> unkomment this if you need the asset pipeline alongside vite

$ bundle install

자산 파이프라인

app/assets/stylesheets/application.scss를 .scss로 이름 바꾸기

application.scss에서 *= require_tree . 및 *= require_self 제거

Vite 스타일시트

진입점 파일 추가app/frontend/entrypoints/application.scss

$ yarn add sass

자산 파이프라인과 함께 로드되도록 레이아웃에 vite_stylesheet_tag(«+»)를 추가합니다.

    = stylesheet_link_tag "application" 
+   = vite_stylesheet_tag 'application.scss', media: :all // => extension .scss is necessary here
    = vite_client_tag
    = vite_javascript_tag 'application' 

포먼 러너

Foreman이 설치되어 있는지 확인하십시오. gem만 설치하면 되며 Gemfile에는 항목이 없습니다.

RubyMine에서 참조

앱 실행

콘솔에서 Runner가 RubyMine에서 foreman start -f Procfile.dev로 앱을 실행합니다.

함정: 0.0.0.0/127.0.0.0이 아닌 localhost로 앱을 호출합니다. 그렇지 않으면 브라우저가 vite dev 서버에 액세스할 수 없고 HMR이 작동하지 않습니다.

=> http://localhost:5100에 앱이 표시되고 HMR(Hot Module Reloading)이 작동해야 하지만 프런트엔드 폴더 내의 파일에 대해서만 가능합니다. 확인: 파일을 수정하고 콘솔 출력을 확인합니다.

완전 핫 모듈 재장전(HMR)

$ yarn add --dev vite-plugin-full-reload

onvite.config.ts에 «+»가 있는 줄을 추가합니다.

  import {defineConfig} from 'vite'
  import RubyPlugin from 'vite-plugin-ruby'
+ import FullReload from 'vite-plugin-full-reload'

  export default defineConfig({
      plugins: [
          RubyPlugin(),
+         FullReload([
+            'config/locales/*.yml',
+             'locale/**/*',
+             'app/views/**/*'
+         ], {delay: 0}),
      ],
  })

서버를 다시 시작하십시오.

테스트 코드

스캐폴드 또는 두 개의 보기를 만들고 링크로 연결

=> HMR은 구성과 관련하여 뷰에서도 작동해야 합니다.