Vuetify, de Webpack a Vite
Tengo muchos proyectos heredados escritos en Vue2. ¿Y qué biblioteca de estilos uso? Vuetificar por supuesto.
Este artículo está diseñado para ayudarte a aprovechar el poder de Vite. Porque, incluso si tiene un código heredado, merece tiempos de desarrollo rápidos.
Si no necesita admitir navegadores más antiguos. Si desea acelerar sus compilaciones de desarrollo. Si quieres una mejor experiencia en general. Es posible que desee echar un vistazo a Vite.
Vite tiene funcionalidades similares a Webpack. Agrupa y compila su código desde componentes de un solo archivo y mecanografiado hasta JavaScript estándar.
Si hace lo mismo, ¿por qué querría usarlo?
Simple. Los paquetes producidos por Vite son más pequeños. En la práctica esto significa 2 cosas:
- Mayor velocidad de desarrollo. Como tiene que producir menos código, se transpila más rápido.
- Mayor velocidad de carga del navegador. Los paquetes más pequeños se cargan más rápido.
Descargo de responsabilidad
- Antes de sumergirnos en Vite. Debe saber que NO es compatible con navegadores más antiguos.
Quitando babel
En su paquete.json , elimine todo lo relacionado con babel así:
"@babel/core": "...",
"@babel/eslint-parser": "...",
"@vue/cli-plugin-babel": "...",
Hecho esto, eliminemos las bibliotecas relacionadas con Webpack.
Eliminación del paquete web
En su paquete.json elimine:
"@vue/cli-plugin-eslint": "...",
"@vue/cli-plugin-router": "...",
"@vue/cli-plugin-unit-jest": "...",
"@vue/cli-plugin-vuex": "...",
"@vue/cli-service": "...",
Webpack y Babel eliminados. Ahora. Agreguemos Vite.
Agregando Vite
Instalar vitey vite-plugin-vue2ejecutando:
npm install -D vite vite-plugin-vue2
Reorganizar los archivos
Vite es un poco obstinado con la estructura de archivos de nuestro proyecto. Tendremos que cambiar los directorios de nuestros archivos estáticos.
Todo lo que estaba en la carpeta pública, sáquelo al directorio raíz.
Ese “todo” al que me refiero normalmente es:
- índice.html
- favicon.ico
Cambios en el archivo index.html
Si abre su index.html encontrará algo como esto:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
En otras palabras. Todo con <%...%>necesidades para ir.
Una vez hecho esto deberíamos tener algo como esto:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="./favicon.ico" />
<title>Admin</title>
<script type="module" src="/src/main.js" defer></script>
</head>
<body>
<noscript>
<strong
>We're sorry but the admin doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<script type="module" src="/src/main.js" defer></script>
Agregar las configuraciones de Vite
De manera similar a cómo agregamos configuraciones a Webpack, debemos hacerlo con Vite.
Un archivo de configuración simple:
import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
Primero. Importamos las dependencias que necesitamos.
import { defineConfig } from "vite"
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";
Ahora de las cosas difíciles.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(path.dirname(''), "./src"),
},
},
});
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(path.dirname(''), "./src"),
},
},
Agregar guiones Vite
También necesitamos actualizar nuestros scripts. De esto:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},
Nuestra configuración hasta ahora no funcionará con Vuetify. Necesitamos algunos ajustes especiales para hacer esto.
Paso adicional
De aquí en adelante. Cada vez que importamos un componente de archivo único (SFC), debe incluir la extensión.
Cuando antes podíamos hacer esto:
import HelloWorld from '@/components/HelloWorld';
import HelloWorld from '@/components/HelloWorld.vue';
Para que Eslint funcione correctamente con Vite, debemos ajustar algunas configuraciones. Si no lo usa, siéntase libre de saltar esta sección.
La configuración habitual de babel/eslint es algo como esto:
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
}
- En la
envopción ir denode: trueaes2021: true. - Eliminar por completo el
parserOptions.
{
"root": true,
"env": {
"es2021": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {}
}
Tenemos que instalar el siguiente paquete para procesar Vuetify con Vite.
npm install -D unplugin-vue-components
import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
// Vuetify
VuetifyResolver(),
],
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
Conclusiones
- Migrar de Webpack a Vite no es una gran molestia. Sin embargo, el aumento de velocidad vale la pena.
- Ya no necesitamos a Babel.
- Vite es obstinado con respecto a la ubicación de los archivos.
- Vuetify requiere configuraciones especiales.
![¿Qué es una lista vinculada, de todos modos? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
