带有Webpack的ScrollReveal-ReferenceError：未定义ScrollReveal

Question

Using Laravel 5.6.29 with laravel-mix@2.1.11 & webpack@3.12.0 .

After installing scrollreveal@3.4.0 via npm i scrollreveal and requiring it in my app.js with require('scrollreveal') , I see that in my app.js output that ScrollReveal is there to be found.

However, when I try to initiate it with window.sr = ScrollReveal(); it throws me an error: ReferenceError: ScrollReveal is not defined , even though the reference comes after the definition.

I tried it with two different ways. First is to:

resources/assets/js/app.js

require('scrollreveal');
window.sr = ScrollReveal();

or the second way which is:

resources/views/index.blade.php

<script type="text/javascript" src="{{ mix('/js/app.js') }}"></script>
<script type="text/javascript">
window.sr = ScrollReveal();
</script>

However, if I just include the js the traditional way:

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

and then make a call to ScrollReveal(), it actually works.

Perhaps it's somehow a scope problem? But why would it only appear with ScrollReveal and not any other libraries I use? And isn't NodeJS require() function importing to global scope?

UPDATE: Third way I found that fixes this problem is by changing resources/assets/js/app.js and adding:

import ScrollReveal from 'scrollreveal';
window.sr = ScrollReveal();

will fix the issue, as this will in-scope define window.sr as ScrollReveal() using ES6 import (appearantly).

However, why wouldn't NodeJS require work still?

Answer 1

Made it work, in a way I don't yet know why it works (do elaborate if you know!), but it works.

Changing resources/assets/js/app.js and adding:

require('scrollreveal')().reveal('.sreveal');

fixes the issue, using the NodeJS require().