webpack, gatsby - заставить работать плагины jquery и jquery через webpack

Question

Я пытаюсь выяснить jquery и jquery plugins для работы с gatsby.

У меня есть шаблон от templatemonster- https://www.templatemonster.com/products/58888/demo/

Шаблон использует jquery и плагины jquery:

plugins = {
        pointerEvents: isIE < 11 ? "js/pointer-events.min.js" : false,
        bootstrapTooltip: $("[data-toggle='tooltip']"),
        bootstrapTabs: $(".tabs"),
        rdParallax: $(".rd-parallax"),
        materialParallax: $(".parallax-container"),
        rdAudioPlayer: $(".rd-audio"),
        rdVideoPlayer: $(".rd-video-player"),
        responsiveTabs: $(".responsive-tabs"),
        rdNavbar: $(".rd-navbar"),
        rdVideoBG: $(".rd-video"),
        stepper: $("input[type='number']"),
        toggles: $(".toggle-custom"),
        textRotator: $(".text-rotator"),
        owl: $(".owl-carousel"),
        swiper: $(".swiper-slider"),
        counter: $(".counter"),
        flickrfeed: $(".flickr"),
        twitterfeed: $(".twitter"),
        progressBar: $(".progress-linear"),
        circleProgress: $(".progress-bar-circle"),
        isotope: $(".isotope"),
        countDown: $(".countdown"),
        stacktable: $("table[data-responsive='true']"),
        customToggle: $("[data-custom-toggle]"),
        customWaypoints: $('[data-waypoint-to]'),
        resizable: $(".resizable"),
        selectFilter: $("select"),
        calendar: $(".rd-calendar"),
        productThumb: $(".product-thumbnails"),
        imgZoom: $(".img-zoom"),
        pageLoader: $(".page-loader"),
        search: $(".rd-search"),
        searchResults: $('.rd-search-results'),
        iframeEmbed: $("iframe.embed-responsive-item"),
        bootstrapDateTimePicker: $("[data-time-picker]"),
        checkoutRDTabs: $(".checkout-tabs"),
        higCharts: {
            charts: $(".higchart"),
            legend: $(".chart-legend")
        },
        d3Charts: $('.d3-chart'),
        flotCharts: $('.flot-chart'),
        captcha: $('.recaptcha'),
        galleryRDTabs: $(".gallery-tabs"),
        tilter: $(".tilter"),
        copyrightYear: $(".copyright-year"),
        videBG: $('.bg-vide'),
        rdInputLabel: $(".form-label"),
        regula: $("[data-constraints]"),
        rdMailForm: $(".rd-mailform"),
        mailchimp: $('.mailchimp-mailform'),
        campaignMonitor: $('.campaign-mailform'),
        canvasbg: $('#demo-canvas'),
        particlesContainer: $('#particles-container'),
        maps: $(".google-map-container"),
        lightGallery: $("[data-lightgallery='group']"),
        lightGalleryItem: $("[data-lightgallery='item']"),
        lightDynamicGalleryItem: $("[data-lightgallery='dynamic']")
    };

Я знаю, что не буду использовать все перечисленные здесь плагины.Но этот объект, который я взял из одного скрипта, поставляется с шаблоном.В шаблон включены следующие файлы js:

• jquery 3.2.1
• revolution.js - этот файл имеет другие плагины, такие как jquery.themepunch.revolution TouchSwipe, Tween Lite, Time Line, Easing, CSS Plugin, Split Text, Revolution Extension Plugins
• script.js - этот файл имеет код jquery, который использует / включает все плагины

Iвзял html из <header> из шаблона и использует jquery.revolution.

Теперь первое, что я сделал в gatsby, это поместил все эти файлы в /static, чтобы после webpack buildэто остается как есть.Не работает.

Затем я поместил все эти файлы в src/vendor и сделал следующее: gatsby-node.js:

const webpack = require('webpack')
const path = require('path')

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: require.resolve('jquery'),
            use: loaders.null(),
          },
        ],
      },
    })
  }
  actions.setWebpackConfig({
    module: {
      rules: [
        // {
        //   test: /\.(cur)$/, loader: 'url-loader', query: { limit: 8192 }
        // },
        {
          test: /\.(ico|gif|png|jpe?g|svg|cur)$/,
          loaders: [
            {
              loader: 'file-loader',
              options: {
                name: '[path][name].[ext]',
                context: './src'
              }
            }
          ]
        },
        // {
        //   resolve: {
        //     alias: {
        //       jquery: 'src/vendor/script.js'
        //     }
        //   }
        // },
        {
          test: require.resolve('jquery'),
          use: [{
            loader: 'expose-loader',
            options: 'jQuery'
          }, {
            loader: 'expose-loader',
            options: '$'
          }]
        },
        {
          test: path.resolve('src/vendor/revolution.js'),
          use: [ 'script-loader' ]
        },
        // {
        //   test: path.resolve('src/vendor/script.js'),
        //   use: [ 'script-loader' ]
        //   // use: [{
        //   //   loader: 'expose-loader',
        //   //   options: 'jQuery'
        //   // }, {
        //   //   loader: 'expose-loader',
        //   //   options: '$'
        //   // }]
        // },
        // {
        //   test: /\.js$/,
        //   use: [ 'script-loader' ]
        // },
      ]
    },
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
        'window.jQuery': 'jquery',
      }),
    ],
  })
}

Он успешно компилируется.Я проверил код всего js-файла шаблона в common.js (в комплекте).Но он ничего не делает.

Я знаю, что это плохая практика - использовать jquery с react (Gatsby), но сам шаблон имеет множество плагинов jquery и находит такой же, как пакет npm или компонент React.не выглядит выполнимым.

Как заставить jquery и jquery plugins работать через webpack in gatsby?