Javascript 使用webpacker从Rails控制器呈现js

刚刚用

webpacker

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

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

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

通常，如果未在

render

中指定，则上面的代码将在我的视图中执行名为

javascript_partial.js.erb

或

action.js.erb

的文件

问题似乎是这些文件与

webpacker

管道没有连接，因此无法访问像

jquery

这样的全局库，也无法显式管理它们自己的

导入

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

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

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

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

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;

多亏了我才弄明白

使用
expose loader
将关键库公开给散布在整个应用程序中的香草
JavaScript

1） 安装依赖项

yarn add expose-loader --dev

2） 配置
config/webpack/environment.js

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

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;

我遇到了一个类似的问题，字符串上有未定义的$
$（“#元素”）.html（插入代码）

我的配置与您的配置类似，我是通过在文件
pack/application.js

window.jQuery = jQuery
window.$ = $

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