다음과 같은 표시가 되는 Bootstrap3 대응의 select2 를 도입하는 순서입니다

1. webpacker gem을 Gemfile에 추가하고 bundle install

$ bundle add webpacker

편집기에서 Gemfile에 추가할 수 있습니다.
rails new 할 때 --webpack 옵션이 있으면 이미 들어 있습니다.

2. webpacker 관련 파일을 몰래 설치합니다

$ rails webpacker:install

webpacker 2계에서 생성한 수수께끼의 설정 파일이나 항목이 webpacker 3계에서 거의 없어지거나 하기 때문에, 갱신하는 경우는 여기에서 대량의 차이가 나올지도 모릅니다. 그래서 잘 모르는 경우는 일단 config 아래의 webpacker 관련을 지우고 webpacker 3 계에서 깨끗이 다시 넣는 것이 좋습니다.

3. yarn에서 필요한 라이브러리를 설치합니다.

$ yarn add jquery
$ yarn add select2
$ yarn add select2-bootstrap-theme

yarn add 뒤에 패키지명을 나란히 실행해도 됩니다.

4. jQuery는 어디서나 $에서 참조 할 수 있습니다.

config/webpack/environment.js

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

const webpack = require('webpack')

environment.plugins.set(
  'Provide',
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    "window.$": "jquery",
  })
)

module.exports = environment

참고

Rails5.1 + Webpacker에서 Bootstrap4-beta를로드합니다.

Webpack Plugins htps : // 이 m/모쿠오/있어 ms/6d792986에 63598370b30

webpacker 2 의 때의 plugin 의 설정 장소가, webpacker 3 이 되어 사라져 있었기 때문에 곤란하고 있었습니다만, 이렇게 하면 좋았습니다.

5. bootstrap 및 select2를 읽고 설정합니다.

app/javascript/packs/application.js

// bootstrap 本体
require("bootstrap/dist/css/bootstrap")
require("bootstrap/dist/css/bootstrap-theme")

// select2 の CSS
require("select2/dist/css/select2")                       // select2 本体のCSSの読み込み
require("select2-bootstrap-theme/dist/select2-bootstrap") // select2 用の bootstrap テーマの読み込み

// select2 の JS
import Select2 from "select2"

// エラーメッセージの日本語化
require("select2/dist/js/i18n/ja")

// グローバルなオプションの指定
$.fn.select2.defaults.set("allowClear", true)    // 空にできるようにする
$.fn.select2.defaults.set("placeholder", "")     // allowClear だけだとエラーになるため
$.fn.select2.defaults.set("width", "100%")       // tdタグの中に入れたときにだんだん大きくなっていくのを防ぐ
$.fn.select2.defaults.set("theme", "bootstrap")  // テーマの指定

// 実行
document.addEventListener("DOMContentLoaded", () => {
  $(".js-searchable").select2()
})

css 를 어디에서 읽어야 할지 쭉 모르고, sprokects 쪽으로 읽거나 하고 있었습니다만, 무려 js 속에서 그대로 읽으면 좋았지요(?)

6. webpacker로 관리하는 사람을로드

app/views/layouts/application.html.slim

/ head タグの中に追加
/ application.js で読み込んだ css と js がここで分離、変換、結合されている
= javascript_pack_tag "application"
= stylesheet_pack_tag "application"

sprokects (app/assets로 관리하고 있는)와 공존할 수 있습니다

7. 뷰는 이런 식으로 js-searchable 클래스를 지정합니다.

(view)

= form_with do |form|
  = form.collection_select(:key, ['foo', 'bar', 'baz'].inject({}) { |a, e| a.merge(e => e) }, :last, :first, {include_blank: false}, {class: ['form-control', 'js-searchable']})

이상입니다.

시행착오하고 있는 곳도 있으므로, 이상한 곳이 있으면 가르쳐 주세요.