在Rails 7上尝试在Importmap中使用select2

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

我确实检查了网络源(铬控制台)，我可以从gap.jspm.io中找到npm:jquery@3.6.0/dist和npm:select2 2@4.1.0-rc.0/dist。我发现了一些指向正在加载的多个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。

幸运的是，宝石进口图-rails支持预加载引脚模块(模块预加载)，因此我在此基础上提出了一个解决方案:在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/刺激性”设置"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链接："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，参考文献

Answer 2

多亏了林潘。但这还不够。对我来说，加载select2很简单，然后我就被期待了。它解决了开发和生产环境中的select2初始化问题。

请参阅select2-rails创业板中的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()