使用 webpacker 从 Rails 控制器渲染 js答案

【问题标题】：Rendering js from a Rails controller with webpacker使用 webpacker 从 Rails 控制器渲染 js
【发布时间】：2019-07-12 11:36:31
【问题描述】：

刚刚将我的 Rails 应用程序中的 js 管道替换为 webpacker。

大多数事情都能正常工作，但是渲染 js 的控制器不再按预期工作。

def action
  format.js { render "javascript_partial" }
end

通常，如果在render 中未指定，上述内容将在我的视图中执行一个名为javascript_partial.js.erb 或action.js.erb 的文件。

问题似乎是这些文件与webpacker 管道没有连接，因此无法访问像jquery 这样的全局库或显式管理它们自己的imports。

此代码现在会导致客户端语法错误，因为它无法访问 jquery $ 函数：

$("#element").html(<= j render partial: 'partial', locals: { object: @object } %>

在我看来，内联 js 存在相关问题。类似于以下内容，

<%= form.collection_select ... onchange: 'Rails.fire(this.form, "submit")' %>

不再起作用，因为内联js无法访问Rails等全局对象。

这似乎是一个简单的问题，但我在任何地方都找不到文档。

有人如何协调 webpacker 与历史上预期的 Rails/js 行为？我需要带回sprockets吗？

如果有帮助，我的 javascript/packs/application.js 文件看起来像，

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';

Rails.start();
Turbolinks.start();

$(document).on("turbolinks:load", () => {
  // initial setup ...
});

上面的工作非常好，并且可以访问jquery，因为我已经将它导出到config/webpack/environment.js，

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

【问题讨论】：

标签： javascript ruby-on-rails webpack ecmascript-6 erb

【解决方案1】：

感谢this wonderful article！

使用 expose-loader 将关键库暴露给普通的 JavaScript 散布在您的应用中。

1) 安装依赖，

yarn add expose-loader --dev

2) 配置config/webpack/environment.js，

const { environment } = require('@rails/webpacker');

environment.config.merge({
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: '$'
        }, {
          loader: 'expose-loader',
          options: 'jQuery'
        }]
      },
      {
        test: require.resolve('rails-ujs'),
        use: [{
          loader: 'expose-loader',
          options: 'Rails'
        }]
      }
    ]
  }
});

module.exports = environment;

【讨论】：

非常感谢您回来回答这个问题。请注意，我必须将 require.resolve('@rails/ujs') 用于我的命名空间，但非常明显的错误。这个答案是唯一真正解决问题的方法。我只需要我的远程 js 模板就可以访问 $.而已。我现在正试图通过撕掉 sprockets 来取得成功，但令人尴尬的是，要弄清楚如何公开 jquery 是多么困难，只是为了一个愚蠢的 dom 选择器（我知道我知道，我吸取了教训）无论如何，我离 git reset --harding 这个分支大约 5 分钟的路程，所以我喝啤酒吧！
@RyanRomanchuk 很高兴它有帮助！让我知道它是如何撕掉链轮的。我尝试删除整个 Rails 资产管道，但无法让我的应用程序正常运行或部署到 Heroku。祝你好运。

【解决方案2】：

我有一个类似的问题，我在字符串上有未定义的 $ $("#element").html(insert_code)

我的配置和你的类似我通过在文件末尾暴露pack/application.js解决了

window.jQuery = jQuery
window.$ = $

【讨论】：