PouchDB polyfilled for es6 Promises: CommonJS, AMD, RequireJS, ...?

Question

TL;DR My Question

To anyone who has successfully used PouchDB and polyfilled es6 (and es5) for older browsers:
How did you do it?

Which implementation of CommonJS / AMD / RequireJS was used (if that was the approach)?

Also... did you end up with several <script> tags in the index.html file, or all in one?

Many Thanks

Background

I need to use the PouchDB browser database in my web app.

A recommendation at PouchDB.com to deal with a Common Error is

Did you include the es6-promise shim library? Not every browser implements ES6 Promises correctly.

The GitHub README of the recommended 'es6-promise shim library' says

To polyfill the global environment (either in Node or in the browser via CommonJS) use the following code snippet:
require('es6-promise').polyfill();
Alternatively
require('es6-promise/auto');

Note: "...or in the browser via CommonJS "

So, I concluded that I need CommonJS to provide the require function.

One issues posted to the es6-promise shim library GitHub page is
Look for AMD first, then CJS in the UMD #246 which includes

...changes in the es6-promise build since 3.3.0 has introduced a new UMD which checks for a CommonJS env first unlike the old UMD which used to check for an AMD env first.

Which suggests I could use the ("more suited for the browser") AMD.

Reading the top answer to Relation between CommonJS, AMD and RequireJS?:

AMD is more suited for the browser, because it supports asynchronous loading of module dependencies.

RequireJS is an implementation of AMD, while at the same time trying to keep the spirit of CommonJS (mainly in the module identifiers).

So perhaps RequireJS?

Also...

In Common.js -- A CommonJS preprocessor that builds you CommonJS style app into code the browser can use, it says:

Step 3: Include the modules into your app and use them

<script src="js/common.js"></script>
<script src="js/foo.js"></script>
<script src="js/bar.js"></script>
<script>
    var bar = require('bar');
    bar.doTheThing();
</script>

However, this medium.com article says:

Without module systems like CommonJS, dependancies had to be loaded in <script> tags in the header of an HTML file, OR all code had to be lumped together which is incredibly slow and inefficient for file loading.

These seem to conflict.

Note

Polyfilling es5 seems to have been very straightforward:
Simply include <script src="./es5-shim-master/es5-shim.min.js"></script> in the index.html file. The browser doesn't complain.

PouchDB polyfilled for es6 Promises: CommonJS, AMD, RequireJS, ...?

0 Answers0