ScrollReveal 与 webpack - ReferenceError: ScrollReveal 未定义答案

【问题标题】：ScrollReveal with webpack - ReferenceError: ScrollReveal is not definedScrollReveal 与 webpack - ReferenceError: ScrollReveal 未定义
【发布时间】：2019-01-10 06:38:06
【问题描述】：

将 Laravel 5.6.29 与 laravel-mix@2.1.11 和 webpack@3.12.0 结合使用。

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

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

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

资源/资产/js/app.js

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

或者第二种方式是：

资源/视图/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 还不需要工作呢？

【问题讨论】：

使用你的更新修复，对我也有用。我担心官方文档中的评论，即必须在关闭之前添加库，尽管我认为这对于想要在初始视口上制作动画的人来说是个问题。

标签： javascript webpack referenceerror laravel-mix scrollreveal.js

【解决方案1】：

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

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

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

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

【讨论】：