web-dev-qa-db-fra.com

Utilisation de Rails-UJS dans les modules JS (Rails 6 avec webpacker)

je viens de passer à Rails 6 (6.0.0.rc1) qui utilise la gemme Webpacker par défaut pour les actifs Javascript avec Rails-UJS. Je veux utiliser = Rails UJS dans certains de mes modules afin de soumettre des formulaires à partir d'une fonction avec:

const form = document.querySelector("form")
Rails.fire(form, "submit")

Dans les anciennes versions de Rails avec Webpacker installé, la référence Rails semblait être "globalement" disponible dans mes modules, mais maintenant je l'obtiens en appelant Rails.fire…

ReferenceError: Rails is not defined

Comment puis-je faire Rails à partir de @Rails/ujs disponible pour un module spécifique ou pour tous mes modules?

En dessous de ma configuration…

app/javascript/controllers/form_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  // ...
  submit() {
    const form = this.element
    Rails.fire(form, "submit")
  }
  // ...
}

app/javascript/controllers.js

// Load all the controllers within this directory and all subdirectories. 
// Controller files must be named *_controller.js.

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))

app/javascript/packs/application.js

require("@Rails/ujs").start()
import "controllers"

Merci!

ruby-on-railswebpackwebpackerrails-ujs
22
R4ttlesnake

dans mon app/javascript/packs/application.js:

import Rails from '@Rails/ujs';
Rails.start();

puis dans n'importe quel module, contrôleur, composant que j'écris:

import Rails from '@Rails/ujs';
20
inopinatus

Tout d'abord, en utilisant du fil, ajoutez Rails/ujs:

yarn add  @Rails/ujs

Et ajoutez à config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
    toastr: 'toastr/toastr',
    ApexCharts: ['apexcharts', 'default'],
    underscore: ['underscore', 'm'],
    Rails: ['@Rails/ujs']
  })
)
module.exports = environment

Configurer et charger Rails js.

# pack/application.js
require("@Rails/ujs").start()
global.Rails = Rails;

Et puis: c'est le résultat -> My result when i typed Rails in Firefox Console

5
ThienSuBS

Je déconne actuellement sur 6.0.0.rc2 mais je pense avoir obtenu une réponse pour vous.

Donc, si vous séparez:

app/javascript/packs/application.js

require("@Rails/ujs").start()
import "controllers"

À la place:

export const Rails_ujs = require("@Rails/ujs")
console.log(Rails_ujs)
Rails_ujs.start()

Vous pouvez évidemment supprimer ce console.log essayait juste de comprendre les choses. Ensuite, dans votre contrôleur de stimulus, vous pouvez simplement faire:

// Visit The Stimulus Handbook for more details
// https://stimulusjs.org/handbook/introduction
//
// This example controller works with specially annotated HTML like:
//
// <div data-controller="hello">
//   <h1 data-target="hello.output"></h1>
// </div>

import { Controller } from "stimulus"
import { Rails_ujs } from "packs/application.js"

export default class extends Controller {
  static targets = [ "output" ]

  connect() {
    // this.outputTarget.textContent = 'Hello, Stimulus!'
    console.log('hi')
    console.log(Rails_ujs)
  }
}

J'utilise simplement leur petit contrôleur de test ici, mais je l'ai obtenu sur console.log out et vous pouvez appeler Rails_ujs.fire donc ça devrait être ce que vous voulez :)

Faites-moi savoir si cela fonctionne pour vous!

3
ekr990011

Ajoutez-le simplement à votre fichier environment.js, voici le mien (avec bootstrap et jquery):

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

module.exports = environment

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        "window.$": "jquery",
        Popper: ['popper.js', 'default'],
        Rails: ['@Rails/ujs']
    })
)
2
Andrew Cetinic

Je pense que la meilleure façon est d'utiliser le expose-loader et configurez-le de la même manière que Webpacker si vous exécutiez bundle exec Rails webpacker:install:erb.

Installez le expose-loader

$ yarn add expose-loader

Créer un fichier de configuration

  1. Pour les chargeurs, webpacker se configure lui-même, il videra un objet de configuration dans config/webpack/loaders. Créez ce dossier s'il n'existe pas.
  2. Créez un fichier appelé config/webpack/loaders/expose.js

  3. Ajoutez ceci à ce fichier:

    module.exports = {
  test: require.resolve('@Rails/ujs'),
  use: [{
    loader: 'expose-loader',
    options: 'Rails'
   }]
}

Ajoutez ce chargeur à environment.js

Ajoutez ces deux lignes à config/webpack/environment.js:

const expose = require('./loaders/expose')
environment.loaders.prepend('expose', expose)

Le fichier complet doit ressembler à quelque chose comme:

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

environment.loaders.prepend('expose', expose)
module.exports = environment

Cela devrait vous donner à nouveau accès à l'objet Rails globalement.

0
Gray Kemmey