如何使用 Rails 6 安装 easydropdown答案

【问题标题】：how to install easydropdown with Rails 6如何使用 Rails 6 安装 easydropdown
【发布时间】：2020-01-02 18:43:26
【问题描述】：

将easydropdown 安装到 Rails 6 中的正确方法是什么？

我运行 yarn add easydropdown 将其添加到我的应用程序中。似乎还可以；我验证了我的浏览器在 js 源代码中看到了它。

在此之后，不完全确定该怎么做。在 app/javascripts/packs/application.js 中，我尝试添加这些行。都不会导致错误。

但在我的页面和 js 控制台中，我一直看到easydropdown is not defined。

我错过了什么？

【问题讨论】：

【解决方案1】：

使用 webpack 时，require 语句不是全局的，因此您需要在使用它的文件中 require 库。

在您的 application.js 包文件中添加以下内容：

import easydropdown from 'easydropdown';

document.addEventListener("turbolinks:load", () => {
  easydropdown('.easydropdown')
});

只要您的选择具有“easydropdown”类，这应该可以使它们全部工作。

您的样式需要添加到您的资产中或导入到此包文件中。

【讨论】：

我把它放在我认为的脚本标签中，我得到：Uncaught ReferenceError: require is not defined。
这在嵌入页面的
我已将const easydropdown = require('easydropdown') 附加到我的app/javascripts/packs/application.js 文件中，并且没有错误，但在我看来我仍然得到easydropdown is not defined。我是否应该能够在 <script> 标记或 js 控制台中引用该 easydropdown var？
我已将答案更新为使用 import 而不是 require。这工作正常，我刚刚测试过。
更改了我的 application.js 文件，但当我尝试在 js 控制台中调用它时仍然得到easydropdown is not defined。（您使用的是 Rails 5 还是 6？不确定这是否重要，但可能。）

【解决方案2】：

感谢 @ben-trewern 帮助我到达这里。

对于 Rails 6，这对我有用：

额外帮助：您使用的是 Stimulus JS 吗？

如果您的下拉菜单连接到刺激控制器，这里有一些提示：

我发现我仍然必须分配 window.easydropdown（上图）才能在我的控制器代码中调用 EDD。

似乎最直接的做法是在我的 Stimulus 控制器的 initialize() 方法中调用 easydropdown.select('#my-select')，例如

export default class extends Controller {
  static targets = [...]
  initialize() {
    easydropdown.select('#region-switcher`);
    ...
  }
  ...

【讨论】：