22x-package NPM

vite-vanilla-ts-template

Check out the older version of this template, https://github.com/entwurfhaus/vite-vanilla-ts-module. And always check the package.json dependencies - this template scaffolded from Vite 5.x, and compatible with Node 18.x & beyond

This is a minimalist Vite vanilla-ts template, for developing ts supported modules for publishing onto npm.

npx degit entwurfhaus/vite-vanilla-ts-template my-awesome-package

Getting started

First, let's install all dependencies:

pnpm i

When you're ready to build and use your new npm package, run:

pnpm build

Why `pnpm` and not `npm` or `yarn`?

This minimalist template is meant to be easily migrated to monorepo frameworks, such as turbo (Turborepo) and nx (Nx). Thus, it is why files like tsconfig.json have a simple configuration.

And pnpm offers several benefits:

Efficient disk space usage through a content-addressable store
Faster installation times compared to npm and yarn
Strict dependency resolution, preventing phantom dependencies
Built-in monorepo support with workspaces
Compatibility with npm and yarn workflows
Improved security with a stricter package management approach

What is configured in this template?

Generate declaration Typescript file: vite-plugin-dts: A useful Vite plugin that automatically generates and produces the index.d.ts file in the dist folder.
Linting: eslint: Standard configuration included, together with eslint-plugin-simple-import-sort for organizing imports (a must-have for code organization).
Code coverage: Using istanbul integration with vitest by default. This is optional and can be reconfigured to use coverage-c8 (or its future renamed version) if preferred.

And you can configure & add-on anything you like, to suit your development whether if it is the standalone module repo, or module within a monorepo.

Github actions (optional)

I've added Github actions in this template - delete the .github folder if you're not using Github actions in your devops pipeline.

Testing

Unit testing with `vitest`

Run vitest (without "watch" mode):

pnpm test

Or run vitest with code coverage report:

pnpm test:coverage

Local testing only

Run below command in your new npm package repository. For example, cd /var/www/my-awesome-package then run:

pnpm link --global

Lastly, go to your desired application that will use your new npm package and run:

pnpm link /var/www/my-awesome-package

Publishing

NPM

And when ready to publish to npm:

npm login
npm publish

References

The list of online references & to credit the open-source community, for making mini projects like these possible, helping developers save many minutes working.