[RUBY] [Webpacker] Zusammenfassung der Installation von Bootstrap und jQuery in Rails 6.0

So installieren Sie Bootstrap und jQuery in Rails

• Die alte Methode mit Gem --Methode mit Webpacker ab 6.0

Es gibt zwei, aber dieses Mal werden wir das * letztere * übernehmen.

Referenzzielperson

• Für diejenigen, die Bootstrap und jQuery mit Rails6.0 verwenden möchten

Umgebung

$ rails -v
Rails 6.0.3.1

$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]

Verwalten Sie Pakete mit Webpaker

$ yarn install jquery popper.js bootstrap

In Rails hängt Bootstrap von den Paketen jQuery und popper.js ab. Installieren Sie sie daher zusammen. Außerdem werden Pakete im Verzeichnis ** node_modules ** installiert.

Einführung von Bootstrap

Webpack-Einstellungen

config/webpack/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',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

Es ist so eingestellt, dass jQuery und Popper im Voraus geladen werden. Auf diese Weise müssen Sie sich nicht die Mühe machen, mit ** require oder @import ** zu lesen.

Laden Sie das von Bootstrap erstellte Javascript

app/javascripts/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap/dist/js/bootstrap.min.js')

Laden Sie das Bootstrap-CSS

app/assets/stylesheets/application.scss

 *= require bootstrap/dist/css/bootstrap.min.css
 *= require_tree .
 *= require_self

Bootstrap muss gelesen werden, bevor ** css (* = require_self) ** von mir geschrieben wird.

Einführung von jQuery

Laden Sie jQuery

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap/dist/js/bootstrap.min.js')

Usage

Laden Sie Ihre eigene JavaScript-Datei

new.html.erb

<div>
  //Kürzung
  <%= javascript_pack_tag 'users/new' %>
</div>

Stellen Sie die js-Datei zur Verfügung, indem Sie die Datei users / new.js im Verzeichnis javascript / packs aufrufen.