Vuetify, da Webpack a Vite
Ho molti progetti legacy scritti in Vue2. E quale libreria di stili utilizzo? Vuetify ovviamente.
Questo articolo è progettato per aiutarti a sfruttare il potere di Vite. Perché, anche se disponi di codice legacy, ti meriti tempi di sviluppo rapidi.
Se non è necessario supportare i browser meno recenti. Se vuoi velocizzare le tue build di sviluppo. Se vuoi un'esperienza complessivamente migliore. Potresti dare un'occhiata a Vite.
Vite ha funzionalità simili a Webpack. Raggruppa e compila il tuo codice da componenti a file singolo e dattiloscritto a JavaScript vanilla.
Se fa lo stesso perché dovrei usarlo?
Semplice. I fasci prodotti da Vite sono più piccoli. In pratica questo significa 2 cose:
- Maggiore velocità di sviluppo. Poiché deve produrre meno codice, transpile più velocemente.
- Maggiore velocità di caricamento del browser. I pacchetti più piccoli si caricano più velocemente.
Disclaimer
- Prima di tuffarci in Vite. Devi sapere che NON supporta i browser meno recenti.
Rimozione babele
Sul tuo package.json rimuovi tutto ciò che riguarda babel in questo modo:
"@babel/core": "...",
"@babel/eslint-parser": "...",
"@vue/cli-plugin-babel": "...",
Fatto ciò rimuoviamo le librerie relative al Webpack.
Rimozione di Webpack
Sul tuo package.json rimuovi:
"@vue/cli-plugin-eslint": "...",
"@vue/cli-plugin-router": "...",
"@vue/cli-plugin-unit-jest": "...",
"@vue/cli-plugin-vuex": "...",
"@vue/cli-service": "...",
Webpack e Babel rimossi. Adesso. Aggiungiamo Vite.
Aggiunta Vite
Installa viteed vite-plugin-vue2eseguendo:
npm install -D vite vite-plugin-vue2
Riordinare i file
Vite è un po' supponente riguardo alla struttura dei file del nostro progetto. Dovremo cambiare le directory dei nostri file statici.
Tutto ciò che era nella cartella pubblica, portalo nella directory principale.
Quel "tutto" a cui mi riferisco di solito è:
- indice.html
- favicon.ico
Modifiche al file index.html
Se apri il tuo index.html troverai qualcosa di simile a questo:
<!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>
In altre parole. Tutto ciò <%...%>che deve andare.
Fatto ciò dovremmo avere qualcosa del genere:
<!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>
Aggiunta delle configurazioni Vite
In modo simile a come aggiungiamo configurazioni a Webpack, dobbiamo farlo con Vite.
Un semplice file di configurazione:
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"),
},
},
});
Primo. Importiamo le dipendenze di cui abbiamo bisogno.
import { defineConfig } from "vite"
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";
Ora passiamo alle cose difficili.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(path.dirname(''), "./src"),
},
},
});
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(path.dirname(''), "./src"),
},
},
Aggiungi script Vite
Dobbiamo anche aggiornare i nostri script. Da questo:
"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"
},
La nostra configurazione finora non funzionerà con Vuetify. Abbiamo bisogno di alcune modifiche speciali per farlo.
Passaggio aggiuntivo
Da ora in poi. Ogni volta che importiamo un Single File Component (SFC) è necessario includere l'estensione.
Quando prima potevamo fare questo:
import HelloWorld from '@/components/HelloWorld';
import HelloWorld from '@/components/HelloWorld.vue';
Affinché Eslint funzioni correttamente con Vite, è necessario regolare alcune impostazioni. Se non lo usi sentiti libero di saltare questa sezione.
La solita configurazione babel/eslint è qualcosa del genere:
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
}
envNell'opzione vainode: trueda aes2021: true.- Rimuovi completamente il file
parserOptions.
{
"root": true,
"env": {
"es2021": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {}
}
Dobbiamo installare il seguente pacchetto per elaborare 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"),
},
},
});
Conclusioni
- La migrazione da Webpack a Vite non è un grosso problema. Tuttavia, vale la pena aumentare la velocità.
- Non abbiamo più bisogno di Babel.
- Vite è supponente riguardo alle posizioni dei file.
- Vuetify richiede configurazioni speciali.
![Che cos'è un elenco collegato, comunque? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
