ScrollReveal with webpack - ReferenceError: ScrollReveal is not defined

Question

使用 Laravel 5.6.29 和 laravel-mix@2.1.11 & webpack @3.12.0.

通过npm i scrollreveal安装scrollreveal@3.4.0并在我的app.js中使用require('scrollreveal')，我看到在我的 app.js 输出中可以找到 ScrollReveal。

但是，当我尝试使用 window.sr = ScrollReveal(); 启动它时，它抛出一个错误：ReferenceError: ScrollReveal is not defined，即使引用在定义之后.

我尝试了两种不同的方法。首先是：

resources/assets/js/app.js

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

或者第二种方式是：

resources/views/index.blade.php

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

但是，如果我以传统方式包含 js：

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

然后调用 ScrollReveal()，果然有效。

也许这是范围问题？但为什么它只出现在 ScrollReveal 而不是我使用的任何其他库中？ NodeJS require() 函数不是导入到全局范围吗？

更新： 我发现解决此问题的第三种方法是更改 resources/assets/js/app.js 并添加：

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

将解决此问题，因为这将在范围内使用 ES6 导入将 window.sr 定义为 ScrollReveal() (表面上）。

但是，为什么 NodeJS 不需要工作呢？

Answer 1

使它起作用，在某种程度上我还不知道它为什么起作用（如果你知道请详细说明！），但它起作用了。

更改 resources/assets/js/app.js 并添加：

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

使用 NodeJS require() 解决了这个问题。

javascript