Webpack破坏ScrollReveal javascript？

Question

我使用的是Foundation 6.4.3和ZURB模板。由于某些原因，我无法使ScrollReveal javascript工作。我总是收到错误Uncaught ReferenceError: ScrollReveal is not defined。当我从外部网址加载ScrollReveal时，它可以工作。然而，一旦基金会运行它所做的任何事情(巴别塔，webpack，无论什么)，它就会向ScrollReveal.js中添加一堆与webpack相关的东西。我无论如何也想不出为什么它会崩溃，或者我做错了什么。我尝试过很多不同的东西。

你可以在这里看到最初的ScrollReveal.js和它运行过古尔普，webpack，巴别塔等之后发生的变化：

https://www.diffchecker.com/NUPl2t0I

我的基础app.js文件如下所示：

import $ from 'jquery';
import whatInput from 'what-input';


window.$ = $;
window.jQuery = $;

require('./scrollreveal.js');

//also tried this which does not seem to work either..
//import ScrollReveal from 'scrollreveal';


import './lib/foundation-explicit-pieces';

我的页面上的JS如下所示：

$(document).foundation().ready(function(){   
    window.sr = ScrollReveal({ reset: true });
    sr.reveal('.people-image', {opacity: 0.9,duration:3000});
});

我真的不确定我哪里出错了，以及是什么导致了ScrollReveal is not defined错误。

Answer 1

在您的config.yml文件中，您需要在sass下编写以下代码：

sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
- "node_modules/scrollreveal/src"

我在你的app.js中写道：

import ScrollReveal from 'scrollreveal'

尝试:在您的终端中再次安装npm，这应该会使它工作！