[RUBY] [Webpacker] Résumé de l'installation de Bootstrap et jQuery dans Rails 6.0

Comment installer Bootstrap et jQuery dans Rails

• L'ancienne méthode utilisant Gem
• Méthode utilisant Webpacker à partir de la version 6.0

Il y en a deux, mais cette fois nous adopterons le * dernier *.

Personne cible de référence

--Pour ceux qui veulent utiliser bootstrap et jQuery avec Rails6.0

environnement

$ rails -v
Rails 6.0.3.1

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

Gérer les packages avec Webpaker

$ yarn install jquery popper.js bootstrap

Dans Rails, Bootstrap dépend des packages appelés jQuery et popper.js, alors installez-les ensemble. De plus, les packages sont installés dans le répertoire ** node_modules **.

Introduction du bootstrap

Paramètres Webpack

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

Il est configuré pour charger jQuery et popper à l'avance. En faisant cela, vous n'avez pas à vous soucier de lire avec ** require ou @import **.

Charger du javascript créé par bootstrap

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')

Chargez le CSS bootstrap

app/assets/stylesheets/application.scss

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

Bootstrap doit être lu avant ** css (* = require_self) ** écrit par moi-même.

Introduction de jQuery

Charger 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

Chargez votre propre fichier JavaScript

new.html.erb

<div>
  //réduction
  <%= javascript_pack_tag 'users/new' %>
</div>

Rendez le fichier js disponible en appelant le fichier users / new.js sous le répertoire javascript / packs.