Build library using JavaScript, Webpack and Workspaces

A guide on building library using Webpack and Yarn workspaces. The explained goal and source code is in this repository.

Requirements

These are the requirements. But if you do check out the repository, there are references and explanation. I tried to provide explanation as good as I could, but it’s rarely perfect or univeral for everyone. There are steps to build and test the code so you can play around with it. Plenty of resources to dig and learn how it works.

• Familiarity with JavaScript.
• Some familiarity with Webpack. The code is using minimal configuration of around 15 lines of code.
• Some familiarity with Yarn workspaces.

The goal

Build an app that demonstrates building packages using JavaScript and monorepo.

Split logic using monorepo

Use module bundler to create a package that depends on another package which isn’t published to NPM.
Specs

For the sake of brevity let’s make a calculator.

We will build a calculator app that has four operations:

+    add
-    subtract
*    multiply
/    divide

We are building a calculator. We split logic to the four packages.

Our calculator will use four packages. We use webpack to build our calculator package.

Initiate repository

Run (The following command is a shorthand for yarn install):

yarn

Build package

Development and production

yarn build

Run tests

First build the package.

To test in browser:

1. Go to __tests__ directory.
2. Open useDevBuild.html in browser.
3. Open useProdBuild.html in browser.
4. Open the developer console and verify that output is there.

To test in nodejs run:

yarn test

References

• Read about Yarn workspaces.