How to setup a npm package project with Web Components using Lerna, Rollup, TypeScript and Jest.

I’m no expert, so I suggest you don’t trust everything I write below. That said, this worked on my machine 🙈 and is what I used to figure out how to setup my own npm package with  Web Components using Lerna,  Rollup,  TypeScript and Jest. If you find something I should change, please head over to  the discussion on GitHub and help me make both the article and the  example repo better.

I won’t dwell too much on my choice of frameworks, I guess you landed on this guide because you googled for some of them.

Web Components

My initial goal was to recreate some react components from the design system we use at work as  web components. My two cents here is that web components, using  shadow DOM, makes it easy to encapsulate the components and fully control the look and feel and they are framework agnostic.

Lerna

I wanted to publish separate packages on npm and needed a framework for making it easier to maintain a JavaScript project with multiple packages with dependencies and independently versioned packages. Lerna documentation.

Rollup

The old saying “Rollup for libraries, Webpack for apps” might no longer be entirely correct. The functionality gap between different bundlers has been narrowing over the years and new bundlers like Parcel and Snowpack gets traction. Anyway, I just wanted to learn more about Rollup.

Jest

Easy to get started and easy to use.

#programming #javascript #typescript