In this repository, we have a basic Vite setup in place. That is to say, we have Vite and an index.html file. Everything is mostly superfluous.
We can get the application started by running either of the following: npm start or npx vite.
This will start up a development server with a simple webpage.
At first, adding a <script> tag doesn't seem very exciting, but this is how Vite determines the initial entry point for our application.
In src/index.js, let's add the following:
console.log('Hello World!');
document.querySelector('h1').textContent = 'Hello World!';In index.html, we'll add a reference to this code:
<script src="/src/index.js"></script>This will give us an error if we put it in the <head>, but we're going to ignore that error for a minute.
In src/counter.js, we have the logic for a simple little counter. Let's pull it into src/index.js.
import { initializeCounter } from './counter';
console.log('Hello World!');
document.querySelector('h1').textContent = 'Hello World!';
initializeCounter();This will blow up in a new and different way. You should see an error that looks something like this:
index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
Luckily, this is an easy fix.
<script type="module" src="/src/index.js"></script>This fixes both issues:
- Imports work as expected.
- The DOM is loaded by the time our script runs.
You can read more about type="module" here.
You can build the application using either:
npm run buildnpx vite build
This will create a dist folder with the compiled output. The output will look something along these lines:
dist
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── assets
│ └── index-03e7ded5.js
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
It's everything in the public directory, our index.html, and the compiled bundle in an assets directory. In this case, it does some basic inlining and minification. There is nothing particularly special to see here.
In the previous example, even through we've broken our code up between two modules, Rollup is smart enought to figure out that they're all loaded at the same time and inlines them.
If we used a import() to load our file dynamically, we'll see that it's smart enough to split up our code.
import('./counter.js').then(({ initializeCounter }) => {
initializeCounter();
});We'll now see that we have two assets.
dist
├── …
├── assets
│ ├── counter-7777d3c9.js
│ └── index-1060a589.js
└── …
Out of the box, Vite supports hot module replacement. This means that if you edit a file. Only that file will be replaced and the rest of the application will continue remain. This allows Vite to refresh the page quickly and maintain the state between reloads.
Most of the time, when we're using a framework, we don't have to think about it and we'll get this for free. But, if we're doing something that has side effects, we may want to clean up after ourselves.
initializeCounter() returns a function that removes its event listeners. In the code below, we're going to:
- Dynamically load
src/counter.js - Call
initialzeCounter()and store itscleanupfunction. - If the module is replaced using hot module reloading, we'll clean up the event listeners from the old one and then reinitialize the counter.
import('./counter.js').then(({ initializeCounter }) => {
const cleanup = initializeCounter();
if (import.meta.hot) {
import.meta.hot.accept(({ module }) => {
cleanup();
cleanup = module.initializeCounter();
});
}
});If this code seems like a lot, keep in mind two things:
- This will be stripped out of the final build.
- Most frameworks will do this for you under the hood. This might be the most that you ever have to think about it.
This is a little bit contrived, but we're going to work with what we have. If the count goes negative, we want to show a banner.
We'll probably start with something like this:
const render = () => {
countElement.textContent = count;
if (count < 0) {
// Your code here.
}
};Solution
const render = () => {
countElement.textContent = count;
if (count < 0) {
import('./add-banner.js').then(({ addBanner }) => {
addBanner('The counter is negative!');
});
}
};Vite gives a few different ways to add CSS.
- We can add
<link>tags as we've done for years. - We can import the CSS files from our JavaScript.
- We can use CSS Modules.
Let's start with the most boring, but straight forward of the bunch. Add the following to your HTML.
<link rel="stylesheet" href="/src/style.css" />In counter.js, we can import a stylesheet.
import './counter.css';In both cases, the CSS is loaded globally. The notable difference here is that this CSS file will only be loaded when this module is loaded.
If you look closely, you'll notice that this CSS is not rendering.
.count {
font-size: 4em;
color: rebeccapurple;
}This makes sense, because because we don't have anything with that class.
If we give a CSS file a *.module.css extension, then we can access its fingerprinted classes.
import styles from './counter.module.css';
// …
countElement.classList.add(styles.count);This is the resulting class name.
<p id="count" class="_count_1o9rn_1">4</p>- Can you add an additional script that shows a banner or an alert when the count gets below zero?
- Can you use
banner.module.cssas a CSS module?
Solution
import styles from './banner.module.css';
// …
banner.classList.add(styles.banner);
closeButton.classList.add(styles.button);Notice how the CSS file is also dynamically added to the DOM as needed.
Using SCSS (or Sass) is relatively straight-forward. Consider this change to our CSS.
.button {
padding: 0.5rem 1rem;
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.5);
}
}We could change the import to ./banner.module.scss, but you'll see we get a very easy to resolve error.
Preprocessor dependency "sass" not found. Did you install it? Try
npm install -D sass.
Well, I guess we can handle this. That's it. Everything works as expected.
Okay, but let's say you wanted to use TypeScript. That's probably a lot of set up, right?
Just change the file extension to .ts. That's it.
With a few minor changes, add-banner.ts works as expected. But, TypeScript is annoyed by the CSS module and the fact that it doesn't know it's type.
We're going to solve for this by using a little library called typed-css-modules.
npm install -D typed-css-modulesNext, we can run tcm src and it will generate a .d.ts file for each CSS file.
If you want to keep this running, you can do something like this in your package.json.
{
"scripts": {
"watch": "vite & tcm --watch src",
"check:css": "tcm --listDifferent src"
}
}Or, if you use husky, you can automate this whenever you commit a change to a CSS file. In .husky/pre-commit:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run check:css