Vite stuff
Tags: vite
Published: 2023-12-31 00:44:07

- What the hell `build your app` means? All [these](https://medium.com/sessionstack-blog/how-javascript-works-a-guide-to-build-tools-exploring-webpack-parcel-rollup-es-build-and-2089bcf0ddb4#:~:text=The%20primary%20function%20of%20a,and%20used%20in%20the%20code#d792) things.
- Why vite uses server 5173? Apparently [because](https://www.reddit.com/r/programming/comments/xh1vyr/fun_fact_vites_default_port_is_5173_which_spells/) it kinda spells like `VITE`.
- vite uses `esbuild` to pre-bundle dependencies and `rollup` to bundle (build) for production. More about it [here](https://vitejs.dev/guide/why.html).
- `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](https://vitejs.dev/guide/features.html#css-modules). More information about CSS modules can be found in [this](https://css-tricks.com/css-modules-part-1-need/) CSS tricks blogpost and in [their](https://github.com/css-modules/css-modules) repo.
- Supports `PostCSS` by default. PostCSS [does](https://www.freecodecamp.org/news/what-is-postcss/) a bunch of stuff to your CSS. See their docs [here](https://postcss.org/). As far as I understand, you then add plugins based on what you need to do, see plugin marketplace [here](https://www.postcss.parts/). Like for instance you can use the [postcss nested plugin](https://github.com/postcss/postcss-nested), 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](https://vitejs.dev/guide/features.html#transpile-only). 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](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
- 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.
- The `/public` directory is explained [here](https://vitejs.dev/guide/assets.html#the-public-directory).
- 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](https://vitejs.dev/guide/assets.html#importing-asset-as-url).
- 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](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md#directives).
- `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](https://vitejs.dev/guide/env-and-mode.html). And if Typescript gets angry at something added by Vite, you should create `vite.d.ts` and add `/// <reference types="vite/client" />`. See [here](https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript). Look for "intellisense" in Vite docs. It will be defined as `any` though, so follow the example in [Vite docs](https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript).
- 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](https://vitejs.dev/guide/features.html#json).
- `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](https://vitejs.dev/guide/features.html#glob-import).
- You can customize the build, docs [here](https://vitejs.dev/guide/build.html#customizing-the-build).