Laavel 환경에서 Vite+React 가져오기

Laavel의 환경이 이미 존재하며 다음 버전으로 진행됩니다.

$ php artisan -V
Laravel Framework 8.47.0

React 가져오기

laravel/ui를 사용하여 React의 초기 설정을 수행합니다.
간단하게 React만 가져오면 다음artisan 명령이 완성됩니다.
다만, 정말 필요한 최소한의 것만 들어가기 때문에 여기서부터 필요한 것을 더해야 한다.

$ composer require laravel/ui --dev
$ php artisan ui react

웹 팩에서 Vite로 이동

현상태를 유지하면 자바스크립트를 웹팩믹스(Laavel Mix의 웹팩을 이용한 래퍼)로 묶어서 입수한다.

laavel-vite로 vite 환경 설정하기

웹 패키지-mix를 생략해서vite로 설정을 옮기는 미리 설정된 명령을 사용할 수 있습니다.
다만, 이것은 Vue입니다.js만 대응합니다.
강제로 베일의 구성이 됐기 때문에 리액트 구성으로 진행하려면 스스로 설정해야 한다.

$ npx apply laravel:vite

vite.config.준비ts,패키지.json의 npm scripts 부분을vite로 변경합니다.
vite.config.ts

# Remove Mix
$ rm webpack.mix.js
$ npm uninstall laravel-mix

# Require the packages
$ composer require innocenzi/laravel-vite
$ npm install vite laravel-vite -D

package.json

export { default } from "laravel-vite";

React Fast Refresh 가져오기

vite용 플러그인이 있어 설치 후 설정합니다.

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},
...

vite.config.ts

$ npm install @vitejs/plugin-react-refresh -D

참고 자료

laravel ui

Introduction:laravel-vite