ruby-on-rails - 如何使用 webpacker/Rails 要求 select2？

Question

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

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

yarn 添加选择2

下面是我的 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

环境.js

require("select2")

我尝试了各种要求和许多其他方法，但这些似乎都不起作用。请指教。谢谢你。

Answer 1

这是我要检查的内容:

根据项目 README，在 Rails 项目中正确安装 Webpacker。如果您从 Rails 6 应用程序开始，这将默认完成。

添加两者 jquery和 select2 :

yarn add jquery select2 

向 DOM 添加一个选择框

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

导入 jquery、select2 和 select2 css 并在页面加载时应用于选择框:

import $ from 'jquery'
import 'select2'
import 'select2/dist/css/select2.css'

window.addEventListener('DOMContentLoaded', () => {
  $('.js-states').select2()
})

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

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