chore(build): provide esm support for bundlers (#1197)

In this diff I added esm bundle which will allow user bundlers
to produce much smaller code. Currently regular babel output is
wrapped with module iife.

This project has a lot of files so with single esm file users will
bundle it slightly faster.

As a bonus we see the size of the project without dependencies.

.size-snapshot.json

@@ -1,12 +1,26 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 469894,
-    "minified": 152522,
-    "gzipped": 42174
+    "bundled": 470853,
+    "minified": 153064,
+    "gzipped": 42298
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 412865,
-    "minified": 135555,
-    "gzipped": 38300
+    "bundled": 413805,
+    "minified": 136004,
+    "gzipped": 38362
+  },
+  "dist/react-big-calendar.esm.js": {
+    "bundled": 167523,
+    "minified": 80477,
+    "gzipped": 19800,
+    "treeshaked": {
+      "rollup": {
+        "code": 62050,
+        "import_statements": 1470
+      },
+      "webpack": {
+        "code": 65556
+      }
+    }
   }
 }

package.json

@@ -6,6 +6,7 @@
   "repository": "intljusticemission/react-big-calendar",
   "license": "MIT",
   "main": "lib/index.js",
+  "module": "dist/react-big-calendar.esm.js",
   "style": "lib/css/react-big-calendar.css",
   "files": [
     "lib/",

rollup.config.js

@@ -4,6 +4,7 @@ import commonjs from 'rollup-plugin-commonjs'
 import replace from 'rollup-plugin-replace'
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
 import { terser } from 'rollup-plugin-terser'
+import pkg from './package.json'
 
 const input = './src/index.js'
 const name = 'ReactBigCalendar'
@@ -58,4 +59,12 @@ export default [
       terser(),
     ],
   },
+
+  {
+    input,
+    output: { file: pkg.module, format: 'esm' },
+    // prevent bundling all dependencies
+    external: id => !id.startsWith('.') && !id.startsWith('/'),
+    plugins: [babel(babelOptions), sizeSnapshot()],
+  },
 ]