如何在webpacker / Rails中要求select2？

Question

我一直在通过CDN使用select2。我开始将CDN迁移到使用webpacker gem。我偶然发现了一个困难，在那里我无法导入/请求或以任何方式包含它。所以这是我的设置：

我已通过以下步骤迁移了select2：

• yarn add select2

下面是我的environment.js文件（这是webpacker用于配置webpack的配置文件：]

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)
module.exports = environment

environment.js

require("select2")

我尝试了各种需求以及许多其他需求，但是这些似乎都不起作用。请指教。谢谢。

Answer 1

这是我要检查的内容：

1. 根据项目自述文件，在Rails项目中正确安装Webpacker。如果您从Rails 6应用程序开始，则默认情况下将完成此操作。

2. 同时添加jquery和select2：

   yarn add jquery select2 
   

3. 向DOM添加选择框

   <select class="js-states" name="state">
     <option value="AL">Alabama</option>
     ...
     <option value="WY">Wyoming</option>
   </select>
   

4. 导入jquery，select2和select2 css，并在页面加载时应用于选择框：

   import $ from 'jquery'
   import 'select2'
   import 'select2/dist/css/select2.css'
   
   window.addEventListener('DOMContentLoaded', () => {
     $('.js-states').select2()
   })
   

5. 对于开发，在compile: true中设置config/webpacker.yml。运行webpack-dev-server是可选的。

这些是我创建此演示所采取的步骤：https://github.com/rossta/rails6-webpacker-demo/compare/example/select2