Pokedex: Migración de Mix a Vite

5460 단어 vuelaraveljavascriptvite
En la anterior publicación nos dimos a la tarea de actualizar la versión de "Vue"(de Vue 2 a Vue 3).

Puedes ver la publicación aquí:



따라서 "Javascript"를 컴파일할 때 필요한 작업을 수행해야 합니다.

9.19 버전의 Laravel은 Javascript를 컴파일할 수 있으며 "Laravel Mix"는 "Vite"와 통합되어 Laravel의 공식 문서로 통합됩니다.

Las diferencias entre estas es que "Vite"te da un entorno de desarrollo y compilación mas rápido que "Laravel Mix"y "Webpack".

Aquí puedes obtener información sobre Vite:
https://vitejs.dev/guide/why.html
https://laravel.com/docs/9.x/vite



구성



Para integrar Vite a un proyecto ya existente, solamente necesitamos instalar dos paquetes; para lograr esto debemos ejecutar lo siguiente:

npm install --save-dev vite laravel-vite-plugin


Vue에 Vite 플러그인을 설치하려면 다음을 수행해야 합니다.

npm install --save-dev @vitejs/plugin-vue


Archivo "vite.config.js"의 크리모스:

touch vite.config.js && nano vite.config.js


Lo editamos con el siguiente contenido:

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

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        vue()
    ],
});


Actualizamos el archivo "package.json"en su sección de "scripts"con lo siguiente:

"scripts": {
        "dev": "vite",
        "build": "vite build"
    },


코디 구성



Otro requerimiento para que funcione correctamente "Vite", es quitar en el proyecto los "require y sustituirlos por "import". Además los archivos de los componentes en los "import"deben terminar con ".vue", 예:

//bootstrap.js
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';




//app.js
import './bootstrap';

import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";


"mix()"또는 "asset()"또는 "@vite"및 "layout.blade"를 다시 사용하십시오.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pokedex</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>


Laravel Mix 및 구성 제거:

npm remove laravel-mix && rm webpack.mix.js


Configuramos Tailwind:

npx tailwindcss init -p


항해 구성



Para que Vite se ejecute en el contenedor de Sail, necesitamos realizar unas configuraciones para que funcione la integración.

"docker-compose.yml"에 "laravel.test"서비스를 추가하려면 다음 문서를 참조하십시오.

- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'


"vite.config.js"에 대한 요약 및 "defineConfig"섹션에 대한 집계:

server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
    },


기본 구성을 호스트로 지정하거나 Sail의 컨비버 콘엘 컨텐더 구성에 서명할 수 없습니다.

Nota: La configuración "hmr" sirve para cuando se usa WSL2 en Windows.



Borramos caché y ejecutamos Vite:

sailartisan optimize:clear && sail npm run dev


Y Voila!, ya tenemos corriendo el Pokedex con Vite y nuestros recursos de Javascript se compilan casi al instante.

Otra de las ventaja de tener Vite en nuestro proyecto, es que el "hot reload"lo hace casi instantáneo en cuanto guardas los cambios de algún archivo.

Si quieres ver la diferencia de archivos para esta configuración lo puedes Consultar aquí:

https://github.com/krsrk/pokedex-laravel/pull/8
36가지 유용한 터미널 명령
ruby로 mongodb3 (사용자 인증 포함)에 연결 · DB 작업 확인 메모

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage