在JS模块中使用Rails-UJS（带有webpacker的Rails 6）

Question

我刚刚切换到Rails 6（6.0.0.rc1），它默认将Webpacker gem用于Javascript资产以及Rails-UJS。我想在某些模块中使用Rails UJS，以便通过以下功能提交表单：

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

在安装了Webpacker的以前的Rails版本中，该Rails引用似乎在我的模块中“全局”可用，但是现在我在调用Rails.fire… 时得到此引用

ReferenceError: Rails is not defined

我怎样才能让Rails从@rails/ujs提供给特定的或我所有的模块？

在我的设置下面...

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"

谢谢！

Answer 1

首先，使用yarn add 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;

然后：这是结果->

Answer 2

在我的app/javascript/packs/application.js：

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

然后在我正在编写的任何模块，控制器，组件中：

import Rails from '@rails/ujs';

Answer 3

只需将其添加到您的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']
    })
)