如何使 Select2 在生产中与 rails 6 应用程序一起使用？答案

【问题标题】：How to make Select2 work with rails 6 app in production?如何使 Select2 在生产中与 rails 6 应用程序一起使用？
【发布时间】：2020-03-20 19:48:00
【问题描述】：

我有一个 Rails 6 应用程序。我正在使用 select2 插件。它在开发中有效，但在生产中无效（Heroku）。

我跑了

yarn add select2

这里是 application.js

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("chartkick")
require("chart.js")
require("custom/scripts")
require("custom/programs")

这里是 package.json

{
  "name": "case_reporter",
  "private": true,
  "dependencies": {
    "@primer/css": "^14.2.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "chart.js": "^2.9.3",
    "chartkick": "^3.2.0",
    "jquery": "^3.4.1",
    "select2": "^4.0.13",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

这是我在 custom/programs.js 中选择的 js

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

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

这里是 environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

在我的 html 中，我有：

= f.collection_select :program_type_id, ProgramType.all, :id, :name, { class: 'form-select js-source-programs' }

它正在开发中，没有任何问题。

在 Heroku 上的生产中，它无法正常工作。并且控制台中没有错误。

什么可能导致它无法在生产中工作？

这是头

  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/
    %title CS-DM
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

    %script{:src => "https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js"}
    %link{:href => "https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css", :rel => "stylesheet"}/

【问题讨论】：

我记得 head 元素中脚本的顺序可能是一个原因。你能添加这些吗？
鉴于控制台中没有错误，我要问一个愚蠢的问题，您有足够的数据可以将项目添加到选择菜单，对吗？ DB中有程序类型吗？
@RockwellRice 是的，我有数据。选择只是没有与 select2 的东西一起显示。

标签： jquery ruby-on-rails webpack jquery-select2 ruby-on-rails-6

【解决方案1】：

我遇到了这个问题 - 这个答案为我解决了这个问题：https://stackoverflow.com/a/58007621/4741698

问题是在 application.js 中包含 CSS 而不添加 <%= stylesheet_pack_tag 'application.js', 'data-turbolinks-track': 'reload' %>。因此，要么添加stylesheet_pack_tag，要么将 CSS 移动到已包含在 stylesheet_pack_tag 中的文件中。

【讨论】：