如何在rails6中使用webpack使用第三方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 }'/>

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

但是当我在 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)$/);

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 class。

在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;

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

如何在rails6中使用webpack使用第三方js？

How to use third party js in rails 6 using webpack?

rubygems

webpack-4

ruby-on-rails-6

ruby-2.7