wntd / lerna-webpack-example

An example monorepo implementing lerna, webpack, codesplitting, and eslint

lerna-webpack-example

DEMO

This repository provides an example configuration for a monorepo using lerna. There are a few features baked into this relatively simple app.

1. Monorepo code splitting via lerna

2. Babel building across packages.

3. A package with a webpack config that has dependencies on packages in the monorepo.

4. Code splitting and asynchronous loading.

5. Using "external" & code splitting to only load the code necessary

Code splitting + Routing example

This is useful pattern for upgrading older sites that rely on page redirects (e.g. django). We use this at Klaviyo to incrementally add react pages in a well factored way.

The navigation links on the main django site use 'hard' page redirects to reload the entire page. on load of the page, the main.js bundle is loaded. If the current route matches in orchestra/src/index.js we then load the associated package and only that package to render.

Commands

• Bootstrap all dependencies. This will hoist shared packages to the root dir for a faster install. It will also link your dependencies together via symlinks.

  NOTE - use yarn install on the root repository first to install the necessary devdependencies (lerna)

  yarn bootstrap

• Start a dev server. This will run babel in all packages and developer mode webpack in any package that has a dev script.

  yarn dev

• Build babel & webpack across all packages

  yarn build

• Lint all packages

  yarn lint

Directory structure

.
├── README.md
├── lerna.json
├── package.json
├── packages
│   ├── async-leaf          // Asynchronously loaded package (via webpack chunks)
│   │   ├── package.json
│   │   └── src
│   │       └── index.jsx
│   ├── leaf                // Synchronously loaded package
│   │   ├── package.json
│   │   └── src
│   │       └── index.jsx
│   └── orchestra           // Web facing package
│       ├── package.json
│       ├── src
│       │   ├── index.html
│       │   └── index.jsx
│       └── webpack.config.js
└── yarn.lock

Suggestions

I am fairly new to lerna and would love recommendations, or PRs, on how I might improve this simple example.