在.js.erb视图中访问webpacker js

Question

我目前正在尝试从资产管道切换到webpacker，并且试图弄清楚如何从.js.erb视图访问打包的javascript。

我所有的表单看起来都是这样：

<% form_for ..., remote: true do %>

而且我的控制器都响应如下：

def create
  respond_to do |format|
    format.js
  end
end

但是在.js.erb模板（上例中为create.js.erb内，我无法像使用资产管道时一样访问app/javascript/packs/application.js中的任何内容。

如果我的create.js.erb看起来像这样：

$('form').prepend("<%=j form_errors(object) %>")

我收到Uncaught ReferenceError: $ is not defined错误，因为它无法访问jQuery。

这是我的webpack环境文件：

# config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const coffee = require('./loaders/coffee')

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
}));

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

关于如何在.js.erb模板中访问Webpacked js的任何想法。

Answer 1

在application.js中添加这些行，然后尝试：-

// application.js

require("@rails/ujs").start()
require("turbolinks").start()

require("@rails/activestorage").start()
require("channels")
require("jquery")

window.jQuery = $;           // Add this line
window.$ = $;                // Add this line