react, jquery, gatsby - how to make jquery plugins work in gatsby?

问题

Removed previous description as it's not relevant now.

I started with fresh gatsby site and able to make jquery, bootstrap, wow and owl carousel work.

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 sometimes work sometimes not.

Now, the issue is wowjs animation executes only once. Not able to run it again even If I refresh the page. owl carousel has the same issue. It appears once and then never appears back not even on page refresh. How do I make jquery code in main.js work all the time ? As the actual file has 1000 lines of jquery and jquery plugin code.

回答1:

You are defining WOW in layout.js and trying to use it in main.js. This won't work.

There are two possible solution to this:

1) Add import WOW from "wowjs" to main.js so that it's available in the scope of main.js(works only if main.js is being bundled by webpack). Also for me WOW is available in WOW.WOW variable(console and check accordingly).

2) Attach WOW to window by yourself in layout.js and use it anywhere. This is probably bad.

Update:

Attach WOW to window by yourself before importing main.js and use it anywhere.

Solution here(Check expose-wow.js and index.js imports) 👇

来源：https://stackoverflow.com/questions/54255074/react-jquery-gatsby-how-to-make-jquery-plugins-work-in-gatsby

标签

jquery