如何使用 webpack 在 Rails 6 中使用第三方 js？答案

【问题标题】：How to use third party js in rails 6 using webpack?如何使用 webpack 在 Rails 6 中使用第三方 js？
【发布时间】：2020-08-10 08:53:30
【问题描述】：

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

});

未捕获的引用错误：未定义 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,
    });
})();

这会产生以下错误：

【问题讨论】：

你在哪个 JS 文件中初始化了 Huebee。如果您使用的是应用程序 js 以外的文件。然后你需要攻击 Huebee 类到全局变量或窗口才能在其他 js 文件中访问。
我已经在 application.js 文件中导入了 'huebee/huebee' 并在同一个文件中初始化了 Hubee。
你能用application.js的完整代码编辑你的问题吗
用 user.js 和 user.scss 文件更新了答案，因为 application.js 和 application.scss 文件已更新为其他内容。

标签： rubygems webpack-4 ruby-2.7 ruby-on-rails-6

【解决方案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,
});

【讨论】：

30:210 Uncaught ReferenceError: Huebee is not defined 还是同样的问题。
@vidurpunj 我已经复制了它，它工作正常。您能否用完整的代码编辑您的问题，以便我们了解确切的问题
用 user.js 和 user.scss 文件更新了答案，因为 application.js 和 application.scss 文件已更新为其他内容。
@vidurpunj Huebee 初始化在哪里？其中js
@vidurpunj 是 user.js 中的初始化吗？如果不尝试移动到 user.js 或将其声明为窗口或全局变量以使其可访问

【解决方案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,
    });
})();

【讨论】：