如何将select2.js的需求从链轮迁移到Webpacker

Question

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

1. 安装jquery-rails（jQuery是的依赖项select2）。
2. 将select2.js代码放入vendor/assets/javscripts。

3. 在中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-railsgem，#= 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'

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

我想念什么或做错什么？

附言：我可以提供更多信息，但是我不希望这个问题变得。肿。PPS以我不多的JS知识，我查看了源代码，但无法识别它们确切地导出了什么以及应该如何导入。

Answer 1

我知道这是一篇旧文章，但以防万一其他人可以受益：

应用程序/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()
})