将 Rails 从 Asset Pipeline 迁移到 Webpacker：未捕获的 ReferenceError：$ 未在 rails-ujs.js 中定义答案

【问题标题】：Migrating Rails from Asset Pipeline to Webpacker: Uncaught ReferenceError: $ is not defined in rails-ujs.js将 Rails 从 Asset Pipeline 迁移到 Webpacker：未捕获的 ReferenceError：$ 未在 rails-ujs.js 中定义
【发布时间】：2019-09-25 02:05:59
【问题描述】：

我正在从使用资产管道迁移到 Rails 5.2 中的 webpacker。我的 AJAX 响应都在浏览器控制台中导致 Uncaught ReferenceError: $ is not defined in rails-ujs.js 错误。

我已经设置了我的 webpacker 环境以包含 jquery。

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

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));

module.exports = environment;

我在我的 ../packs/application.js 中导入了 rails-ujs 和 turbolinks

import Rails from 'rails-ujs'
import 'activestorage'
import 'bootstrap'
...
import Turbolinks from "turbolinks"

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

// Import application specific stuff
import 'application/javascripts'

然后我尝试在请求完成后添加一个类。类似于导轨指南中显示的内容 https://guides.rubyonrails.org/working_with_javascript_in_rails.html#server-side-concerns

我的 show.js.erb 文件看起来像这样

$("#result").addClass("active")

我收到一个错误

Uncaught ReferenceError: $ is not defined
    at <anonymous>:1:1
    at processResponse (rails-ujs.js:282)
    at rails-ujs.js:195
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:263)

【问题讨论】：

标签： ruby-on-rails-5 webpacker rails-ujs

【解决方案1】：

与此同时，我发现自己做错了什么。我需要配置一个别名。我在文档https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration

中找到了解决方案

将environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'}); 添加到我的/config/webpacker/environment.js 就可以了。

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

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));

environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});

module.exports = environment;

【讨论】：

【解决方案2】：

感谢分享。像魅力一样工作。要添加到您的答案，有一个名为 node_modules 的文件夹。在里面你有 jquery/src/jquery.js 文件。该文件就是上面代码行所引用的文件。我是JS的新手，所以请原谅我的无知。我的理解是这个文件返回一个名为 jQuery 的函数。当我们写

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));

我们把事情搞砸了。这基本上意味着 $ = 'jquery' 目前没有定义。接下来我定义 jQuery = 'jquery'。所以 jquery 仍然是未定义的。所以我们必须通过添加该行来定义一个别名。

但如果我写

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  jquery: jQuery,
  $: 'jquery',      
  Popper: ['popper.js', 'default']
}));

然后我不需要添加定义该别名的代码。您的解决方案和这都对我有用。正如我所说，我对 JS 很陌生，我不能说这是否是正确的解决方案。

【讨论】：

【解决方案3】：

试试app/javascript/packs/application.js:

// jquery
import $ from 'jquery';
global.$ = $;
global.jQuery = $;

【讨论】：

尝试在你的帖子中解释上面的代码，这将有助于其他人详细理解。