Rails .js.erb 模板不再适用于 Webpack答案

【问题标题】：Rails .js.erb templates no longer work with WebpackRails .js.erb 模板不再适用于 Webpack
【发布时间】：2018-05-02 23:35:06
【问题描述】：

我刚刚将我的 Rails 应用程序切换为使用 WebPack 来处理资产等。除了我的视图目录 (*.js.erb) 中有一些 JS 模板之外，它运行良好。这些需要 jQuery，并且由于 jQuery 作为我的 WebPack 包的一部分被拉入，它在这些模板中不起作用。

有没有办法让这些模板工作？

【问题讨论】：

标签： javascript jquery ruby-on-rails webpack

【解决方案1】：

我通过添加expose-loader 包，然后将这两行添加到我的app/javascript/packs/application.js 中，使其在我的应用程序中工作：

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

【讨论】：

【解决方案2】：

为了使事情正常工作，您需要使用 yarn 包含 jquery，它适用于最新版本的 rails。

在 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 文件将开始工作参考这个article

【讨论】：

对不起，我应该提到，我没有在这个应用程序中使用资产管道。我已经赶紧在我的 node_modules 目录中安装了，但需要一种方法让 jquery 在我的 web pack 包之外可用
我没听懂你。你能详细说明一下吗

【解决方案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配置参考来自here

我做一个这样的测试页...

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 来查看 pack/application.js 文件中的 jquery 是否也可以工作，以显示我从 jquery 选择器 $('.index--title').text() 获得的标题文本

import Rails from 'rails-ujs'

Rails.start()

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

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

【讨论】：