Modularization best practice to common web development scenarios, applies to vue/react/... any framework

Last update: May 17, 2022

Licence TypeScript

Vite How-to Guide

There are plenty of tutorials on how to use vite to compile code written in latest and hottest technology, this guide is different. It is about how to split application into files/packages, how to use TypeScript to ensure compatibility, how to use Vite to link them back (either statically or dynamically). Demo code is written in plain old javascript using vanilla web api.

I write this "Vite How-to Guide" after I have read tons of Webpack/SSR/Typescript guide on the internet. They try to tell you a series of command to follow blindly without a understanding of the essential problems. Also the solution is coupled with specific frontend framework and plugins to be "one key solution". But all those encapsulation makes debugging harder. In this guide, I will tell you how to write minimal vite (without plugins) and typescript configuration to do it yourself. You know what is the essential problem, you understand the theory, you copy paste the solution, then you can modify it confidently when problem arises.