Pila de tecnología de desarrollo front-end (herramientas) de 58,1 mil estrellas: 2023 Comprensión profunda de la instalación y el uso de la herramienta de desarrollo rápido vite (detalles)

Vite es una herramienta de creación y desarrollo front-end rápido que puede aumentar en gran medida la velocidad del desarrollo de aplicaciones web. Las características principales de Vite son tiempos de inicio rápidos y actualizaciones rápidas, que permiten a los desarrolladores probar y depurar su código más rápido. Su objetivo es proporcionar un entorno de desarrollo simple y liviano que pueda iniciar proyectos rápidamente y obtener una vista previa en tiempo real.

Texto original de este artículo: Pila de tecnología de desarrollo front-end (herramientas): 2023 Comprensión profunda de la instalación y el uso de la herramienta de desarrollo rápido vite (detalles) 58,1k estrellas

Para obtener más puntos técnicos relacionados con el front-end de Vue, preste atención a la cuenta pública: publicaciones posteriores de CTO Plus . Si tiene alguna pregunta, deje un mensaje en segundo plano para comunicarse.

imagen

Vite adopta un nuevo modelo de desarrollo que aprovecha el soporte nativo del módulo ES de los navegadores modernos para posponer el paso de compilación en el proceso de desarrollo hasta el tiempo de ejecución. En este blog, comprenderé en profundidad Vite, incluidas sus características, composición, instalación y uso, actualizaciones en caliente, variables de entorno, instalación y configuración de complementos, inicio del servidor de desarrollo y cómo usarlo para acelerar nuestro proceso de desarrollo y, finalmente, algunas de sus otras funciones (almacenamiento en caché, ts, css, procesamiento de recursos estáticos, etc.).

imagen

Para obtener más explicaciones sobre la tecnología de desarrollo de Vue, preste atención a los artículos de seguimiento de la cuenta pública CTO Plus .

imagen

Descripción general de Vite

Vite es una nueva generación de herramientas de construcción y desarrollo front-end que puede mejorar significativamente la experiencia de desarrollo front-end. Vite está destinado a proporcionar una configuración lista para usar, mientras que su API de complemento y API de JavaScript brindan un alto grado de extensibilidad y soporte completo de tipos. Debido a su método de importación de módulo ES nativo, se puede lograr un inicio en frío muy rápido del servidor.

Gran columna frontal: https://blog.csdn.net/zhouruifu2015/category_5734911

Vite es una herramienta de construcción front-end basada en el módulo ES nativo desarrollado por You Yuxi, el autor de vue, cuando estaba desarrollando vue3.0 . En su promoción posterior de vue3, elogió su nuevo trabajo Vite y dijo que "nunca volvería a utilizar webpack".

La construcción de Vite

Vite proporciona un conjunto de API nativas de ESM HMR. Los marcos compatibles con HMR pueden aprovechar esta API para proporcionar actualizaciones instantáneas y precisas sin la necesidad de recargar la página o borrar el estado de la aplicación. Vite tiene HMR integrado en Vue.js Single File Component (SFC) y React Fast Refresh.

Composición de Vite

Un servidor de desarrollo que se basa en módulos ES nativos, proporciona funciones integradas enriquecidas, es rápido y admite actualizaciones de módulos en caliente (HMR).

Un conjunto de instrucciones de compilación que utiliza un resumen para empaquetar código y está preconfigurado de fábrica para generar recursos estáticos altamente optimizados para entornos de producción. Al mismo tiempo, también proporciona una rica API de complementos, lo que brinda un alto grado de escalabilidad. Se puede utilizar para crear vue, reaccionar y otros proyectos.

¿Por qué elegir Vite?

Una gran ventaja de Vite durante el desarrollo es su rápido tiempo de inicio. Las herramientas tradicionales de desarrollo front-end (como webpack) requieren mucho trabajo de construcción al iniciar un proyecto, incluido el análisis de módulos, la compilación de código, el empaquetado de recursos, etc. Vite aprovecha el soporte del navegador para módulos ES nativos y puede ejecutar el código fuente directamente en el navegador, evitando el engorroso proceso de construcción y logrando un tiempo de inicio de segundo nivel.

Además, Vite también admite el reemplazo de módulos en caliente (HMR), lo que significa que después de modificar el código durante el desarrollo, la página se actualizará inmediatamente sin necesidad de actualización manual. Esto mejora enormemente la eficiencia del desarrollo y permite a los desarrolladores ver los resultados de las modificaciones más rápido.

Instalación y uso de Vite.

imagen

Para usar Vite, primero debe asegurarse de que Node.js esté instalado en su entorno de desarrollo (se recomienda usar la última versión). Luego, puedes instalar Vite globalmente usando el siguiente comando, podemos usar npm o Yarn para instalarlo. Ingrese el siguiente comando en la línea de comando:

npm instalar -g crear-vite

imagen

Una vez completada la instalación, puede usar el comando `create-vite` en la línea de comando para crear un nuevo proyecto de Vite:

Crear proyecto

crear-vite mi-proyecto

O si lo deja en blanco de forma predeterminada, se creará un proyecto llamado vite-project para nosotros. Elija un marco según su propia situación. Aquí elijo Vue.

imagen

Esto creará un nuevo proyecto llamado `vite-project` en el directorio actual. La estructura del directorio es la siguiente.

imagen

A continuación, siga las indicaciones en la línea de comando, ingrese el directorio del proyecto, instale las dependencias y ejecute el siguiente comando:

cd vite-proyecto

instalación npm

Utilice npm para construir el proyecto de Vite

Por supuesto, también puedes construir un proyecto vite instalando vite y combinándolo con npm. Los pasos e instrucciones son los siguientes:

instalación npm -g vite

hilo global agregar vite

Crea un nuevo proyecto Vite. Podemos crear un nuevo proyecto usando el siguiente comando:

npm init vite-app mi-proyecto

hilo crear vite-app mi-proyecto

Esto creará un nuevo proyecto llamado "mi-proyecto" e instalará todas las dependencias necesarias en él. Una vez completada la instalación, podemos ingresar al proyecto e iniciar el servidor de desarrollo. Similar a los pasos anteriores.

Iniciar el servidor de desarrollo

Una vez completada la instalación, para iniciar el servidor de desarrollo, podemos iniciar el proyecto usando el siguiente comando:

cd vite-proyecto

npm ejecutar desarrollador

cd vite-proyecto

desarrollador de hilo

Esto iniciará el servidor de desarrollo y abrirá una nueva ventana en el navegador que muestra nuestra aplicación.

imagen

Esto iniciará un servidor de desarrollo y abrirá la página de vista previa del proyecto en el navegador. Puede obtener una vista previa y depurar el proyecto en tiempo real en el navegador, y la página se actualizará inmediatamente después de realizar cambios en el código.

imagen

Usando la actualización en caliente de Vite

Una vez que hayamos iniciado el servidor de desarrollo, podemos comenzar a usar la función de actualización en caliente de Vite para acelerar nuestro proceso de desarrollo. Esto significa que podemos ver inmediatamente los cambios que realizamos sin actualizar toda la página.

Por ejemplo, podemos agregar algo de texto a nuestro código y ver los cambios inmediatamente después de guardarlos.

<template>  <div>    <h1>My Name is SteveRocket</h1>    <p>Welcome to my <b>CTO Plus</b></p>    <img src="../assets/wechat.png"/>  </div></template>

imagen

Después de guardar, podremos ver el nuevo texto inmediatamente. Este proceso no requiere reiniciar el servicio en absoluto. Lo que ves es lo que obtienes directamente en el navegador.

imagen

Construir e implementar

Una vez completado el desarrollo, puede compilar el proyecto utilizando el siguiente comando:

compilación de ejecución npm

Esto producirá una versión de producción optimizada, que incluye comprimir el código, extraer módulos comunes, generar huellas digitales de archivos, etc. Una vez que se completa la compilación, puede implementar los archivos generados en su entorno de producción.

De forma predeterminada, los archivos de compilación generados por Vite son estáticos y puedes implementarlos en cualquier servidor de archivos estático. Si está utilizando un navegador moderno, también puede utilizar la función de renderizado previo proporcionada por Vite para renderizar previamente la página en un archivo HTML estático para proporcionar un mejor rendimiento y SEO.

imagen

Variables de entorno de Vite

A continuación, echemos un vistazo a una característica importante de Vite: las variables de entorno, que permiten a los desarrolladores configurar el comportamiento de las aplicaciones según diferentes entornos.

Las variables de entorno de Vite se pueden configurar de dos maneras: parámetros de línea de comando y archivos `.env`.

Primero, veamos los parámetros de la línea de comando. Al iniciar el servidor de desarrollo de Vite, puede usar el parámetro `--env` para pasar variables de entorno. Por ejemplo, `vite --env.NODE_ENV=production` establecerá `NODE_ENV` en `production`. Dentro de su aplicación, puede usar `import.meta.env` para acceder a estas variables de entorno. Por ejemplo, `import.meta.env.NODE_ENV` devolverá `producción`.

Además de los parámetros de la línea de comandos, también puede utilizar archivos `.env` para configurar variables de entorno. El archivo `.env` es un archivo de texto sin formato y cada línea es un par clave-valor `clave=valor`. Por ejemplo, un archivo `.env` podría tener el siguiente contenido:

VITE_API_URL= https://mp.weixin.qq.com/s/sw-pK1SHnqhlUd81jwEKLA

VITE_API_KEY=1234567890

Dentro de una aplicación, se puede acceder a estas variables de entorno mediante `import.meta.env.VITE_API_URL` y `import.meta.env.VITE_API_KEY`.

Cabe señalar que los archivos `.env` solo se pueden utilizar en modo de desarrollo. En el modo de producción, las variables de entorno deben configurarse en el servidor, por ejemplo, utilizando software de servidor como Nginx o Apache.

Además, Vite también admite el uso de archivos de configuración específicos del entorno, como `.env.development`, `.env.production` y `.env.local`. Por ejemplo, la configuración en el archivo `.env.development` solo tendrá efecto en el modo de desarrollo, la configuración en el archivo `.env.production` solo tendrá efecto en el modo de producción y la configuración en el archivo `.env.development` solo tendrá efecto en el modo de producción. El archivo local` anulará la misma configuración en otros archivos de configuración.

importar.meta.env

Vite expone variables de entorno en un objeto especial import.meta.env. A continuación se muestran algunas variables integradas que se pueden utilizar en todas las situaciones:

import.meta.env.MODE: {string} El modo en el que se ejecuta la aplicación.
import.meta.env.BASE_URL: {string} La URL base al implementar la aplicación. Está determinado por el elemento de configuración base.
import.meta.env.PROD: {boolean} Si la aplicación se ejecuta en el entorno de producción.
import.meta.env.DEV: {boolean} Si la aplicación se ejecuta en un entorno de desarrollo (siempre lo contrario de import.meta.env.PROD).
import.meta.env.SSR: {boolean} Si la aplicación se está ejecutando en el servidor.

archivo .env

Si cambia el código del archivo env, deberá reiniciar el servicio para que surta efecto.

Vite usa dotenv para cargar variables de entorno adicionales desde los siguientes archivos en su directorio de entorno:

.env # se cargará en todos los casos

.env.local # Se cargará en todos los casos, pero git lo ignorará

.env.[modo] # Solo cargar en el modo especificado

.env.[mode].local # Solo se carga en el modo especificado, pero git lo ignorará

Prioridad de carga del entorno

Un archivo que especifica un modo (por ejemplo, .env.production) tendrá prioridad sobre el formato genérico (por ejemplo, .env).

Además, las variables de entorno que ya existen cuando se ejecuta Vite tienen la máxima prioridad y no serán sobrescritas por el archivo de clase .env. Por ejemplo, cuando ejecuta VITE_SOME_KEY=123 vite build.

El archivo de clase .env se cargará cuando se inicie Vite y los cambios entrarán en vigor después de reiniciar el servidor.

Las variables de entorno cargadas también estarán expuestas al código fuente del cliente en forma de cadenas a través de import.meta.env.

Para evitar la filtración accidental de algunas variables de entorno al cliente, solo las variables con el prefijo VITE_ estarán expuestas al código procesado por vite. Por ejemplo, las siguientes variables de entorno:

VITE_SOME_KEY=123

DB_PASSWORD=barra de menú

Solo VITE_SOME_KEY se expondrá como import.meta.env.VITE_SOME_KEY al código fuente del cliente, pero DB_PASSWORD no.

consola . iniciar sesión ( importar . meta . env . VITE_SOME_KEY) // 123

consola . log ( importar . meta . env . DB_PASSWORD) // indefinido

Además, Vite usa dotenv-expand para expandir variables directamente. Para obtener más información sobre la sintaxis, consulte su documentación.

Tenga en cuenta que si desea utilizar el símbolo $ en una variable de entorno, debe escapar con \.

CLAVE=123

NEW_KEY1=prueba$foo # prueba

NEW_KEY2=prueba\$foo # prueba$foo

NEW_KEY3=prueba$KEY # prueba123

Si desea personalizar el prefijo de las variables env, consulte envPrefix.

Precauciones de seguridad

Los archivos .env.*.local deben ser locales y pueden contener variables confidenciales. Debes agregar .local a tu .gitignore para evitar que git los registre.
Dado que cualquier variable expuesta al código fuente de Vite eventualmente aparecerá en el paquete del cliente, las variables VITE_* no deben contener ninguna información confidencial.

Consejos inteligentes para TypeScript

De forma predeterminada, Vite proporciona definiciones de tipos para import.meta.env en vite/client.d.ts. A medida que personaliza más y más variables de entorno en el archivo .env[mode], es posible que desee obtener TypeScript IntelliTips para estas variables de entorno definidas por el usuario con el prefijo VITE_ en su código.

Para hacer esto, puede crear un archivo env.d.ts en el directorio src y agregar la definición ImportMetaEnv de la siguiente manera:

mecanografiado

/// < tipos de referencia  =" vite/cliente " />

interfaz  ImportMetaEnv  {

  solo lectura  VITE_APP_TITLE :  cadena

  // Más variables de entorno...

interfaz  ImportMeta  {

   entorno de solo lectura :  ImportMetaEnv

Si su código depende de los tipos de entorno del navegador, como DOM y WebWorker, puede modificar el campo lib en tsconfig.json para obtener compatibilidad con tipos.

json

  " lib ":  [" WebWorker "]

Reemplazo de variables de entorno HTML

Vite también admite la sustitución de variables de entorno en archivos HTML. Cualquier atributo en import.meta.env se puede utilizar en archivos HTML mediante la sintaxis especial %ENV_NAME%:

HTML

<h1>Vite se está ejecutando en %MODE%</h1>

<p>Usando datos de %VITE_API_URL%</p>

Si la variable de entorno no existe en import.meta.env, como %NON_EXISTENT% que no existe, se ignorará y no se reemplazará. Esto es diferente de import.meta.env.NON_EXISTENT en JS, que se reemplazará en JS. no está definido.

modelo

De forma predeterminada, el servidor de desarrollo (comando dev) se ejecuta en modo de desarrollo y el comando de compilación se ejecuta en modo de producción.

Esto significa que cuando se ejecuta vite build, cargará automáticamente las variables de entorno que puedan estar presentes en .env.production:

# .env.producción

VITE_APP_TITLE=Mi aplicación

En tu aplicación, puedes usar import.meta.env.VITE_APP_TITLE para representar el título.

En algunos casos, si desea ejecutar un modo diferente para representar títulos diferentes cuando se compila vite, puede anular el modo predeterminado utilizado por el comando pasando el indicador de opción --mode. Por ejemplo, si desea crear su aplicación en modo de prueba (prelanzamiento):

intento

vite build --modo puesta en escena

También necesitas crear un nuevo archivo .env.staging:

# .env.puesta en escena

VITE_APP_TITLE=Mi aplicación (puesta en escena)

Dado que vite build ejecuta una compilación en modo de producción de forma predeterminada, también puede cambiarlo para ejecutar una compilación en modo de desarrollo usando un modo diferente y la configuración del archivo .env correspondiente:

# .env.prueba

NODE_ENV=desarrollo

imagen

Configuración de invitación

La configuración predeterminada de Vite es suficiente para satisfacer las necesidades de la mayoría de los proyectos, pero si necesita alguna configuración personalizada, puede crear un archivo `vite.config.js` en el directorio raíz del proyecto y exportar un objeto de configuración (yo construí este archivo). por el proyecto por defecto). Por ejemplo, puede especificar el archivo de entrada del proyecto, el directorio de salida, la configuración del proxy, etc. También puede ampliar la funcionalidad de Vite configurando complementos, como agregar compatibilidad con TypeScript, preprocesadores CSS, etc.

El siguiente es un ejemplo de configuración simple de `vite.config.js`:

imagen

module.exports = {
   
     // 入口文件  root: './src/main.js',  // 输出目录  build: {
   
       outDir: './dist',  },  // 代理设置  server: {
   
       proxy: {
   
         '/api': 'http://localhost:3000',    },  },};

Instalación y configuración del complemento Vite

Vite también proporciona muchos complementos útiles que pueden ayudarnos a acelerar aún más nuestro proceso de desarrollo. Por ejemplo, podemos usar los complementos de Vite para formatear automáticamente nuestro código, completar nuestro código automáticamente, detectar errores en nuestro código automáticamente, etc.

Para usar los complementos de Vite, podemos instalarlos en nuestro proyecto y configurarlos en nuestro archivo de configuración. Por ejemplo, para instalar el complemento de formato automático de Vite, podemos usar el siguiente comando:

npm instala vite-plugin-más bonito

hilo agregar vite-plugin-más bonito

Luego podemos configurar el complemento en nuestro archivo de configuración de Vite:

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import prettier from 'vite-plugin-prettier';
export default defineConfig({
   
     plugins: [    vue(),    prettier({
   
         // options    }),  ],});

Introducción a otras funciones de Vite

imagen

análisis y construcción de dependencias de npm

La importación nativa de ES no admite la siguiente importación de módulos básicos:

importar  {
    
    algún método  }  desde  ' mi-dep '

El código anterior arrojará un error en el navegador. Vite detectará dichas importaciones de módulos básicos en todos los archivos fuente cargados y realizará las siguientes acciones:

1. Su compilación previa mejora la velocidad de carga de la página y convierte CommonJS/UMD al formato ESM. El paso previo a la compilación lo realiza esbuild, lo que hace que el tiempo de inicio en frío de Vite sea mucho más rápido que el de cualquier empaquetador basado en JavaScript.

2. Vuelva a escribir las importaciones en URL legales, por ejemplo, /node_modules/.vite/deps/my-dep.js?v=f3sf2ebdpara que el navegador pueda importarlas correctamente.

Las dependencias están fuertemente almacenadas en caché.

Vite almacena en caché las dependencias solicitadas a través de encabezados HTTP, por lo que si desea editar o depurar una dependencia, siga los pasos aquí.

Dependencias preconstruidas

Cuando inicia Vite por primera vez, Vite crea previamente las dependencias del proyecto antes de cargar su sitio localmente. Por defecto, se hace de forma automática y transparente.

Esta es la "construcción previa de dependencia" que realiza Vite durante la ejecución. Este proceso tiene dos propósitos:

Compatibilidad con CommonJS y UMD: durante la fase de desarrollo, el servidor de desarrollo de Vite trata todo el código como módulos ES nativos. Por lo tanto, Vite primero debe convertir las dependencias proporcionadas como CommonJS o UMD en módulos ES.

Al convertir dependencias de CommonJS, Vite realiza un análisis de importación inteligente para que las importaciones con nombre funcionen correctamente incluso si las exportaciones del módulo se asignan dinámicamente (por ejemplo, React):

// En línea con las expectativas

importar React , { useState } desde ' reaccionar '

Rendimiento: para mejorar el rendimiento de carga de páginas posteriores, Vite convierte aquellas dependencias de ESM que tienen muchos módulos internos en un solo módulo.

Algunos paquetes crean sus módulos ES con muchos archivos separados que se importan entre sí. Por ejemplo, ¡lodash-es tiene más de 600 módulos integrados! Cuando ejecutamos import {debounce } desde 'lodash-es', ¡el navegador emite más de 600 solicitudes HTTP al mismo tiempo! Incluso si el servidor puede manejarlas fácilmente, una gran cantidad de solicitudes pueden causar congestión de la red en el lado del navegador, lo que hace que la carga de la página sea significativamente más lenta.

Al compilar previamente lodash-es en un solo módulo, ¡ahora solo necesitamos una solicitud HTTP!

Aviso

La preconstrucción de dependencias solo funciona en modo de desarrollo y utiliza esbuild para convertir dependencias en módulos ES. En las compilaciones de producción, se utilizará @rollup/plugin-commonjs.

caché del sistema de archivos

Vite almacena en caché las dependencias prediseñadas en node_modules/.vite. Determina si es necesario volver a ejecutar el paso previo a la compilación en función de varias fuentes:

El contenido del archivo de bloqueo del administrador de paquetes, como package-lock.json, Yarn.lock, pnpm-lock.yaml o bun.lockb;
La hora de modificación de la carpeta de parches;
Campos relevantes en vite.config.js;
El valor de NODE_ENV.

Solo necesita volver a ejecutar la compilación previa si uno de los cambios anteriores.

Si por alguna razón desea forzar a Vite a reconstruir las dependencias, puede especificar la opción --force al iniciar el servidor de desarrollo o eliminar manualmente el directorio de caché node_modules/.vite.

caché de navegador

Las solicitudes de dependencia prediseñadas utilizan el encabezado HTTP max-age=31536000, inmutable para un almacenamiento en caché sólido para mejorar el rendimiento de recarga de la página durante el desarrollo. Una vez almacenadas en caché, estas solicitudes nunca volverán a llegar al servidor de desarrollo. Si se instalan diferentes versiones de una dependencia (esto se refleja en el archivo de bloqueo del administrador de paquetes), la consulta de versiones adicionales fallará automáticamente. Si desea depurar dependencias editándolas localmente, puede:

Desactive temporalmente el almacenamiento en caché a través de la pestaña Red de las herramientas de desarrollo de su navegador;
Reinicie el servidor de desarrollo de Vite y especifique la opción --force para reconstruir las dependencias;
Vuelva a cargar la página.

Mecanografiado

Vite naturalmente admite la importación de archivos .ts.

Tenga en cuenta que Vite solo realiza la traducción de archivos .ts y no realiza ninguna verificación de tipo. Y suponga que su IDE o proceso de compilación ya maneja la verificación de tipos. Entonces, ¿cómo habilitar la verificación de tipos?

La razón por la que Vite no incluye la verificación de tipos como parte del proceso de conversión es porque las dos tareas son intrínsecamente diferentes. La traducción se puede realizar por archivo, totalmente consistente con el modelo de compilación bajo demanda de Vite. Por el contrario, la verificación de tipos requiere conocimiento de todo el gráfico del módulo. Interrumpir la verificación de tipos en el proceso de conversión de Vite inevitablemente socavará la ventaja de velocidad de Vite.

El trabajo de Vite es convertir los módulos fuente en un formulario que pueda ejecutarse en el navegador lo más rápido posible. Para hacer esto, recomendamos separar las comprobaciones de análisis estático del proceso de conversión de Vite. Este principio también se aplica a otras comprobaciones de análisis estático, como ESLint.

Al crear una compilación de producción, puede ejecutarla fuera del comando de compilación de Vite tsc --noEmit.
Durante el desarrollo, si necesita más indicaciones de IDE, le recomendamos ejecutarlo en un proceso separado tsc --noEmit --watch, o si desea ver los errores de tipo reportados directamente en el navegador, puede usar vite-plugin-checker.

imagen

Vite utiliza esbuild para traducir TypeScript a JavaScript, que es entre tsc20 y 30 veces más rápido, y el tiempo que tardan las actualizaciones de HMR en reflejarse en el navegador es inferior a 50 ms.

El uso de la sintaxis de importación y exportación de solo tipo puede evitar el problema potencial de "las importaciones de solo tipo están empaquetadas incorrectamente". Un ejemplo de cómo escribirlo es el siguiente:

importar  tipo  {
    
    T  }  desde  ' solo/tipos '

 tipo  de exportación {
    
    T  }

Tipo de cliente

Las definiciones de tipos predeterminadas de Vite están escritas para su API Node.js. Para complementar esto en el entorno de código de cliente de una aplicación Vite, agregue un archivo de declaración d.ts:

/// <tipos de referencia="vite/cliente" />

Alternativamente, puede agregar vite/client a compilerOptions.types en tsconfig.json:

{
   
     "compilerOptions": {
   
       "types": ["vite/client"]  }}

Esto proporcionará las siguientes adiciones de definición de tipo:

Importación de recursos (por ejemplo: importar un .svgarchivo)
import.meta.envDefinición de tipo de variables de entorno inyectadas por Vite
import.meta.hotDefinición del tipo de API HMR en

CONSEJO

Para anular la definición de tipo predeterminada, agregue un archivo que contenga su tipo definido, agregue la definición antes de la referencia del comentario de triple barra vite/cliente.

Por ejemplo, para definir un tipo para archivos *.svg en un componente de React:

vite-env-override.d.ts(el archivo que contiene sus mecanografías):

· ts

declarar  módulo  ' *.svg ' {

   Contenido constante :  Reaccionar . FC < Reaccionar . SVGProps < SVGElement >>

  exportar  contenido predeterminado

}

· El archivo que contiene la referencia a vite/client:

/// < tipos de referencia  =" ./vite-env-override.d.ts " />

/// < tipos de referencia  =" vite/cliente " />

CSS

Al importar el archivo .css se insertará el contenido en la etiqueta <style>, y también será compatible con HMR. También es posible recuperar el CSS procesado exportado por defecto para su módulo como una cadena.

La importación de ruta admite el uso de @import, por ejemplo: @import './base.css';
Admite el uso de módulos CSS, consulte

Cualquier archivo CSS .module.csscon un sufijo se considera un archivo de módulos CSS. La importación de dicho archivo devuelve el objeto de módulo correspondiente:

/* ejemplo.modulo.css */

.rojo {

color rojo;

}

importar clases desde './example.module.css'

document.getElementById('foo').className = clases.red

El comportamiento de los módulos CSS se puede css.modulesconfigurar a través de opciones.

Si css.modules.localsConventionsu configuración habilita la conversión de nombres de variables en formato camelCase (por ejemplo localsConvention: 'camelCaseOnly'), también puede utilizar la importación por nombre.

// .aplicar-color -> aplicarColor

importar {applyColor} desde './example.module.css'

document.getElementById('foo').className = aplicarColor

Soporta preprocesador CSS

Dado que Vite solo está dirigido a navegadores modernos, se recomienda escribir CSS simple y preparado para el futuro utilizando variables CSS nativas y complementos PostCSS que implementen borradores CSSWG (como postcss-nesting). Dicho esto, Vite también proporciona soporte integrado para archivos .scss, .sass, .less, .styl y .stylus. No es necesario instalar complementos de Vite específicos para ellos, pero se deben instalar las dependencias del preprocesador correspondientes:

# .scss y .sass

npm agregar -D descaro

# .menos

npm agregar -D menos

# .stylus y .stylus

npm agregar -D lápiz óptico

Además, es necesario agregar la siguiente configuración a vite.config.ts:

  css: {
   
         // css预处理器      preprocessorOptions: {
   
           scss: {
   
             additionalData: '@import "@/assets/style/mixin.scss";@import "@/assets/style/variable.scss";' //引入全局scss样式        }      }    }

También puede utilizar módulos CSS con un preprocesador anteponiendo .module a la extensión del archivo, como style.module.scss. (Esto se ha utilizado en proyectos de reacción)

Deshabilitar la inyección de CSS en la página

La inyección automática de contenido CSS se puede desactivar con el parámetro ?inline. Cuando se cierra, la cadena CSS procesada se utilizará como exportación predeterminada del módulo, pero el estilo no se inyectará en la página.

import './foo.css' // El estilo se inyectará en la página

importar otros estilos desde './bar.css?inline' //Los estilos no se inyectarán en la página

Aviso

A partir de Vite 4, la importación predeterminada y la importación por nombre de archivos CSS (por ejemplo, importar estilo desde './foo.css') están obsoletas. Utilice el parámetro ?inline en su lugar.

Procesamiento de recursos estáticos

Cómo introducir recursos estáticos

importar imgUrl desde './img.png'

document.getElementById('hero-img').src = imgUrl

Por ejemplo, imgUrl sería /img.png durante el desarrollo y /assets/img.2d8efhg.png después de una compilación de producción.

El comportamiento es similar al cargador de archivos de Webpack. La diferencia es que la importación puede utilizar una ruta pública absoluta (basada en la ruta raíz del proyecto durante el desarrollo) o una ruta relativa.

Las referencias a url() en CSS se manejan de la misma manera.
Si Vite usa el complemento Vue, las referencias de recursos en la plantilla Vue SFC se convertirán automáticamente en importaciones.
Los tipos de archivos de imágenes, medios y fuentes comunes se detectan automáticamente como recursos. Puede ampliar la lista interna utilizando la opción activosIncluir.
Los recursos a los que se hace referencia se incluyen como parte de la creación del gráfico de recursos; se generará un nombre de archivo hash que el complemento podrá procesar para su optimización.
Los recursos más pequeños que el valor de la opción activosInlineLimit se insertarán en las URL de datos base64.
De forma predeterminada, TypeScript no trata las importaciones de recursos estáticos como módulos válidos. Para resolver este problema, es necesario agregar vite/client. (Utilice vue scaffolding para inicializar el proyecto, estos se configurarán automáticamente)
Los marcadores de posición de Git LFS se excluyen automáticamente de la inserción porque no contienen el contenido del archivo que representan. Para estar en línea, asegúrese de descargar el contenido del archivo a través de Git LFS antes de compilarlo.
directorio publico

Si tienes los siguientes recursos:

No será referenciado por el código fuente (por ejemplo robots.txt)
Se debe mantener el nombre del archivo original (sin hash)
...o no desea importar el recurso en absoluto, simplemente obtenga su URL.

Luego puede colocar el recurso en el directorio público especificado, que debería estar ubicado en el directorio raíz de su proyecto. Se puede acceder directamente a los recursos de este directorio a través de la ruta / raíz durante el desarrollo y se copiarán completamente en el directorio raíz del directorio de destino durante el empaquetado.

El directorio predeterminado es <root>/public, pero se puede configurar mediante la opción publicDir.

Tenga en cuenta:

Los recursos importados publicsiempre deben utilizar la ruta raíz absoluta; por ejemplo, public/icon.pngse debe hacer referencia a ellos como en el código fuente /icon.png.
publicLos archivos JavaScript no deben hacer referencia a los recursos en.

nueva URL (url, import.meta.url)

import.meta.url es una función nativa de ESM que expone la URL del módulo actual. Combinándolo con el constructor de URL nativo, en un módulo de JavaScript, podemos obtener una URL de recurso estático completamente analizada a través de una ruta relativa:

const imgUrl = nueva URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

Esto funciona de forma nativa en los navegadores modernos; de hecho, ¡Vite no necesita lidiar con este código durante el desarrollo! Este modo también admite URL dinámicas a través de plantillas de cadenas:

función getImageUrl(nombre) {

devolver nueva URL(`./dir/${name}.png`, import.meta.url).href

}

Durante las compilaciones de producción, Vite realizará las transformaciones necesarias para garantizar que la URL aún apunte a la dirección correcta después del empaquetado y el hash de recursos. Sin embargo, esta cadena de URL debe ser estática para poder analizarla fácilmente. De lo contrario, el código quedará intacto, lo que provocará un error de ejecución si build.target no admite import.meta.url.

// Vite no convertirá esto

const imgUrl = nueva URL(imagePath, import.meta.url).href

Ejemplo:

<body>  <img id="imgbox"></img>  <script type="module">      // 在原生方式直接这样引用不行呢，需要使用new URL 结合import.meta.url的方式      // import imgUrl from './straw.jpg'      // import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。      // 注意：1.js的type类型需是module 2.返回的地址是绝对路径      console.log('import.meta',import.meta)      //new URL() 创建并返回一个URL对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。      // 如果url参数是相对 URL，则构造函数将使用url参数和可选的base参数作为基础。      const url = new URL('./straw.jpg',import.meta.url).href      document.getElementById('imgbox').src = url      // document.getElementById('imgbox').src = imgUrl</script></body>

NOTA: No disponible en SSR

Si está utilizando Vite en el modo de renderizado del lado del servidor, este modo no es compatible porque import.meta.url tiene una semántica diferente en los navegadores y en Node.js. Los productos del lado del servidor tampoco pueden predeterminar la URL del host del cliente.

imagen

Resumir

Con todo, Vite es una herramienta muy útil que puede acelerar enormemente el desarrollo de nuestras aplicaciones web. Su rápido tiempo de arranque y sus capacidades de actualización en caliente permiten a los desarrolladores probar y depurar su código más rápido. Además, Vite también proporciona muchos complementos útiles que pueden ayudarnos a acelerar aún más nuestro proceso de desarrollo. Si está buscando una herramienta de construcción rápida y poderosa, definitivamente vale la pena probar Vite.

Finalmente, espero que este artículo te ayude a comprender y utilizar las herramientas de Vite.

Link de referencia

Dirección de Github: https://github.com/vitejs/vite.git

importar.meta.url

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta

opción de límite de activos en línea

https://cn.vitejs.dev/config/build-options.html#build-assetsinlinelimit

opción de incluir activos

https://cn.vitejs.dev/config/shared-options.html#assetsinclude

rápidamente/cliente

https://cn.vitejs.dev/guide/features.html#client-types

constructor de URL

https://developer.mozilla.org/en-US/docs/Web/API/URL

módulos CSS

https://github.com/css-modules/css-modules

Gran columna de front-end
https://blog.csdn.net/zhouruifu2015/category_5734911 https://blog.csdn.net/zhouruifu2015/category_5734911 Columna de Node.js

https://blog.csdn.net/zhouruifu2015/category_5728369.html https://blog.csdn.net/zhouruifu2015/category_5728369.html

Más información· Busque [CTO Plus] en la cuenta pública de WeChat y sígalo para obtener más información. Aprendamos y comuniquemos juntos.

Para obtener una descripción de la cuenta pública, visite el siguiente enlace

Acerca de Articulate "Sé un portador de conocimiento y tecnología. Sé un entusiasta del aprendizaje permanente. Sé un círculo técnico con profundidad y amplitud". Siempre he querido desarrollar habilidades en el campo profesional https://mp.weixin.qq.com/ s/0yqGBPbOI6QxHqK17WxU8Q

Lectura recomendada: