1. Conoce a vite

Webpack es actualmente la herramienta de compilación más utilizada para todo el front-end, pero existen otras herramientas de compilación después de webpack
Como resumen, paquete, trago, vite, etc.
什么是vite呢？Posicionamiento oficial: la próxima generación de herramientas de construcción y desarrollo front-end
¿Cómo definir la próxima generación de herramientas de desarrollo y construcción?
Sabemos que en el desarrollo real, el código que escribimos a menudo no es reconocido directamente por los navegadores, como ES6, TypeScript, archivos Vue, etc.
Entonces tenemos que convertir y compilar el código a través de herramientas de compilación, herramientas similares son webpack, rollup, paquete.
Pero a medida que el proyecto crece, el JavaScript que debe procesarse crece exponencialmente, con más y más módulos.
Las herramientas de compilación tardan mucho tiempo en iniciar el servidor y HMR tarda unos segundos en responder en el navegador
Entonces también hay un dicho: el mundo ha sufrido de webpack durante mucho tiempo
Vite (francés para "rápido", pronunciado /vit/) es una nueva herramienta de construcción de front-end que mejora significativamente la experiencia de desarrollo de front-end.
Consta principalmente de dos partes
一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

Vite está diseñado para proporcionar una configuración lista para usar, mientras que su API de complemento y la API de JavaScript brindan un alto grado de extensibilidad, con soporte de tipo completo

En segundo lugar, el navegador admite de forma nativa la modularización.

Ahora el navegador ya es compatible con la sintaxis es. Al usarlo, solo necesita agregar type='module' a la etiqueta del script.

Eche un vistazo a
math.js con un ejemplo

export function sum(num1, num2) {
    
    
  return num1 + num2;
}

principal.js

import {
    
     sum } from './js/math.js';

console.log("Hello World");
console.log(sum(20, 30));

índice.html

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
</head>
<body>

  <div id="app"></div>
  
  <script src="./src/main.js" type="module"></script>
</body>
</html>

Resuelva el dominio cruzado a través del servidor en vivo, ejecute index.html
inserte la descripción de la imagen aquí

Pero, ¿cuál es el problema si usamos ES Module directamente para desarrollar sin la ayuda de otras herramientas?
En primer lugar, encontraremos que al usar lodash se carga el código js de cientos de módulos, lo cual es un consumo enorme para que el navegador envíe solicitudes.
En segundo lugar, si hay código como TypeScript, less, vue, etc. en nuestro código, el navegador no puede reconocerlo directamente.

3. Instalación y uso de Vite

Nota: Vite en sí también depende de Node, por lo que también debe instalar el entorno de Node
Y Vite requiere que la versión de Node sea mayor que la versión 12
Primero, instalemos la herramienta vite
npm install vite –g # 全局安装
npm install vite –D # 局部安装
Iniciar el proyecto con vite
npx vite

4. Soporte de Vite para css

vite puede admitir directamente el procesamiento css
Solo importa css directamente
vite puede admitir directamente preprocesadores css, como menos
importar menos directamente
Después de eso, instale el compilador less.
npm install less -D
vite admite directamente la conversión postcss
Simplemente instale postcss y configure el archivo de configuración de postcss.config.js
npm install postcss postcss-preset-env -D

5. Soporte de Vite para TypeScript

vite tiene soporte nativo para TypeScript, usará directamente ESBuild para completar la compilación
Solo impórtalo directamente
Si miramos la solicitud en el navegador, encontraremos que la solicitud sigue siendo el código de ts
Esto se debe a que el servidor Connect in vite reenviará nuestra solicitud
Obtenga el código compilado de ts, devuélvalo al navegador y el navegador puede analizarlo directamente

6. El soporte de Vite para vue

vite proporciona soporte de primera prioridad para vue
Compatibilidad con componentes de archivo único de Vue 3:@vitejs/plugin-vue
Vue 3 JSX admite:@vitejs/plugin-vue-jsx
Vue 2 admite:underfin/vite-plugin-vue2
Instale complementos que admitan vue
npm install @vitejs/plugin-vue -D
Configurar complementos en vite.config.js

7. Proyecto de envasado Vite

Podemos completar la herramienta de empaquetado para el proyecto actual directamente a través de vite build
npx vite build
Podemos usar el método de vista previa para iniciar un servicio local para obtener una vista previa del efecto empaquetado
npx vite preview

Ocho, análisis ESBuild

Características de ESBuild
Compilaciones súper rápidas y sin necesidad de almacenamiento en caché
Modularidad con soporte ES6 y CommonJS
Tree Shaking con soporte ES6
API que admiten Go y JavaScript
Compatibilidad con TypeScript, JSX y otras compilaciones de sintaxis
Mapa de origen de soporte
Compresión de código de soporte
Soporte para extender otros complementos

9. Herramientas de andamios Vite

En desarrollo, es imposible para nosotros usar vite para construir todos los proyectos desde cero, como un proyecto de reacción, un proyecto de Vue
En este momento, vite también nos proporciona las herramientas de andamiaje correspondientes.
Entonces, Vite en realidad tiene dos herramientas
vite: equivalente a una herramienta de componente, similar a webpack, rollup
@vitejs/create-app：类似vue-cli、create-react-app
¿Qué pasa con el uso de herramientas de andamios?
npm init @vitejs/app
El enfoque anterior es equivalente a omitir el proceso de instalación de andamios
npm install @vitejs/create-app -g
create-app

El contenido anterior proviene principalmente del contenido explicativo de coderwhy teacher

Primeros pasos con Vite