Monorepo setup with Lerna, TypeScript, Babel 7 and other — Part 3
In the previous series we have configured monorepo with Lerna, Babel 7, Typescript for building and publishing packages, Jest for testing our code, Tslint and Stylelint for code quality checking and Storybook for components presenting. Now it’s time to create first simple package and publish it to the NPM registry.
First package
Let’s init first simple package which will be just Input with optional label for it:
and add react
and styled-components
as peerDependencies:
Development
Let’s create simple input with optional label:
Storybook
storybook
is configured, so it's time to create first story and test first package as well as storybook
and typescript
integration. Just create Input.story.tsx
inside input
package.
and run yarn storybook
. When the build process is finished, storybook will be accessible under http://localhost:6006
Testing
jest
is configured and ready to be used. Let's create simple snapshot tests for our package:
All tests could be run with simple command:
Now we have a chance to check how our integration of jest
and jest-styled-components
works. Just open created snapshot and check that classnames are replaced with c0
, c1
, etc:
Build
It’s time to build our package. Simply run
and we should have packages/input/dist
folder with all compiled files. The most important one is packages/input/dist/Input.js
which has:
Publish
It’s time to publish our first package, just hit yarn release
and answer Yes
for publishing question. The result should be like:
Lerna
says that package was published successfully. Now we could check it with yarn info
or through web interface for our local npm registry (http://localhost:4873
):
Moreover, lerna
should create proper tags in our repository associated with released packages and versions:
Last, but not least, let’s check that proper Changelog
was created for our package:
Now we have first package successfully released, what’s left? Second package which is dependant on our @taxi/input
package is left. Integration with lerna
would stay the same, simple as it is, however, it would requires some magic for making storybook
, jest
and tslint
works with dependent packages and proper modules resolutions without rebuilding them all the time. Plus, as a bonus we'll generate types declarations for our packages and include them as a part of final build.
More details is HERE.