Add support for a raw es6 module import

[bryanbraun]

Browser support for es6 module imports is good!

This means that people can import libraries directly without a bundler IF the code (and package.json supports it).

Currently, anchor-js doesn't support it:

Fixing this will probably require some basic bundling adjustments to accommodate the format.

Here's some details we can reference when fixing this: https://github.com/rollup/rollup/wiki/pkg.module

[bryanbraun]

Update:

I might be able to take an easy step in this direction by replacing this with globalThis here: https://github.com/bryanbraun/anchorjs/blob/master/anchor.js#L21

It would require testing, but this might allow the plugin to be imported without webpack as an ES6 module with side-effects, like so:

import 'anchor.js';

This is because a normal browser script assumes this means window but this is undefined in es6 modules. However, globalThis will always refer to window, even within an ES6 module.

[bryanbraun]

I've added basic "global ESM" functionality to the 5.0.0 release: https://github.com/bryanbraun/anchorjs/releases/tag/5.0.0

Instructions have been added to the README and the docs site, but in short, usage looks like this:

import 'https://cdn.jsdelivr.net/npm/[email protected]/anchor.min.js';

anchors.add();

// You can also use the global class to create your own instance
// const moreAnchors = new AnchorJS();

More thorough ESM integration would require migration to a bundler like rollup, which can bundle to ESM, CommonJS, and UMD. If we want to do this in the future, we can handle it in a separate ticket. 👍