javascript - 使用 webpacker 从 Rails Controller 渲染 js

Question

刚刚用 webpacker 替换了我的 Rails 应用程序中的 js 管道.

大多数事情都可以正常工作，但是渲染 js 的 Controller 不再按预期工作。

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

通常，上面的代码会在我的 View 中执行一个名为 javascript_partial.js.erb 的文件或 action.js.erb如果未在 render 中指定.

问题似乎是这些文件与 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'
}));

Answer 1

感谢 this wonderful article 解决了这个问题!

使用 expose-loader 将关键库暴露给散布在整个应用中的 Vanilla 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;