Build as ES module as well as CommonJS

[nolanlawson]

I can see this project is in active development, but I thought this PR may be useful to you, even just as a proof of concept.

In the Mastodon project we are currently integrating emoji-mart, but we'd like to avoid the situation where we need to load the entire module (921kB) for all users. We use emojiIndex extensively, but the picker itself is only needed on-demand. So in principle, if emoji-mart were distributed as an ES module (with "module" declared in package.json), then we'd be able to do:

import { emojiIndex } from 'emoji-picker'

...and Webpack tree-shaking would take care of the rest.

I'm not sure if the current master is a good representation of what you intend to ship in dist (e.g. with raw .svg files?), but if so then this PR would be a reasonable approach to build both CommonJS and ES modules. Essentially it builds a dist/cjs directory (referenced by "main" in package.json) and then also a dist/es directory (referenced by "module" in packagejson). Webpack 2+ should pick up on the "module" version and thus allow for tree-shaking.

[EtienneLem]

👋 Thanks for the contribution!

I understand and the Webpack tree-shaking sure sounds very interesting. I’m no Webpack pro, but given EmojiMart src files are already using import & export, would it work just by setting "module": "src/index.js"?

[nolanlawson]

Sort of. If you do that, then your consumers would have to understand that when they use dist then they don't need any webpack loaders or babel plugins, whereas for src they do. I believe the optimal is to pre-apply the SVG-to-JSX transformation, Babel transformations, etc. and then produce both a CJS and an ESM build.

[nolanlawson]

OK, I cleaned up and rebased this PR so that it writes to a new dist-es/ directory, to maintain backwards compat for people who may already be using dist/ in emoji-mart 2.x.

Incidentally, having an ESM build also makes the uglified webpack build slightly smaller:

648K	out-cjs.min.js
644K	out-es.min.js

You can test using e.g. webpack --entry path/to/emoji-mart/dist/index.js --output-filename out.js && uglify-js -mc < out.js > out.min.js.

[EtienneLem]

I understand, makes sense! Thanks 🤘