尝试在 Rails 7 上将 select2 与 Importmaps 结合使用

Question

我正在尝试在一个新的 Rails 7 应用程序上使用 Select2，但遇到如下困难：

我已将它固定到我的导入图中并像这样导入它：

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
pin "select2", to: "https://ga.jspm.io/npm:select2@4.1.0-rc.0/dist/js/select2.js"
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"

（最后两行是我在运行 bin/importmap pin select2 时添加的）

import "jquery";
import "select2";
import "@hotwired/turbo-rails";
import "controllers";
import "trix";
import "@rails/actiontext";

（已将 jquery 和 select2 移动到结尾和开头 - 没有改变任何东西）。

当我在表单中时，我可以像这样使用 $ 访问元素：

$('#book_genre_ids');
...(returns the element)

但是当我手动尝试 - 在控制台中 - 在元素上使用运行 select2() 时，会发生以下情况：

$('#book_genre_ids').select2();
VM574:1 Uncaught TypeError: $(...).select2 is not a function
    at <anonymous>:1:22

我确实检查了网络资源（chrome 控制台），我可以找到 npm:jquery@3.6.0/dist 和 npm:select2@4.1.0-rc.0/距离 gap.jspm.io。我发现一些资源指向正在加载的多个 jquery 库，但我在控制台的网络资源中没有找到比上面更多的资源...

Answer 1

Select2 会将自己注册为 jQuery 函数 .select2()，因此为了使用此方法，必须在 jquery 库之后加载 select2 库，否则它找不到 jquery 引用，因此它无法注册 jquery 函数，因此将抛出错误 $(...).select2 is not a function。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" />

然而，import是异步加载，所以不能保证当select2寻找jquery时，这个库被加载。因此，尽管您按如下顺序设置导入它们：

import "jquery";
import "select2";

select2 仍然没有找到 jquery 需要的时候。

幸运的是 gem importmap-rails support preloading pin modules (modulepreload)，所以基于此我想出了一个解决方案：在 select2

之前预加载 jquery

# config/importmap.rb
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js", preload: true
pin "select2", to: "https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"

然后我按照 Rails7 设置“@hotwired/stimulus”的方式设置“jquery”

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"
...
import jQuery from "jquery"
window.jQuery = jQuery // <- "select2" will check this
window.$ = jQuery
...

现在在需要“select2”的刺激控制器上，您可以加载“select2”

// app/javascript/controllers/demo_controller.js
import { Controller } from "@hotwired/stimulus"
import "select2"

export default class extends Controller {
  initialize() {
    $('.js-example-basic-multiple').select2();
  }
// ...

注意：您的“select2”CDN“https://ga.jspm.io/npm:select2@4.1.0-rc.0/dist/js/select2.js”源包含import e from"jquery"; 在第一行因此它不会在这个解决方案中工作，所以我建议使用官方 cdn link: "https://cdn.jsdelivr.net/npm/select2@4.1。 0-rc.0/dist/js/select2.min.js" 代替。

更新

如果您不想使用刺激，您可以固定另一个 js 文件来设置“select2”并将其加载到您的布局视图中

// app/javascript/utils.js
import "select2"

$(document).ready(function () {
  $('.js-example-basic-multiple').select2();
});

# config/importmap.rb
...
pin "utils"

# app/views/products/show.html.erb
<%= javascript_import_module_tag("utils") %>
...

注意：你必须使用javascript_import_module_tag，而不是javascript_importmap_tags，reference

Answer 2

感谢 Lam Phan。但这还不够。对我来说，加载 select2 很简单，然后我就预料到了。它解决了开发和生产环境的 select2 初始化问题。

查看 select2-rails gem 中的 vendor/assets/javascripts 文件夹。该文件夹包含文件 select2.js

按以下顺序添加到您的 app/assets/config/manifest.js 行：

//= link jquery.min.js
//= link select2.js

这对我来说足够了，默认情况下固定和导入工作：

# config/importmap.rb

pin 'jquery', to: 'jquery.min.js'
...
pin 'select2'
pin 'application'
pin_all_from 'app/javascript', under: 'application'

// app/javascript/application.js
import 'jquery'
...
import 'select2'

# app/views/layout/application.html.haml
...
  %head
    = javascript_importmap_tags 'application'

// app/javascript/utils/select2_init.js
export class Select2Init {
  start() {
    $(function() {
      $('.select2').select2()
    })
  }
}

和运行起始点的初始值设定项：

import { Select2Init } from 'application/utils/select2_init'

new Select2Init().start()

尝试在 Rails 7 上将 select2 与 Importmaps 结合使用

Trying to use select2 with Importmaps on Rails 7

ruby-on-rails

jquery-select2

import-maps

ruby-on-rails-7