Typescript - Vite

Vite és un servidor de desenvolupament i una eina de compilació.

• Introducció
• Cloudlfare
• Hello, World!
• Tailwind
• TODO

Introducció

Vite és una eina de construcció que té com a objectiu proporcionar una experiència de desenvolupament més ràpida i lleugera per a projectes web moderns. Consta de dues parts principals:

• Un servidor de desenvolupament que proporciona millores amb funcionalitats enriquides sobre mòduls ES natius, per exemple, Reemplaçament de Mòduls en Calent (HMR) extremadament ràpid.

• Un build command que empaqueta el teu codi amb Rollup, preconfigurada per generar assets estàtics altament optimitzats per a producció.

Crea el teu primer projecte amb React

Getting Started

Cloudlfare

Create a new React SPA using the create-cloudflare CLI:

> bun create cloudflare@latest vite-mongo -- --framework=react --platform=workers

This command runs create-vite and then makes the necessary changes to incorporate the Cloudflare Vite plugin.

Seleccciona:

• category: Framework Starter
• framework: React
• variant: TypeScript + SWC
• git: No

Hello, World!

Puedes crear un proyecto:

bun create vite

¡Y a continuación sigue las instrucciones!

Otra opción es especificar directamente el nombre del proyecto y la plantilla que deseas usar,

Por ejemplo, para montar un proyecto de Vite + Reac, ejecuta:

bun create vite tsx --template react-swc-ts

Tailwind

Instala tailwindcss:

bun add -d tailwindcss @tailwindcss/vite

Añade el complemento @tailwindcss/vite a tu configuración de Vite.

vite.config.js

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Agrega un @import al archivo index.css que importe Tailwind CSS.

@import "tailwindcss";

Ejecute su proceso de compilación con npm run dev

bun run dev

Comienza a usar las clases de utilidad de Tailwind para darle estilo a tu contenido:

App.tsx

export default function App() {
  return (
    <div className="flex h-screen">
      <header className="m-auto">
        <p className="text-2xl underline underline-offset-8 font-['Menlo']
          hover:underline-offset-4 hover:text-3xl hover:border-red-500
           hover:border-4 hover:p-4 hover:cursor-pointer">
          David de Mingo
        </p>
      </header>
    </div>
  );
}

TODO