What the hell build your app means? All these things.
Why vite uses server 5173? Apparently because it kinda spells like VITE.
vite uses esbuild to pre-bundle dependencies and rollup to bundle (build) for production. More about it here.
npm run build to bundle the code. Bundle will be created in /dist folder.
npx vite preview to spin up a local instance of the production build.
If we are conditionally loading a module in the code, vite will split and build that module in a separate file.
The script and link stylesheet src attribute can be relative to the html file, vite will figure it out based on the structure of your files and resolve to the right one.
CSS files with .module. in the name will be considered CSS modules. And it will be broken out in a separate file during build. See this. More information about CSS modules can be found in this CSS tricks blogpost and in their repo.
Supports PostCSS by default. PostCSS does a bunch of stuff to your CSS. See their docs here. As far as I understand, you then add plugins based on what you need to do, see plugin marketplace here. Like for instance you can use the postcss nested plugin, which let's you nest styles like Saas.
.ts files are supported out of the box. Vite transpiles the .ts files for you, but it does not do type checking. More on this here. As they say there, you can run tsc command before your build command.
How does it work with your JS framework of choice? npm create vite@latest vite-react (vite-react is the name you are giving to the project!) and choose your options. Or you can mention the name and the template you want to use, see here.
To support React, you create a template following instructions above. The vite config file will be created for you and you will see that it supports React (vite.config.ts or vite.config.js).
The vite config file just needs an object exported. If you choose the Typescript template, it will export default defineConfig (defineConfig gives you the autocomplete and is imported from 'vite').
Static assets (anything not js or css). Whatever is in the \public directory gets lifted and shifted into the /dist folder when built. Not hashed, like css or css files by default.
If you move the image out of the /public directory the image name will be hashed on build.
Importing a static asset returns the resolved public URL when served, see here.
If the static asset is small enough, it will inline the asset in the js file instead of building it in a separate file by base 64'ing it (you can see it by building, and then npx vite preview the files, and the src of the image in the html file will be data:image/png:base64,whataver. This will reduce http requests. You can tweak it in the config file.
vite-imagetools. You install it with npm install -D vite-imagetools. You will need that vite.config.js file now (or .ts). And add it there like so:
import { defineConfig } from 'vite'
import { imageTools } from 'vite-imagetools'
export default defineConfig({
plugins: [imageTools()]
})
imagetools will allow you to resize the image like so: import image from './my-image-path.png?h=400'. That will give you an image 400 px high. And the build size will be smaller. Or ./my-image-path.png?h=400&format=webp and the built format will be different. Or even ./my-image-path.png?h=400&format=webp&as=metadata and that will give you a bunch of data about the image that I can use in the code. It's all documented in the imagetools extension repo.
imagetools add other fun stuff like you can add raw at the end of the js import to get a text of the js, like so: import whatever from './whatever.js?raw'.
Vite adds import.meta.env so you know in which environment you are. That can be useful to do things differently in dev. Docs here. And if Typescript gets angry at something added by Vite, you should create vite.d.ts and add /// <reference types="vite/client" />. See here. Look for "intellisense" in Vite docs. It will be defined as any though, so follow the example in Vite docs.
JSON. You can import json files with Node no problem. But you have to import the whole object. Vite adds named exports to each property of the json file so you can just import that property you need. And it will tree shake the rest because they are not used. Docs here.
import.meta.glob imports all in the location you want. ie. const modules = import.meta.glob('./dir/**/*.js'). An import is a promise, so you will have to resolve each module. Or, you can add { eager: true } and it will resolve them for you. Docs here.
Top comments (0)