Agregue Vite a su aplicación web existente trucos CSS
Rápido (pronunciado "veet") es un nuevo paquete JavaScript. Incluye una batería, casi no requiere configuración para su uso y contiene muchas opciones de configuración. Ah, y eso es rápido. Increíblemente rápido.
Este artículo cubrirá el proceso de convertir un proyecto existente a Vite. Cubriremos cosas como alias, procesamiento dotenv que completa un paquete web y servidores proxy. En otras palabras, estamos buscando cómo mover proyectos de sus paquetes existentes a Vite. Si desea comenzar un nuevo proyecto, querrá Ir a su documentación.
En resumen: CLI le preguntará a su marco personalizado (React, Preact, Svelte, Vue, Vanilla o incluso lit-html) y si se requiere TypeScript, y luego le dará un proyecto completamente funcional.
Si está interesado en aprender cómo integrar Vite en proyectos heredados, lo haría. aún Es recomendable construir un proyecto vacío e investigar un poco a su alrededor. A veces coloco algunos bloques de código, pero la mayoría de ellos provienen directamente de las plantillas predeterminadas de Vite.
Nuestro caso de uso
Lo que estamos considerando es migrar mi versión del paquete web en base a mi propia experiencia. artículo en la lista de libros (repositorio). No hay nada especial en este proyecto, pero es bastante grande y antiguo y depende en gran medida del paquete web. Entonces, en ese sentido, esta es una gran oportunidad para ver algunas opciones de configuración más útiles a medida que migramos a Vite.
Qué vamos a hacer usado para deber
Una de las razones más convincentes para usar Vite es que ya hace mucho trabajo listo para usar, integrando muchas responsabilidades de otros marcos, por lo que hay menos dependencias y una base más madura para la configuración y las convenciones.
Entonces, en lugar de comenzar diciendo lo que necesitamos para comenzar, revisemos todas nuestras cosas comunes sobre los paquetes web. innecesario Porque Vite nos los da gratis.
Carga estática de recursos
Por lo general, necesitamos agregar algo similar al paquete web:
{
test: /.(png|jpg|gif|svg|eot|woff|woff2|ttf)$/,
use: [
{
loader: "file-loader"
}
]
}Esto tomará todas las referencias a archivos de fuentes, imágenes, archivos SVG, etc. y los copiará a su carpeta dist para que puedan ser reenviados desde su nuevo paquete. Esto viene de serie con el Vite.
estilo
Aquí digo deliberadamente "estilos" en lugar de "css", porque con webpack puedes tener algo como esto:
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},
// later
new MiniCssExtractPlugin({ filename: "[name]-[contenthash].css" }),... permite que la aplicación importe CSS o archivo SCSS. Te cansarás de escucharme decir eso, pero Vite lo mantiene fuera de la caja. Solo asegúrese de instalar Sass usted mismo en su proyecto y Vite se encargará del resto.
Traducción / mecanografía
Lo más probable es que su código use TypeScript y/o características de JavaScript no estándar, como JSX. Si este es el caso, deberá transformar su código para eliminarlos y generar JavaScript antiguo simple que los navegadores (o analistas de JavaScript) puedan entender. Se ve así en el paquete web:
{
test: /.(t|j)sx?$/,
exclude: /node_modules/,
loader: "babel-loader"
},... use la configuración adecuada de Babel para especificar el complemento apropiado que se ve así para mí:
{
"presets": ["@babel/preset-typescript"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
}Aunque es posible que haya dejado de usar los dos primeros complementos hace unos años, en realidad no importa, porque como seguramente habrás adivinado, Vite hace todo por nosotros. Toma su código, elimina todos los tipos de TypeScript y JSX, y genera código compatible con los navegadores modernos.
Si desea admitir navegadores más antiguos (no digo que deba hacerlo), entonces hay un complemento.
node_modules
Sorprendentemente, el paquete web requiere que le digas que analice desde node_modules, nosotros hacemos esto:
resolve: {
modules: [path.resolve("./node_modules")]
}Como era de esperar, Witte hizo exactamente eso.
formas de producción
Una cosa común que hacemos en el paquete web es enviar manualmente un mode propiedades tales como:
mode: isProd ? "production" : "development",... solemos especular así:
const isProd = process.env.NODE_ENV == "production";Y, por supuesto, configuramos esta variable de entorno a través del proceso de compilación.
Vite maneja esto de manera un poco diferente y nos da diferentes comandos para lanzar versiones de desarrollo y producción, que veremos pronto.
extensión de archivo
A riesgo de repetir esto, señalaré rápidamente que Vite tampoco requiere que especifique cada extensión de archivo que usa.
resolve: {
extensions: [".ts", ".tsx", ".js"],
}Simplemente configure el tipo correcto de proyecto Vite y estará listo para comenzar.
¡Los complementos generalizados son compatibles!
Este es un punto clave que me gustaría señalar en mi sección. Si aún necesita reemplazar algunos complementos de paquetes web en su aplicación Vite después de terminar esta publicación de blog, intente encontrar un complemento de complemento equivalente y use Ese. Leíste bien: el complemento Rollup es (o generalmente, al menos) compatible con Vite. Por supuesto, algunos complementos de resumen, trabajo Esto no es compatible con la forma en que funciona Vite, pero en general deberían funcionar bien.
Para más información, Ver la documentación.
Tu primer proyecto Vite
Tenga en cuenta que estamos trasladando los proyectos de paquetes web heredados existentes a Vite. Si está creando algo nuevo, es mejor Iniciar un nuevo proyecto Vite Entonces ve desde allí. Sin embargo, el código original que te muestro es básicamente copiado del código que Vite crea a partir de un nuevo proyecto, por lo que puede ser una buena idea tomarse un tiempo para crear un nuevo proyecto y comparar el flujo.
punto de entrada HTML
Sí, no te equivocas. En lugar de colocar la integración de HTML detrás de los complementos, como lo hace el paquete web, Vite usa HTML primero. Lleva un archivo HTML con etiquetas de script a su punto de entrada de JavaScript y genera todo desde allí.
Este es el archivo HTML (Vite espera llamar index.html) Empecemos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The GOAT of web apps</title>
</head>
<body>
<div id="home"></div>
<script type="module" src="https://css-tricks.com/reactStartup.tsx"></script>
</body>
</html>Tenga en cuenta, <script> La etiqueta apunta a /reactStartup.tsxAjústelo a su propia grabación si es necesario.
Instalemos algo como el complemento React:
npm i vite @vitejs/plugin-react @types/nodeTambién creamos lo siguiente vite.config.ts justo al lado index.html archivos en el directorio del proyecto.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()]
});Finalmente, agreguemos algunos scripts npm nuevos:
"dev": "vite",
"build": "vite build",
"preview": "vite preview",Ahora comencemos el servidor de desarrollo de Vite. npm run devEs muy rápido y puede construir lo que quiera gradualmente bajo demanda.
Pero, por desgracia, fracasó. Por ahora.
Veremos cómo establecer alias más adelante, pero por ahora cambiemos el nuestro. reactStartup El archivo (o cualquiera de sus archivos de entrada) es el siguiente:
import React from "react";
import { render } from "react-dom";
render(
<div>
<h1>Hi there</h1>
</div>,
document.getElementById("home")
);Ahora podemos empezar npm run dev Comando y busque localhost:3000.
Recarga de módulos en caliente (HMR)
Ahora que el servidor de desarrollo se está ejecutando, intente cambiar su código fuente Deber Las actualizaciones son casi instantáneas a través de HMR de Vite. Esta es una de las mejores características de la Vite. Esto hace que la experiencia de desarrollo sea aún mejor cuando los cambios parecen reflejarse de inmediato, sin tener que esperar o incluso actuar por sí solos.
El resto de este artículo cubrirá todas las cosas que tuve que hacer para crear mi propia aplicación para construir y ejecutar con Vite. ¡Espero que algunos de ellos sean adecuados para ti!
alias
No es raro que los proyectos de paquetes web tengan esta configuración:
resolve: {
alias: {
jscolor: "util/jscolor.js"
},
modules: [path.resolve("./"), path.resolve("./node_modules")]
}Esto crea un alias jscolor en la ruta proporcionada y dígale al paquete web que busque en la carpeta raíz (./) y C node_modules Cuando se permite la importación. Esto nos permite tener importaciones como esta:
import { thing } from "util/helpers/foo"... en cualquier parte de nuestro árbol de componentes, digamos que hay un util la carpeta superior.
Vite no le permite proporcionar una carpeta completa para dicho análisis, pero le permite especificar alias que siguen el mismo @ rollup / alias de complemento:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig({
resolve: {
alias: {
jscolor: path.resolve("./util/jscolor.js"),
app: path.resolve("./app"),
css: path.resolve("./css"),
util: path.resolve("./util")
}
},
plugins: [react()]
});agregamos un resolve.alias sección, incluidos todos los registros donde necesitamos alias.our jscolor util está configurado en el módulo apropiado y hemos configurado el alias del directorio en el nivel más alto. Ahora podemos comenzar con app/, css*/*, y util/ De cada componente, en todas partes.
Tenga en cuenta que estos alias solo se aplican a los directorios raíz importados, p. util/foo. si tienes algún otros La carpeta util está más abajo en su árbol y la reenvía con esto:
import { thing } from "./helpers/util";... entonces el apodo de arriba será No jodido La diferencia no está bien documentada, pero puedes verla en el complemento de alias pluralEl alias .Vite corresponde al mismo comportamiento.
Variable ambiental
Werther, por supuesto, Compatibilidad con variables de entorno, comienza con el tuyo .env archivos en desarrollo o process.enve inyectarlos en su código. Desafortunadamente, las cosas funcionan un poco diferente a lo que podrías estar acostumbrado. En primer lugar, no reemplaza process.env.FOO en lugar de import.meta.env.FOONo solo eso, simplemente reemplaza el prefijo con VITE_ defecto. entonces import.meta.env.VITE_FOO en realidad será reemplazado, pero no mi original FOO. Este prefijo se puede configurar, pero no se puede establecer como una cadena vacía.
Para proyectos heredados, puede grep y anular cualquier variable de entorno que desee usar import.meta.env, luego agrega un VITE_ prefijo, actualice su .env archivar y actualizar las variables de entorno en cada sistema CI/CD que utilice, o puede configurar un comportamiento de reemplazo más clásico process.env.ANYTHING tiene el valor de un .env archivos de desarrollo o reales process.env valor de producción.
Este es Werther define La funcionalidad es básicamente lo que necesitamos. Esto registra variables globales durante el desarrollo y reemplaza el texto sin procesar para la producción. Necesitamos configurarlo para que podamos leer manualmente nuestro .env el archivo está en modo de desarrollo y process.env objeto en modo de producción, luego agregue el apropiado define entrada.
Integrémoslos todos en el complemento de Vite. Primera ronda npm i dotenv.
Ahora veamos el código del complemento:
import dotenv from "dotenv";
const isProd = process.env.NODE_ENV === "production";
const envVarSource = isProd ? process.env : dotenv.config().parsed;
export const dotEnvReplacement = () => {
const replacements = Object.entries(envVarSource).reduce((obj, [key, val]) => {
obj[`process.env.${key}`] = `"${val}"`;
return obj;
}, {});
return {
name: "dotenv-replacement",
config(obj) {
obj.define = obj.define || {};
Object.assign(obj.define, replacements);
}
};
};Configura process.env.NODE_ENV Para nosotros, todo lo que tenemos que hacer es verificar en qué modo estamos.
Ahora obtenemos las variables reales del entorno. Si estamos en producción, tomamos process.env nosotros mismos Si estuviéramos en desarrollo, le pediríamos a dotenv que obtuviera el nuestro .env archivo, analizarlo y devolver un objeto con todos los valores.
Nuestro complemento es una función que devuelve un objeto al complemento de Vite. Inyectamos el valor del entorno en un nuevo objeto que tiene process.env. antes del valor, luego devolvemos nuestro objeto real al complemento. Hay muchos ganchos disponibles, pero aquí solo necesitamos config Hook, que nos permite modificar el objeto de configuración actual. define Si no existe ningún registro, agregue todos nuestros valores.
Pero antes de continuar, quiero señalar que hay una razón para la restricción de la variable de entorno Vite a la que nos referimos.El código anterior es la ruta del paquete. a menudo config, pero todavía significa cualquier valor process.env Si esta clave existe, está atascada en su código fuente. Hay posibles problemas de seguridad, así que tenlo en cuenta.
servidor proxy
¿Cómo es su aplicación web integrada? Si todo lo que hace es servir JavaScript / CSS / HTML, de hecho, todo sucede a través de un servicio separado ubicado en otro lugar, ¡sería genial! Estás efectivamente listo. Lo que te estoy mostrando debería ser lo que necesitas. El servidor de desarrollo de Vite atenderá sus activos según sea necesario y hará ping a todos sus servicios como antes.
Pero, ¿qué sucede si su aplicación web es lo suficientemente pequeña como para tener algunos servicios ejecutándose en su servidor web? Para el proyecto que estoy convirtiendo, tengo un extremo de GraphQL ejecutándose en mi servidor web. Para el desarrollo, estoy iniciando mi Rápido El servidor que anteriormente sabía cómo manejar los activos generados por la web. También ejecuté un visor de paquetes web para generar estos activos.
Pero dado que Vite proporciona su propio servidor de desarrollo, debemos iniciar el servidor Express (en un puerto diferente al que usa Vite) y luego llamar a un proxy para /graphql ellos llegan Ahí:
server: {
proxy: {
"/graphql": "http://localhost:3001"
}
} Esto le dice a Vite que cada solicitud /graphql debe ser enviado a http://localhost:3001/graphql.
Tenga en cuenta que lo hacemos No establecer proxy para http://localhost:3001/graphql en la configuración En su lugar, lo configuramos para http://localhost:3001 y confíe en Vite para agregar /graphql parte de la ruta (y todos los parámetros de la solicitud).
construir una biblioteca
Como una sección de bonificación rápida, analicemos brevemente la creación de bibliotecas. Por ejemplo, qué sucede si solo desea crear un archivo JavaScript, como una biblioteca como Redux. No hay ningún archivo HTML adjunto, por lo que primero debe decirle a Vite qué hacer:
build: {
outDir: "./public",
lib: {
entry: "./src/index.ts",
formats: ["cjs"],
fileName: "my-bundle.js"
}
}Dígale a Vite dónde colocar el paquete generado, cómo nombrarlo y qué formato construir. Tenga en cuenta que aquí uso CommonJS en lugar de módulos ES, ya que los módulos ES no están minimizados (en el momento de escribir este artículo) por temor a que pueda interrumpir el movimiento del árbol.
comenzarías esta construcción vite buildPara comenzar a ver y restaurar la biblioteca en caso de cambios, debe comenzar
vite build --watch.
me tuerzo
Vite es una herramienta increíblemente emocionante. No solo alivia el dolor y la molestia del empaquetado de aplicaciones web, sino que mejora significativamente la productividad de la misma en el proceso. Viene con un servidor de desarrollo extremadamente rápido, viene con un módulo de recarga en caliente y es compatible con todos los marcos básicos de JavaScript. Si está involucrado en el desarrollo web, ya sea por diversión, por su trabajo o ambos. - Lo recomiendo encarecidamente.
Deja una respuesta