ruby-on-rails - 如何将 select2.js 的需求从链轮迁移到 webpacker

Question

我正在迁移一个使用 CoffeeScript 的 Rails 5.1.5 项目，从使用链轮到使用 webpacker。该项目还使用 select2.js .使用链轮，我执行了以下操作:

安装 jquery-rails (jQuery 是 select2 的依赖项)。

把 select2.js代码在 vendor/assets/javscripts .

在 application.js.coffee ， 添加:

#= require select2

之后，我可以在我的 application.js.coffee 中使用 select2文件:

$(document).on 'turbolinks:load' ->
  $('select').select2

到目前为止，我已经描述了包含/使用带有链轮的 javascript 库的非常标准的方式。

但是，使用 webpacker 我不能让 select2 工作，我不知道为什么。我有两个假设:

我没有正确导入/要求它；

它在加载过程的某个时刻找不到 jQuery；

所以对于 jQuery，我做了以下事情:

yarn add jquery

包含在我的 environment.js 中:

const webpack = require('webpack');

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

我已经删除了 jquery-rails gem ，以及 #= require 'jquery'并测试了 jquery 是否有效，所以我想我已经正确地包含了它。但是，我尝试了几种导入方式 select2 (使用 es6 导入)并且它们都不起作用。我试过:

import select2 from 'select2';
import select2 from 'select2/dist/js/select2'
import select2 from 'select2/dist/js/select2.js'
import 'select2/dist/js/select2.js'

我什至试图从旧的 vendor location 导入它写在里面 app/javascript/pack/application.js.coffee :

import '../../../vendor/assets/javascripts/select2'

我可以确认文件内容已导入，因为我在 node_modules/select2/dist/js/select.js 下的 select2 文件中放置了一个 console.log它确实被打印出来了。但是，我也收到错误 TypeError: $(...).select2 is not a function当我执行 $('select').select2()在浏览器的开发工具控制台中。

我错过了什么或做错了什么？

附言我可以提供更多信息，但我不希望我的问题变得更加臃肿。
P.P.S.以我微薄的 JS 知识，我看了 source code但无法识别他们究竟在导出什么以及我应该如何导入它。

Answer 1

我知道这是一个旧帖子，但以防万一其他人可以受益:

app/javascript/packs/application.js

...other requires...
require('select2')

window.Rails = Rails

import 'bootstrap'
...other imports...
import 'select2'
import 'select2/dist/css/select2.css'

$(document).on("turbolinks:load", () => {
  $('.select2').select2()
})