Distribute ES Module bundle.

- Smaller and more efficient that uses features available in browsers
  that support ES Modules.
- Update README.
- Use slightly looser browser spec for standard bundle. > 0.25% vs >
  0.50%. Small relative bundle size increase.

Author: davidlehn

CHANGELOG.md

@@ -10,6 +10,10 @@
   bundle size but is more automated and likely more accurately supporting
   intended output targets.
 
+### Added
+- Distribute a `jsonld.esm.min.js` bundle optimized for the features available
+  in browsers that support ES Modules.
+
 ### Removed
 - Use of deprecated library `request` in node documentLoader.
 - **BREAKING** Parameter `request` has been removed from the node

README.md

@@ -94,15 +94,43 @@ npm install jsonld
 const jsonld = require('jsonld');
 ```
 
-### Browser (AMD) + npm
+### Browser (bundler) + npm
+
+```
+npm install jsonld
+```
+
+Use your favorite bundling technology ([webpack][], [Rollup][], etc) to
+directly bundle your code that loads `jsonld`. Note that you will need support
+for ES2017+ code.
+
+### Browser Bundles
+
+The built npm package includes bundled code suitable for use in browsers. Two
+versions are provided:
+
+- `./dist/jsonld.min.js`: A version built for wide compatibility with modern
+  and older browsers.  Includes many polyfills and code transformations and is
+  larger and less efficient.
+- `./dist/jsonld.esm.min.js`: A version built for features available in
+  browsers that support ES Modules. Fewer polyfills and transformations are
+  required making the code smaller and more efficient.
+
+The two bundles can be used at the same to to allow modern browsers to use
+newer code. Lookup using `script` tags with `type="module"` and `nomodule`.
+
+Also see the `webpack.config.js` if you would like to make a custom bundle for
+specific targets.
+
+#### Browser (AMD) + npm
 
 ```
 npm install jsonld
 ```
 
 Use your favorite technology to load `node_modules/dist/jsonld.min.js`.
 
-### CDNJS CDN
+#### CDNJS CDN
 
 To use [CDNJS](https://cdnjs.com/) include this script tag:
 
@@ -112,7 +140,7 @@ To use [CDNJS](https://cdnjs.com/) include this script tag:
 
 Check https://cdnjs.com/libraries/jsonld for the latest available version.
 
-### jsDeliver CDN
+#### jsDeliver CDN
 
 To use [jsDeliver](https://www.jsdelivr.com/) include this script tag:
 
@@ -122,7 +150,7 @@ To use [jsDeliver](https://www.jsdelivr.com/) include this script tag:
 
 See https://www.jsdelivr.com/package/npm/jsonld for the latest available version.
 
-### unpkg CDN
+#### unpkg CDN
 
 To use [unpkg](https://unpkg.com/) include this script tag:
 
@@ -450,10 +478,12 @@ Use a command line with a test suite and a benchmark flag:
 [Microformats]: http://microformats.org/
 [RDFa]: http://www.w3.org/TR/rdfa-core/
 [RFC7159]: http://tools.ietf.org/html/rfc7159
+[Rollup]: https://rollupjs.org/
 [WG test suite]: https://github.com/w3c/json-ld-api/tree/master/tests
 [errata]: http://www.w3.org/2014/json-ld-errata
 [jsonld-cli]: https://github.com/digitalbazaar/jsonld-cli
 [jsonld-request]: https://github.com/digitalbazaar/jsonld-request
 [rdf-canonize-native]: https://github.com/digitalbazaar/rdf-canonize-native
 [test runner]: https://github.com/digitalbazaar/jsonld.js/blob/master/tests/test-common.js
 [test suite]: https://github.com/json-ld/json-ld.org/tree/master/test-suite
+[webpack]: https://webpack.js.org/

karma.conf.js

@@ -101,7 +101,11 @@ module.exports = function(config) {
                       useBuiltIns: 'usage',
                       corejs: '3.9',
                       bugfixes: true,
-                      //debug: true
+                      //debug: true,
+                      targets: {
+                        // test with slightly looser browserslist defaults
+                        browsers: 'defaults, > 0.25%'
+                      }
                     }
                   ]
                 ],

webpack.config.js

@@ -14,29 +14,44 @@ module.exports = [];
 // custom setup for each output
 // all built files will export the "jsonld" library but with different content
 const outputs = [
-  // core jsonld library
+  // core jsonld library (standard)
+  // larger version for wide compatibilty
   {
     entry: [
       // main lib
       './lib/index.js'
     ],
-    filenameBase: 'jsonld'
+    filenameBase: 'jsonld',
+    targets: {
+      // use slightly looser browserslist defaults
+      browsers: 'defaults, > 0.25%'
+    }
   },
-  /*
-  // core jsonld library + extra utils and networking support
+  // core jsonld library (esm)
+  // smaller version using features from browsers with ES Modules support
   {
-    entry: ['./lib/index.all.js'],
-    filenameBase: 'jsonld.all'
-  }
-  */
-  // custom builds can be created by specifying the high level files you need
-  // webpack will pull in dependencies as needed
-  // Note: if using UMD or similar, add jsonld.js *last* to properly export
-  // the top level jsonld namespace.
+    entry: [
+      // main lib
+      './lib/index.js'
+    ],
+    filenameBase: 'jsonld.esm',
+    targets: {
+      esmodules: true
+    }
+  },
+  // - custom builds can be created by specifying the high level files you need
+  // - webpack will pull in dependencies as needed
+  // - Note: if using UMD or similar, add jsonld.js *last* to properly export
+  //   the top level jsonld namespace.
+  // - see Babel and browserslist docs for targets
   //{
   //  entry: ['./lib/FOO.js', ..., './lib/jsonld.js'],
   //  filenameBase: 'jsonld.custom'
-  //  libraryTarget: 'umd'
+  //  libraryTarget: 'umd',
+  //  targets: {
+  //    // for example, just target latest browsers for development
+  //    browsers: 'last 1 chrome version, last 1 firefox version',
+  //  }
   //}
 ];
 
@@ -47,6 +62,10 @@ outputs.forEach(info => {
     entry: {
       jsonld: info.entry
     },
+    // enable for easier debugging
+    //optimization: {
+    //  minimize: false
+    //},
     module: {
       rules: [
         {
@@ -74,7 +93,8 @@ outputs.forEach(info => {
                     corejs: '3.9',
                     // TODO: remove for babel 8
                     bugfixes: true,
-                    //debug: true
+                    //debug: true,
+                    targets: info.targets
                   }
                 ]
               ],