react, jquery, gatsby - 如何让 jquery 插件在 gatsby 中工作？

Question

删除之前的描述，因为它现在不相关。

我从新的 gatsby 网站开始，能够使 jquery、bootstrap、wow 和 owl carousel 工作。

layout.js

import './expose'
import './main'

expose.js

import 'popper.js'
import 'bootstrap'
import 'animate.css/animate.min.css'
import WOW from 'wowjs/dist/wow.js';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

new WOW(
    {
        offset: 100,
        mobile: true,
      }
).init();

main.js

;(function($){
    console.log('hello jquery')
    console.log($(window).width())

    /*-------------------------------------------------------------------------------
      Navbar 
    -------------------------------------------------------------------------------*/

    //* Navbar Fixed  
    function navbarFixed(){
        if ( $('.header_area').length ){ 
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();   
                if (scroll){
                    $(".header_area").addClass("navbar_fixed");
                } else {
                    $(".header_area").removeClass("navbar_fixed");
                }
            });
        };
    };
    navbarFixed();

    var $animation_elements = $('.scroll_animation');
    var $window = $(window);

    function check_if_in_view() {
        console.log('check_if_in_view')
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
          $element.addClass('in-view');
        } else {
          $element.removeClass('in-view');
        }
      });
    }


    if($(window).width() > 576){
        $window.on('scroll resize', check_if_in_view);
        $window.trigger('scroll');
    }

    $('.owl-carousel').owlCarousel();

})(window.jQuery)

jquery 有时工作有时不工作。

现在，问题是 wowjs 动画只执行一次。即使我刷新页面也无法再次运行它。 owl carousel 也有同样的问题。它出现一次，然后即使在页面刷新时也不会出现。如何让main.js 中的jquery 代码一直工作？由于实际文件有 1000 行 jquery 和 jquery 插件代码。

Answer 1

您在layout.js 中定义WOW 并尝试在main.js 中使用它。这行不通。

有两种可能的解决方案：

1) 将import WOW from "wowjs" 添加到main.js 以便它在main.js 的范围内可用（仅当main.js 被webpack 捆绑时才有效）。对我来说，WOW 也可以在 WOW.WOW 变量中使用（控制台并相应检查）。

2) 在layout.js 中自己将WOW 附加到窗口并在任何地方使用它。这可能很糟糕。

更新：

在导入main.js之前，自己将WOW附加到窗口并在任何地方使用。

解决方案在这里（检查 expose-wow.js 和 index.js 导入）?