InstantClick не определен в Rails 6

Question

Я пытаюсь интегрировать instantclick в мое приложение rails 6. Я добавил instantclick. js file в мою папку javascript / custom. Затем я импортирую его в javascript / packs / application. js:

require("custom/instantclick")

Я добавил в конец тега body моего макета следующую строку для инициализации InstantClick:

...
            <script data-no-instant>InstantClick.init();</script>
      </body>
    </html>

Затем в консоли появляется следующая ошибка:

(индекс): 404 Uncaught ReferenceError: InstantClick не определен

Я новичок в использовании webpacker может я что то не так сделал. Однако файл InstantClick. js импортируется. Есть идеи, что я делаю не так? Спасибо.

Answer 1

Webpack работает иначе, чем Sprockets. Одна вещь, с которой вы сталкиваетесь, заключается в том, что веб-пакет не выставляет что-либо в глобальном масштабе. Это означает, что вызов функций из тега скрипта не будет работать должным образом, если вы не указали веб-пакету добавить эти переменные в объект window.

Ваш файл quickclick. js также не поддерживает модуль, т.е. , он не экспортирует что-либо, например, с module.exports = InstantClick.

С помощью веб-пакета вы можете настроить его на выполнение обоих действий. Вам нужно как экспортировать , так и выставить InstantClick:

yarn add expose-loader exports-loader

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.loaders.append('InstantClick', {
  test: /instantclick/,
  use: [{
    loader: 'expose-loader',
    options: 'InstantClick'
  },
    {
    loader: 'exports-loader',
    options: 'InstantClick'
  }]
})

module.exports = environment

Существует множество других возможностей и способов, которыми вы можете это сделать. курс. Вот некоторые ресурсы:

• https://webpack.js.org/guides/shimming/
• http://www.matthiassommer.it/programming/expose-global-variables-methods-modules-javascript/
• https://rossta.net/blog/three-ways-webpack-surprises-rails-developers.html