Question

只需用webpacker替换Rails应用程序中的js管道即可。

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

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

通常，如果未在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将密钥库暴露给遍及您应用的普通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;

Answer 2

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

我的配置与我通过在文件pack/application.js的末尾公开来解决的配置类似。

windows.jQuery = jQuery
window.$ = $

使用webpacker从Rails控制器渲染js

2 个答案: