Splitting webpack es6 react project into npm packages

Question

i'm asking for best practices here.

Has anyone successfully split a react web app project into private npm 'feature' packages?

I have a big codebase that is starting to be a pain to develop and splitting into separate packages would be good.

I would want to

• export React components, es6 modules and flow types from packages to use in the main package
• unit test packages individually
• not have to bundle each one separately with webpack/rollup (seems unnecessary, the main project should bundle all the js)

The important bits of the current stack are

• React (or preact)
• babel
• flow
• webpack
• es6 modules (import / export syntax)

When experimenting with this, i tried just copying parts of the code into scoped private npm packages and configuring main project babel to include that @scope path inside node_modules.

I ran into all kinds of problems with babel not undestanding jsx in the imported code and flow types not being visible in the main project

Answer 1

I'm doing that with layer-pack.

It allow making "inheritable" projects, including theirs webpack configs & come with a small CLI tool to call webpack with the right config

It deal with node_modules & webpack to make inheritable "code layers" & even work when compiling node scripts or using monorepo structure

Also it come with some nice features like glob resolving, which help including an unknown number of files.

There is samples here & doc here

The plugin probably need some improvements; but i'm using it in all my projects for some time now, it's pretty stable

Hope it help :)

Answer 2

I had similar requirements. We also wanted to keep source-code maps (so you're not trying to debug from babelled code).

We found a simple solution using symlinks:

1. Just sym-link the "packages" in, using ln -s (for Linux or Mac; I don't know what the equivalent is for Windows).
2. Set webpack's resolve.symlinks property to false. In our setup that meant editing webpack.config.js to have resolve: {symlinks: false }}.

Then your code is split out -- but as far as the build process is concerned, nothing has changed.

You can unit test with tests in each "package".

E.g. your project folders might end up looking something like this:

• myapp
  • src
    • subpackage: a symlink to subpackage/src
  • webpack.config.js, package.json, etc.
• subpackage
  • src
  • test: unit tests for src files
  • webpack.config.js for the unit tests

This is easy and it works.

Before settling on this, we did try packaging things as stand-alone npm packages with their own package.json. But we couldn't get this to work so that it built and ran, and could be debugged.