dixonandmoe/rellax

ESModules

Opened this issue · 5 comments

Rellax as an ESModule

Running into the same issue. Cannot use Rellax as a common ES6 module.

I can't remember where I saw it, but I think you can do something like:

import * as Rellax from '../../rellax.js';

const instance = new Rellax();

I just don't know if this is a bundler feature or a native feature.

Import it as a normal ESM:
import Rellax from 'rellax'
then mount it:
var rellax = new Rellax('.div-class');
rellax.refresh();
Then use a bundler of your choice and it should work like a charm.

I later found out from this article, you can just import it using the file path.

Since Rellax is wrapped in a UMD-like wrapper, it is added to the window object. All we have to do is load it as a "side effect".

This is useful if you're just using a <script type="module"></script>, but can would work inside of an ESM file as well.

<script type="module">
import './rellax.min.js'; // after loaded we will be able to use window.Rellax

var rellax = new Rellax();
</script>

No need for a bundler 😊

Import it as a normal ESM: import Rellax from 'rellax' then mount it: var rellax = new Rellax('.div-class'); rellax.refresh(); Then use a bundler of your choice and it should work like a charm.

This is the right way.