使用Webpacker从Rails控制器渲染js

问题描述

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

Just replaced the js pipeline in my Rails app with webpacker.

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

Most things work correctly, however controllers that render js no longer work as expected.

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

通常，如果未在render中指定，则以上代码会在我的视图中执行名为javascript_partial.js.erb或action.js.erb的文件.

Normally, the above would execute a file in my view called javascript_partial.js.erb or action.js.erb if not specified in render.

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

The problem seems to be that these files have no connection to the webpacker pipeline and thus cannot access global libraries like jquery or explicitly manage their own imports.

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

This code now causes client-side syntax errors because it cannot access the jquery $ function:

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

在我看来，内联js有一个相关问题.类似于以下内容，

I have a related problem with in-line js in my views. Something like the following,

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

不再起作用，因为内联js无法访问诸如Rails之类的全局对象.

no longer works, because in-line js cannot access global objects such as Rails.

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

This seems to be a straightforward problem but I cannot find documentation anywhere.

有人可以将Webpacker与历史上预期的Rails/js行为协调起来吗?我需要带回sprockets吗?

Does anyone how to harmonize webpacker with historically expected Rails/js behavior? Do I need to bring back sprockets?

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

If it helps, my javascript/packs/application.js file looks something like,

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

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

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

上面的方法工作得很好，并且可以访问jquery，因为我已将其导出到config/webpack/environment.js，

The above works perfectly fine, and has access to jquery because I've exported it in config/webpack/environment.js,

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

推荐答案

感谢这篇精彩的文章！

使用expose-loader将密钥库暴露给遍布整个应用程序的普通JavaScript.

Use expose-loader to expose key libraries to vanilla JavaScript sprinkled throughout your app.

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;

这篇关于使用Webpacker从Rails控制器渲染js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！