rubygems - 如何使用 webpack 在 Rails 6 中使用第三方 js？

Question

在 rails 项目中使用 ruby​​ 2.7.1p83 和 Rails 6.0.3.2。

在 rails 应用程序 webpack 中导入了 huebee。

 yarn add huebee

分别在 application.js 和 application.css 文件中导入其 css 和 js 文件：

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

现在，如果

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

工作正常并显示颜色选择器的 drow 框：

但是当我在 js 中初始化 Huebee 对象时，它给出的错误是：

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

});

未捕获的 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)$/);

用户.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

用户.js 文件：

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

使用 Huebee 的 erb 文件如下：

  <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,
    });
})();