Как использовать сторонние js в rails 6 с помощью webpack?

Question

С использованием ruby ​​2.7.1p83 и Rails 6.0.3.2 в проекте rails.

импортированный huebee внутри webpack приложения rails.

 yarn add huebee

импортировал свои файлы css и js для файлов application.js и application.css соответственно:

for application.js
import 'huebee/huebee';
for application.css
@import "~huebee/huebee";

Сейчас если

 <input class="color-input" data-huebee='{ "notation": "hex", "saturations": 2 }'/>

работает нормально и показывает окно дроу для селектора цвета:

но когда я инициализирую объект Huebee внутри js, он дает ошибку как:

var hueb = new Huebee('.color-sample', {
    notation: 'hex',
    saturations: 2,
    staticOpen: true,
    hues: 6,

});

Uncaught ReferenceError: Huebee не определен

Пожалуйста, предложите правильный подход для решения этой проблемы, заранее спасибо.

мой файл user.js, в который Huebee импортируется как:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "jquery";
import "jquery-ui";
import "popper.js";
import "bootstrap";
import 'owl.carousel';
import 'jquery.easing';
import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all.css";
import '../stylesheets/user.scss';
import Huebee from 'huebee/huebee';
require.context('../images', true, /\.(png|jpe?g|svg)$/);

файл user.scss:

@import '~bootstrap';
@import '~owl.carousel2/dist/assets/owl.theme.default';
@import '~owl.carousel2/dist/assets/owl.carousel';
@import "~huebee/huebee";

Скрипт Huebee для инициализации:

(function () {
    const element= document.querySelector('.color-sample');
    var hueb = new Huebee(element, {
        notation: 'hex',
        saturations: 2,
        staticOpen: true,
        hues: 6,
    });
})();

Это дает следующую ошибку:

Answer 1

Вам нужно импортировать Huebee класс из пакета.

В application.js

import Huebee from 'huebee/huebee';

В коде js передайте элемент в качестве ссылки вместо непосредственной передачи.color-sample. И убедитесь, что следующий код запускается после загрузки документа.

const element= document.querySelector('.color-input');
var hueb = new Huebee(element, {
    notation: 'hex',
    saturations: 2,
    staticOpen: true,
    hues: 6,
});

Answer 2

Файл user.js:

import Huebee from 'huebee/huebee';
global.Huebee = Huebee;

Файл erb, в котором используется Huebee, выглядит так:

  <input class="color-input" data-huebee='{ "notation": "hex", "saturations": 2 }'/>

(function () {
    const element= document.querySelector('.color-input');
    var hueb = new Huebee(element, {
        notation: 'hex',
        saturations: 2,
        staticOpen: true,
        hues: 6,
    });
})();