Shared dev command in monorepo

Shared dev command in monorepo

Typescript monorepo done differently
Published February 7, 2022


Given a Yarn Workspace with codebase all written in TypeScript
  • lib (e.g. a component library)
  • lib2, lib3 … (e.g. lodash utility library)
  • app (e.g. a CRA app)
In lib, we have
import lib2 from “lib2” import lib3 from “lib3”
In app, we have
import lib from “lib”
A common dev workflow could be
  1. work on app
  1. notice lib needs update
  1. notice lib2 and lib3 need update
  1. lib2 and lib3 updated
  1. lib updated
  1. back to continue working on app

The Problem

  • There are cross dependencies among those workspaces
  • The workspaces need to be build in the correct order (i.e. topological order) for app to work properly
Yarn workspace addressed the first problem pretty well but left the second to developers.That's you're likely required to a. run yarn watch/yarn dev in each workspace b. in a right order.
But can we just use a shared build cycle for all workspaces above?? Just like all those libs are part of the app workspace for development.

The Trick

Points the main/exports field in package.json to src/index.ts for all libs.


There is clear trade-offs in this approach, this essentially turns monorepo into a single package during local development. But you will still need to figure out how to release/publish those libraries, which is a separate problem to solve.