时间戳

首页 > 解决方案 > 如何使用 webpacker/Rails 要求 select2？

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

问题描述

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

我已通过以下步骤迁移了 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

环境.js

require("select2")

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

标签： ruby-on-railswebpack

解决方案

这是我要检查的内容：

  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

推荐阅读