[RUBY-ON-RAILS] 사용 레일에 JS-UJS 모듈 (레일 6 webpacker)

사용 레일에 JS-UJS 모듈 (레일 6 webpacker)

난 그냥 레일 - UJS와 함께 자바 스크립트 자산에 대해 기본적으로 Webpacker 보석을 사용 레일 6 (6.0.0.rc1)로 전환. 내가 가진 함수에서 양식을 제출하기 위해 내 일부 모듈에 레일 UJS를 사용하려면 :

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

Webpacker와 버전이 설치 전 레일, 레일 참조 내 모듈에서 "전 세계적으로"사용할 수 보였지만, Rails.fire를 호출 할 때 지금은이를 얻을 수 ...

ReferenceError: Rails is not defined

어떻게 레일 @에서 레일을 할 수 있습니다 / 특정 또는 내 모든 모듈을 사용할 UJS?

내 설정 아래 ...

응용 프로그램 / 자바 스크립트 / 컨트롤러 / form_controller.js

import { Controller } from "stimulus"

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

응용 프로그램 / 자바 스크립트 / 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))

응용 프로그램 / 자바 스크립트 / 팩 / application.js

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

감사!

해결법

1. ==============================

   1.내 응용 프로그램 / 자바 스크립트 / 팩 / application.js :

   내 응용 프로그램 / 자바 스크립트 / 팩 / application.js :

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

   그리고 어떤 모듈, 컨트롤러, 구성 요소 내가 쓰고 있어요 :

   import Rails from '@rails/ujs';
   

2. ==============================

   2.첫째로, 원사 추가 기능을 사용하여 / UJS 레일 :

   첫째로, 원사 추가 기능을 사용하여 / UJS 레일 :

   yarn add  @rails/ujs
   

   그리고에 대한 설정 / 웹팩 / 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
   

   구성 및로드는 JS 레일.

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

   그리고: 이 결과 ->

3. ==============================

   3.나는 현재 6.0.0.rc2에 장난하고하지만 난 당신을 위해 대답을 가지고 생각합니다.

   나는 현재 6.0.0.rc2에 장난하고하지만 난 당신을 위해 대답을 가지고 생각합니다.

   당신은 밖으로 분리 그래서 경우 :

   응용 프로그램 / 자바 스크립트 / 팩 / 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를 호출 할 수 있습니다 :

   이 당신을 위해 작동하는지 알려주세요!

4. ==============================

   4.그냥 여기 (부트 스트랩 및 jQuery로) 내이며, 당신의 environment.js 파일에 추가합니다 :

   그냥 여기 (부트 스트랩 및 jQuery로) 내이며, 당신의 environment.js 파일에 추가합니다 :

   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']
       })
   )
   

5. ==============================

   5.설치 : ERB를 나는 가장 좋은 방법은 노출 로더를 사용하고 번들 간부를 실행 한 경우 webpacker 레일 같은 방식으로 webpacker는 것을 구성하는 것입니다 생각합니다.

   설치 : ERB를 나는 가장 좋은 방법은 노출 로더를 사용하고 번들 간부를 실행 한 경우 webpacker 레일 같은 방식으로 webpacker는 것을 구성하는 것입니다 생각합니다.

   $ yarn add expose-loader
   

   설정 / 웹팩 / 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
   

   레일은 전 세계적으로 다시 객체에 그것은 당신에게 액세스 권한을 부여해야합니다.

from https://stackoverflow.com/questions/56128114/using-rails-ujs-in-js-modules-rails-6-with-webpacker by cc-by-sa and MIT license