Rails .js.erb模板不再与Webpack一起使用

Question

我刚刚切换了Rails应用程序以使用WebPack来处理资产等。除了在我的views目录（* .js.erb）中有一些JS模板之外，它的运行情况还不错。 这些需要jQuery，并且由于jQuery作为WebPack捆绑包的一部分被引入，因此在这些模板中不起作用。

有没有办法允许这些模板工作？

Answer 1

通过添加expose-loader包，然后将这两行添加到我的app/javascript/packs/application.js ，我可以在我的app/javascript/packs/application.js ：

import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';

Answer 2

为了使事情正常进行，您需要使用最新版本的rails一起使用yarn来包含jquery。

在Rails 5.1中，这是通过新的JavaScript数据包管理器Yarn完成的，您必须首先安装

sudo apt-get install yarn

然后，您可以使用它来安装jQuery：

yarn add jquery

要实际加载jQuery，您必须添加此行

//= require rails-ujs
//= require jquery
//= require turbolinks
//= require_tree .

安装jQuery的你js.erb文件后就会开始工作，请参阅此文章

Answer 3

这是当我使用webpack且没有资产管道时在.js.erb中使用jquery的方式。 （我假设Rails是使用$ rails new MyApp --webpack类的东西创建的）

首先，我将<%= javascript_include_tag 'application' %>替换为<%= javascript_pack_tag 'application' %>因此我们使用/app/javascript/pack/application.js javascript而不是/app/assets/javascripts/application.js

通过运行添加rails-ujs和jquery

$ yarn add rails-ujs jquery

如下修改/config/webpack/environment.js

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

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery'
  })
)

module.exports = environment

Webpack配置是从这里参考

我做这样的测试页...

in /app/views/pages/index.html.erb

<div class="index">
  <h1 class="index--title">Index Title</h1>
  <div class="index--jquery-test">
    <%= link_to "jquery test", pages_index_path, remote: true %>
  </div>
</div>

并且在/app/views/pages/index.js.erb具有以下代码，当单击链接时将运行jquery

$(function(){
  console.log('run <%= "JQuery" %> from .js.erb')
})

在/app/javascript/pack/application.js导入Rails并调用Rails.start()以允许链接中的日期远程工作，并使不引人注目的javascript调用index.js.erb文件。 我还尝试通过调用console.log来显示我从jquery选择器$('.index--title').text()获得的标题文本，以查看pack / application.js文件中的jquery是否也起作用$('.index--title').text()

import Rails from 'rails-ujs'

Rails.start()

$(function() {
  console.log($('.index--title').text())
})

假设在以下位置运行Rails应用程序： http://localhost:3000/pages/index您应该在浏览器的控制台窗口中看到“索引标题”。 当单击链接时，您应该在控制台窗口中看到“从.js.erb运行JQuery”。 我希望这个对你有用。