web-dev-qa-db-ja.com

JSモジュールでのRails-UJSの使用（Rails 6とWebpacker）

私はRails 6（6.0.0.rc1）に切り替えました。これは Webpacker gemをデフォルトでJavascriptアセットにRails-UJSと共に使用します。使用したい= Rails以下の機能を備えた関数からフォームを送信するために、いくつかのモジュールでUJSを使用します。

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

以前のRails Webpackerがインストールされたバージョンでは、Rails参照がモジュールで「グローバルに」使用可能であるように見えましたが、Rails.fire…を呼び出すとこれが表示されます。

ReferenceError: Rails is not defined

特定のモジュールまたはすべてのモジュールで@Rails/ujsのRailsを利用できるようにするにはどうすればよいですか？

私の設定の下…

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"

ありがとう！

ruby-on-railswebpackwebpackerrails-ujs
22
R4ttlesnake

私のapp/javascript/packs/application.js：

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

そして、私が書いているどんなモジュール、コントローラー、コンポーネントでも：

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

最初に、yarnを使用してRails/ujsを追加します。

yarn add  @Rails/ujs

そして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

設定とロードRails js。

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

そして、これは結果です-> My result when i typed Rails in Firefox Console

5
ThienSuBS

私は現在6.0.0.rc2をいじっていますが、答えはわかったと思います。

したがって、以下を分離すると、

app/javascript/packs/application.js

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

代わりに：

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

あなたは明らかにconsole.logを削除することができます。次に、刺激コントローラーで簡単に実行できます。

// 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)
  }
}

ここで小さなテストコントローラーを使用するだけですが、console.logで取得し、Rails_ujs.fireを呼び出すことができるので、これで十分です。

これで問題が解決するかどうかお知らせください。

3
ekr990011

それをあなたのenvironment.jsファイルに追加してください、これが私のものです（bootstrapと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

最善の方法は expose-loader を使用して、bundle exec Rails webpacker:install:erbを実行した場合と同じようにwebpackerを構成することだと思います。

expose-loaderをインストールします

$ yarn add expose-loader

設定ファイルを作成する

  1. ローダーの場合、webpackerは自身を構成し、config/webpack/loadersに構成オブジェクトをダンプします。そのフォルダが存在しない場合は作成します。
  2. config/webpack/loaders/expose.jsというファイルを作成します

  3. これをそのファイルに追加します。

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

そのローダーをenvironment.jsに追加します

次の2行をconfig/webpack/environment.jsに追加します。

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

完全なファイルは次のようになります。

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

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

これにより、Railsオブジェクトに再びグローバルにアクセスできるようになります。

0
Gray Kemmey