DEV Community

Create a typescript utility library using Vite

Vinodh Kumar on August 15, 2023

In this post, we are going to look at how to create a typescript utility library using the Vite bundler. Why? There could be many reaso...
Collapse
 
clabnet profile image
Claudio Barca

In a few words: with Vite you can build web app (Vue, React, etc.) and libraries containing shared common code between projects.
This post explain how to create a library with Vite as bundler.

Collapse
 
nishchit14 profile image
Nishchit

Great writing, Thanks for the detaled article. Would you mind to add readme description in GitHub repo so one can get to know where to start.

Collapse
 
vinomanick profile image
Vinodh Kumar

Thanks for the feedback. Have added the readme as suggested please check it out.

Collapse
 
nishchit14 profile image
Nishchit

Perfect, Thank you.

Collapse
 
clabnet profile image
Claudio Barca

Thanks for this guide.
Why not use Vitest? It seems very integrated with Vite.

Collapse
 
vinomanick profile image
Vinodh Kumar

Hey thanks. I first started using Vite for a react project and went with Jest as it was the recommended framework of choice for the react app. And also, Vitest was still in early stage so went with the more popular testing framework and got used to the Jest setup.
Vitest looks promising and the APIs are also lot similar to Jest so will definitely give a try.

Collapse
 
zhamdi profile image
Zied Hamdi

This is cool, but the output is a single file, I'd like to compile multiple ts files as tsc does. Is that possible with vite?

I'm new to all of this, so sorry if it's a dumb question.

Collapse
 
vinomanick profile image
Vinodh Kumar • Edited

entry: [
resolve(__dirname, 'src/main.ts'),
resolve(__dirname, 'src/main-2.ts'),
],

Yes it's possible, update the build.lib.entry from type string to array in the vite.config.ts file and add all your input ts files in that array. It will compile and output multiple ts files. Hope that answers your question.

For more info checkout:
vitejs.dev/guide/build.html#librar...
vitejs.dev/config/build-options.ht...

Collapse
 
uttu316 profile image
Uttu316

how can we add support for es5 build production? with all popular polyfills.

Collapse
 
fireflysemantics profile image
Firefly Semantics Corporation

This is the best written article ever!