web-dev-qa-db-fra.com

Comment ajouter un plugin tiers jquery dans Rails 6 webpacker

Je sais que c'est simple mais avec une mise à jour de Rails 6. il y a une nouvelle syntaxe dans Rails 6 pour gérer les actifs javascript qui est maintenue par webpacker.

//application.js
require("@Rails/ujs") //.start()
require("turbolinks").start()
require("@Rails/activestorage").start()
require('jquery').start()
require('jquery_ujs').start()
require('bootstrap-daterangepicker').start()
require("custom/custom").start()
require("bootstrap").start()
require("channels")

je peux ajouter custom/custom mais bootstrap et jquery ne fonctionne pas j'ai installé jquery et bootstrap via npm

javascriptruby-on-railswebpackerruby-on-rails-6
10
uzaif

exécuter la commande ci-dessous pour ajouter jQuery.

$ yarn add jquery

Ajoutez le code ci-dessous dans config/webpack/environment.js

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

Nécessite jquery dans le fichier application.js.

require('jquery')

Plus besoin d'ajouter la gemme jquery-Rails!

14
Akash Rajput

pour résoudre le problème du plugin tiers jquery, ajoutez jquery via le fil

yarn add jquery

pour ajouter le support jquery dans Rails 6 application nous devons d'abord ajouter la configuration ci-dessous

# app/config/webpack/environment.js
const {environment} = require('@Rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery' # or if its not work specify path `'jquery/src/jquery'` which node_modules path for jquery
}));

module.exports = environment;

pour importer tout plugin lié à jquery dans app/javascripts/packs/application.js

utiliser les instructions ci-dessous

import 'bootstrap/dist/js/bootstrap';
import 'bootstrap-daterangepicker/daterangepicker'

mis à jour avec expose-loader pour jQuery

yarn add expose-loader

Ajoutez ensuite ceci à config/webpack/environment.js

   environment.loaders.append('jquery', {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: '$',
      }, {
        loader: 'expose-loader',
        options: 'jQuery',
      }],
    });
    module.exports = environment;
6
uzaif