如何将select2.js从链轮迁移到webpacker

Question

我正在迁移一个Rails 5.1.5项目，该项目使用CoffeeScript，从使用链轮迁移到使用webpacker。该项目还使用select2.js。使用链轮，我做了以下工作：

1. 安装jquery-rails (jQuery是select2的依赖项)。
2. 将select2.js代码放入vendor/assets/javscripts中。
3. 在application.js.coffee中，添加： #=需要select2

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

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

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

然而，对于webpacker，我无法让select2工作，我也不知道为什么。我有两个假设：

• 我没有适当地进口/要求它；
• 它在加载过程的某个点找不到jQuery；

因此，对于jQuery，我做了以下工作：

• yarn add jquery
• 包含在我的environment.js中： Environment.plugins.append(‘$’，新webpack.ProvidePlugin({ $：'jquery'，jQuery：'jquery‘})；

我已经删除了jquery-rails gem以及#= require '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()。

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

我可以提供更多的信息，但我不想让我的问题变得更臃肿。凭借我有限的JS知识，我看了看源代码，但不知道他们到底在输出什么，以及我应该如何导入它。

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()
})

Answer 2

我的类似问题

我在另一个web组件(开心果)中遇到了同样的问题：

• 我用yarn add switchery导入了组件(没有错误)
• 我可以通过WebPack和import 'switchery'正确地导入它(没有错误绑定包)

但是当我试图在浏览器中使用Switchery对象时，就像他们在文档中说的那样：

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

我会得到错误：ReferenceError: Switchery is not defined

注意:我不想安装RequireJS，因为现在WebPack应该做同样的事情(甚至更好)。

我的解决方案：

问题是webpack没有公开包生成的变量和类在全局范围内！

为了解决这个问题，我需要做两件事：

• 显式地为从Switchery导入的类命名：import Switchery from 'switchery'
• 仅在完成导入的同一个JS文件中使用此类

测试黑客：

如果您想尝试这样做，并“回到”链轮允许的混乱状态，那么您可以在同一个文件中公开“全局”变量，以便您可以在浏览器中使用：

import Switchery from 'switchery'

window.Switchery = Swicthery

现在，您可以执行类似于示例中的切换：var init = new window.Switchery(elem);

希望能帮上忙..。