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:
- Go to
__tests__
directory. - Open
useDevBuild.html
in browser. - Open
useProdBuild.html
in browser. - Open the developer console and verify that output is there.
To test in nodejs run:
yarn test
References
- Read about Yarn workspaces.
Top comments (0)