webpack - In npm/yarn workspaces, should packages consume src or dist

Question

I want to use a monorepo for our frontend app. We want to divide some react UI components into a package folder under "/packages/ui-components" and leave the app in an "/apps/app" folder and then have the app consume ui-components by importing it (simplified setup). We don't plan to release these packages to individual npm repos anytime soon, but just have the final app running.

I'm starting to worry a bit about how we can have the best workflow, and for some reason I cannot find this in my research:

Should the app consume the src-files from packages or instead compile each package to the dist folder and import only these?

Workflow wise we would like working in different packages seamless, so if someone edits in a package we would like these changes to immediately show in the App.

I see some pros and cons of using source-files compared to using a dist-output.

Pros of using src directly:

• Better tree-shaking, as dependencies can be peer-dependencies and libraries that are used by multiple packages can be combined.
• Smaller final bundle size due to webpack having better access to original data like full dependency-tree and common functions etc.
• Faster development iterations with smaller projects as there's only one build and smart webpack could potentially only recompile a few changed files.

Pros of using dist:

• More independent packages as they can contain their own build-pipeline.
• Will be easier to import as less peer-dependencies and special webpack-config is needed
• Ready to be published as a public npm package
• Possibly faster build-time as only changed packages and main-app needs to recompile on changes (I assume webpack can do cache, so maybe this doesnt matter much)

I'm sure I'm missing a lot of details; setting up the good development flow is quiet complicated these days and I would like to make it as simple to use as possible for my colleagues..

TL;DR;

Should packages in a mono-repo build to their dist for others to consume, or is it better to import directly from src.

question from:https://stackoverflow.com/questions/65919352/in-npm-yarn-workspaces-should-packages-consume-src-or-dist

Answer 1

It is a matter of tradeoffs.

If you consume dist of your packages, this means that in order to "apply" changes inside your package you need to build, then consume it in the app.

Some even suggests to publish the package to the registry (public or private), this allows you more loose coupling between the app and the packages.

On the other hand, working on the src has "seem less" like advantages, but will require your app setup to support it, since it will be the one that compile the package's code.

Personally, I'm using the second method, my apps are consuming from the src, and it was not so trivial to configure to since must of the tools are ignoring code from node_modules by default (Like babel-loader, which will ignore transpilation of code inside node_modules).

Most of my code was based on next-transpile-modules source code.