web-dev-qa-db-fra.com

Comment utiliser jQuery avec Rails Webpacker 3

Je génère une nouvelle application Rails: Rails new titi --webpack=vue

et voudrait utiliser jQuery (ou d'autres libs comme popper, vue-resource ...).

J'ai essayé de yarn add jqueryqui allait bien, mais je n'ai pas accès à jQuery dans mon code JavaScript.

Dans les précédents joyaux Webpacker, il y avait beaucoup plus de conf et j'ai dû l'écrire dans shared.js:

module.exports = {
    ...
    plugins: [
      ...
      new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
    ]
    ...
    resolve: {
      extensions: settings.extensions,
      modules: [
       resolve(settings.source_path),
        'node_modules'
      ],
      alias: {
        jquery: "jquery/src/jquery",
        vue: "vue/dist/vue.js",
        vue_resource: "vue-resource/dist/vue-resource",
    }
}

Quel est le moyen le plus propre d'inclure des bibliothèques dans la version actuelle de Webpacker? Quelque chose dans config/webpacker.yml? 

jqueryruby-on-railswebpacker
11
Kikan

Mis à jour pour Webpacker 3.5.0 et [email protected]

Popper.js et [email protected] ne sont pas nécessaires pour installer JQuery. Cependant, Bootstrap 4 nécessite à la fois JQuery et Popper.js, et je suppose que c'est le point de les montrer dans l'exemple d'origine. De plus, j’ai omis Vue de mon exemple car il existe une documentation abondante sur la façon d’ajouter les connexions Vue. 

Pour que tout fonctionne, j'ai installé webpack-merge, popper.js, jquery, jquery-ujs et [email protected] via Yarn.

Une fois installé, j'ai pu mettre à jour ./config/webpack/environment.js avec le code suivant:

/*
  ./config/webpack/environment.js
  Info for this file can be found
  github.com/Rails/webpacker/blob/master/docs/webpack.md
*/

const { environment } = require('@Rails/webpacker')
const merge = require('webpack-merge')
const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    JQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'], // for Bootstrap 4
  })
)

const envConfig = module.exports = environment
const aliasConfig = module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
}

module.exports = merge(envConfig.toWebpackConfig(), aliasConfig)

Maintenant que envConfig.toWebpackConfig() est utilisé dans la dernière instruction dans environment.js, je devais changer development.js, production.js, test.js comme suit:

const environment = require('./environment')

module.exports = environment

Puis dans ./app/javascript/application.js j'ai ajouté ce qui suit:

// ./app/javascript/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

// JS libraries
import "jquery"
import "jquery-ujs"
import "bootstrap"

Pour m'assurer que JQuery n'était pas chargé via le pipeline d'actifs, j'ai supprimé la connexion aux actifs de Rails dans ./app/assets/javascripts/application.js:

// require Rails-ujs
// require_tree .

J'ai ensuite ajouté ces deux lignes à la section header de ./app/views/layouts/application.html.haml pour afficher le contenu de Webpack:

= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application'

Après avoir créé une vue static_pages contrôleur et static_pages#index, après avoir démarré le serveur Rails (Rails s), j'ai été en mesure d'accéder à la console JS de mon navigateur et d'exécuter console.log(jQuery().jquery); pour voir si JQuery était en cours de chargement. Tout chargé comme prévu. 

La documentation peut être trouvée ici: https://github.com/Rails/webpacker/blob/master/docs/webpack.md

16
sknight

Merci. C'est bien avec Gem Webpacker 2, mais la nouvelle version de Gem a une nouvelle organisation des fichiers et nécessite moins de configuration.

Pour Webpack 3, shared.js ne semble pas être obligatoire. Au lieu de cela, j'ai écrit la configuration dans config/webpack/environment.js comme ceci:

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

const webpack = require('webpack')

// Add an ProvidePlugin
environment.plugins.set('Provide',  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'],
    ActionCable: 'actioncable',
    Vue: 'vue',
    VueResource: 'vue-resource',
  })
)

const config = environment.toWebpackConfig()

config.resolve.alias = {
  jquery: "jquery/src/jquery",
  vue: "vue/dist/vue.js",
  vue_resource: "vue-resource/dist/vue-resource",
}

// export the updated config
module.exports = environment
13
Kikan

@sknight answer est Nice. mais j'ajoute une configuration manquante si vous ne l'avez pas déjà incluse.

  1. créer un fichier application.css dans app/javascript/packs/application.css sinon vous obtiendrez des erreurs comme Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
  2. ajouter import "./application.css"; dans app/javascript/packs/application.js
  3. ajoutez import "bootstrap/dist/css/bootstrap.css"; dans app/javascript/packs/application.js pour utiliser la classe bootstrap dans vos modèles
0
Shajid