[breaking] Create ESM builds (#429)

* Create ESM builds

* v4.2.0-beta

* Update documentation for ES6 modules

Author: wojtekmaj

.babelrc

@@ -6,5 +6,17 @@
   "plugins": [
     "@babel/transform-runtime",
     "@babel/proposal-class-properties"
-  ]
+  ],
+  "env": {
+    "production-esm": {
+      "presets": [
+        ["@babel/env", { "modules": false }],
+        "@babel/react"
+      ],
+      "plugins": [
+        ["@babel/transform-runtime", { "useESModules": true }],
+        "@babel/proposal-class-properties"
+      ]
+    }
+  }
 }

README.md

@@ -84,15 +84,23 @@ It is crucial for performance to use PDF.js worker whenever possible. This ensur
 Instead of directly importing/requiring `'react-pdf'`, import it like so:
 
 ```js
-import { Document } from 'react-pdf/dist/entry.webpack';
+// using ES6 modules
+import { Document } from 'react-pdf/dist/esm/entry.webpack';
+
+// using CommonJS modules
+import { Document } from 'react-pdf/dist/umd/entry.webpack';
 ```
 
 #### Parcel
 
 Instead of directly importing/requiring `'react-pdf'`, import it like so:
 
 ```js
-import { Document } from 'react-pdf/dist/entry.parcel';
+// using ES6 modules
+import { Document } from 'react-pdf/dist/esm/entry.parcel';
+
+// using CommonJS modules
+import { Document } from 'react-pdf/dist/umd/entry.parcel';
 ```
 
 #### Create React App
@@ -115,7 +123,11 @@ pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/$
 If you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so:
 
 ```js
-import 'react-pdf/dist/Page/AnnotationLayer.css';
+// using ES6 modules
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+
+// using CommonJS modules
+import 'react-pdf/dist/umd/Page/AnnotationLayer.css';
 ```
 
 ### Support for non-latin characters

copy-styles.js

@@ -1,9 +1,17 @@
 const fs = require('fs');
 
-fs.copyFile('src/Page/AnnotationLayer.css', 'dist/Page/AnnotationLayer.css', (error) => {
+fs.copyFile('src/Page/AnnotationLayer.css', 'dist/esm/Page/AnnotationLayer.css', (error) => {
   if (error) {
     throw error;
   }
   // eslint-disable-next-line no-console
-  console.log('AnnotationLayer.css copied successfully.');
+  console.log('AnnotationLayer.css copied successfully to ESM build.');
+});
+
+fs.copyFile('src/Page/AnnotationLayer.css', 'dist/umd/Page/AnnotationLayer.css', (error) => {
+  if (error) {
+    throw error;
+  }
+  // eslint-disable-next-line no-console
+  console.log('AnnotationLayer.css copied successfully to UMD build.');
 });

package.json

@@ -2,11 +2,14 @@
   "name": "react-pdf",
   "version": "4.2.0",
   "description": "Display PDFs in your React app as easily as if they were images.",
-  "main": "dist/entry.js",
+  "main": "dist/umd/entry.js",
+  "module": "dist/esm/entry.js",
   "source": "src/entry.js",
   "scripts": {
-    "build": "yarn build-js && yarn copy-styles",
-    "build-js": "babel src -d dist --ignore **/*.spec.js,**/*.spec.jsx",
+    "build": "yarn build-js-all && yarn copy-styles",
+    "build-js-all": "yarn build-js-esm && yarn build-js-umd",
+    "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js,**/*.spec.jsx",
+    "build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js,**/*.spec.jsx",
     "clean": "rimraf dist",
     "copy-styles": "node ./copy-styles.js",
     "jest": "jest",