feat: output mjs modules to enable tree shaking

[aldeed]

Impact: minor
Type: feature

Changes

Updates to enable tree shaking in Webpack:

• Update build scripts to output .mjs files that use import/export in addition to .js files.
• Change main to index with no extension. Node will then pick either .mjs or .js based on which flags it is run with (if anything is imported from this package in a Node app, which is unlikely).
• Add module: "index.mjs" in package.json, which Webpack prefers over main if it's there.
• Set sideEffects: false in the package.json

We are including both a .js entry point that is commonjs and a .mjs entry point that uses ES modules. Tools like Webpack know how to figure out which to use.

One goal here is that if you don't import components that need certain dependencies, then you won't need to install those dependencies. Particularly, if you are not using the Stripe components, you should not need to install the Stripe-related peer dependency packages.

Another goal is just to eliminate unused code from the production bundle of a Webpack app. Unfortunately, this doesn't seem to fully work in the NextJS example storefront yet. It sounds like it may work when NextJS 8 is released.

This PR also fixes an issue introduced by the earlier update to Babel 7 and Jest 24. Jest 24 no longer keeps the default reporter if there is a reporters config, which this repo has. This meant that when you ran tests locally, it would appear to hang and pass or fail, but without actually logging any of the normal output. I added "default" reporter explicitly and things are back to normal. This was a bug affecting running tests only.

Breaking changes

None. We are including both a .js entry point that is commonjs and a .mjs entry point that uses ES modules. Tools like Webpack know how to figure out which to use.

Testing

Just verify that the example storefront works when you link in the updated package build.

In the components library repo, not in Docker:

yarn install
cd package
yarn install
yarn run build

Then check out this branch of the NextJS storefront: reactioncommerce/example-storefront#495. Stop the NextJS storefront and make the following change in its docker-compose.yml file:

volumes:
  - $HOME/.cache/yarn-offline-mirror:/home/node/.cache/yarn-offline-mirror
  - web-yarn:/home/node/.cache/yarn
  - .:/usr/local/src/reaction-app
  - empty_node_modules:/usr/local/src/reaction-app/node_modules # do not link node_modules in, and persist it between dc up runs
  - node_modules:/usr/local/src/node_modules
+ - /Users/eric/projects/reaction-component-library/package/dist:/usr/local/src/node_modules/@reactioncommerce/components

The part before the colon in that added line must be the exact full path to the /package/dist folder of this repo on your machine, the one that was created when you ran yarn run build above. This will link the build from the checkout into the node_modules that is used in the Docker container.

Then run docker-compose up -d like normal to access the app in your browser and test it. Be sure to remove and not commit the added line from docker-compose.yml when you are done testing.

[rc-publisher]

🚀 Preview deployed

Built with commit 9bae595

https://deploy-preview-395--stoic-hodgkin-c0179e.netlify.com

[willopez]

Ran the storefront with the build library and it runs correctly 👍

[rc-publisher]

🎉 This PR is included in version 0.63.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀