Skip to content

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

License

Notifications You must be signed in to change notification settings

taowen/vite-howto

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

The guide is still work in progress, you can join the discussion with author and readers #1

Problems are more important than the solutions

For each topic, there are 4 parts

  • The desired source code file/directory structure, and the motivation
  • What are the developer experience problems if structured this way
  • What are the user experience problems if structured this way
  • Solution walk through

Solution tend to change rapidly, for example webpack evolves into vite. But some problems are decades old, they seldom change. Understand the problems allow us to pick up new framework/tool faster, because you know what you are looking for.

You can reuse these examples as starter template

Download and install https://pnpm.io/ Run pnpm install to install dependencies of all packages in the workspace.

In each package, run pnpm dev to start dev server, run pnpm build && pnpm preview to start production server. Make some changes to deepen your understanding.

Every example is a starter template you can reuse by copy & paste. It works better this way, than reuse by framework with lots of options & callbacks.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published