How to build and publish React TypeScript NPM packages with Vite

JS Build Tools Web Application Bundler Software Development

Webpack Landing Page
1

Webpack

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Pricing:
- Open Source
The main reason for writing this post is that although Vite is an excellent tool, it is still relatively new and sometimes lacks extensive documentation. When I initially had to set up a Vite npm package, it took me more time than I'd care to admit to get it working properly. Therefore, I've decided to create this post to help individuals who may be facing a similar situation and are looking for an alternative to Webpack.

#Web Application Bundler #JS Build Tools #Module Bundler 219 social mentions
Vite Landing Page
2

Vite

Next Generation Frontend Tooling
Pricing:
- Open Source
What is Vite? Most of you're probably familiar with what Vite is, but why not start with a quick introduction to get the flow going.

#Software Development #Web Frameworks #Developer Tools 374 social mentions
rollup.js Landing Page
3

rollup.js

Rollup is a module bundler for JavaScript which compiles small pieces of code into a larger piece such as application.
Pricing:
- Open Source
Vite (read as vit) is actually a combination of two great frontend tools - an immensely fast development server and a build command for shipping heavily optimized static assets using Rollup. Many developers have encountered the process of setting up a project using Create React App. While CRA can be useful for beginners due to its simplicity and abstraction of configuration, it has some drawbacks that outweigh its benefits, particularly its tendency to be bloated. Don't get me wrong, Vite is opinionated as well, but it's highly extensible through its Plugin API.

#Web Application Bundler #JS Build Tools #Front End Package Manager 44 social mentions