Back

Shared dev command in monorepo

Typescript monorepo done differently

Context

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.

Caveat

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 https://yarnpkg.com/features/workspaces#publishing-workspaces, which is a separate problem to solve.

Comments