通过 Webpack 在 Rails 中安装 jQuery 时未定义 $
Posted
技术标签:
【中文标题】通过 Webpack 在 Rails 中安装 jQuery 时未定义 $【英文标题】:$ is not defined when installing jQuery in Rails via Webpack 【发布时间】:2019-09-17 14:43:47 【问题描述】:我正在尝试通过 Webpack 在 Rails 6.0.0.rc1 中安装 jQuery,但我不确定我缺少什么,但我在浏览器控制台中收到错误 $ is not defined
,尽管能够编译 jQuery .
我添加了带有yarn add jquery
的jQuery,所以我的package.json 看起来像这样
"name": "muladeseis_app",
"private": true,
"dependencies":
"@babel/preset-react": "^7.0.0",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.4.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"turbolinks": "^5.2.0"
,
"version": "0.1.0",
"devDependencies":
"webpack-dev-server": "^3.3.1"
我的 app/javascript/packs/application.js 需要来自 node_modules 的 jquery
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
我尝试通过以下方式在 config/webpack/environment.js 中注册 $
:
const environment = require('@rails/webpacker')
const webpack = require('webpack')
module.exports = environment
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery'
)
)
每当我在视图中添加带有$
引用的脚本时,我都会得到Uncaught ReferenceError: $ is not defined
。
我已经检查了 *** 的答案,例如 this,以查看我是否错误地注册了关键字符“$”,但我发现只有答案建议使用我已经在我的配置中提到的 ProvidePlugin。
另外,如果我在浏览器检查器中探索我的应用程序源,我确实看到 jQuery 代码集成在 localhost:3000 >> packs/js 中,所以问题不在于 Webpack 没有找到 jQuery,而是关键字 '$' 和 ' jQuery' 无法识别。
感谢您帮助调试此问题。
【问题讨论】:
【参考方案1】:我找到了缺少的东西。
在app/javascript/packs/application.js
忘了声明:
window.jQuery = $;
window.$ = $;
所以可以选择jQuery关键字。
【讨论】:
你能提供完整的 webpack 配置吗?谢谢【参考方案2】:config/webpack/environment.js
中的代码应如下所示:
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin(
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
)
)
另见https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
【讨论】:
这在Rails 6.0.2.2
和纱线1.16.0
中不起作用
expose-loader
的另一个解决方案对我有用 ***.com/a/54906972/2970582
这对我有用(6.0.3.2)。除了 - 为什么只有 src 有效?包中还有一个 dist 但是当我尝试它不起作用时。【参考方案3】:
我尝试了很多东西,有些有效,有些无效,有些在我的 Docker 容器中无效。最后我决定把它放在app/javascript/packs/application.js
:
global.$ = require('jquery')
你当然需要yarn add jquery
。
我确信有更好的方法,但这是唯一对我有用的方法,所以我把它放在这里以防它帮助其他人。
【讨论】:
乐于助人!我已经把我所有的 JavaScript 都打包了,所以我不再需要它了,但在某些情况下肯定仍然需要它,例如使用依赖于全局可用的 jQuery 的旧库时。 没错,我的用例是在我的应用程序中包含 ace 编辑器。它需要在全球范围内包含 $。再次感谢【参考方案4】:此解决方案适用于 Rails 6.0.2.2
和 yarn 1.16.0
https://***.com/a/54906972/2970582
【讨论】:
【参考方案5】:我试图从 rails 4 升级到 rails 6。 经过几个小时的调试,我终于修复了这个 jQuery 加载错误。
所以这里是步骤,我遵循:
-
添加 jQuery
yarn add jquery
-
添加暴露加载器
yarn add expose-loader
-
更新 config/webpack/environment.js 文件
const environment = require('@rails/webpacker')
environment.loaders.append('jquery',
test: require.resolve('jquery'),
use: [
loader: 'expose-loader',
options: '$',
,
loader: 'expose-loader',
options: 'jQuery',
],
);
module.exports = environment
-
更新 app/javascript/packs/application.js 文件
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery");
-
重启 webpack-dev-server
bin/webpack-dev-server
如果更新 environment.js 文件,请始终重启 webpack-dev-server。
如果您想使用旧版本的 jQuery(例如:版本 2.1.4)
yarn add jquery@2.1.4
【讨论】:
【参考方案6】:正如我在https://github.com/rails/webpacker/commit/198a1580c7ec26a24ee81a09404fc173e725f032 和https://github.com/rails/webpacker/issues/3116defe 解释的那样:
-
使用
expose-loader
版本 3
更喜欢通过在app/packs/entrypoints/application.js
中使用import $ from "expose-loader?exposes=$,jQuery!jquery"
来使用expose-loader
(记录在https://webpack.js.org/loaders/expose-loader/#inline)公开jQuery 的内联版本。
在您使用javascript_pack_tag
的位置添加defer: false
。例如,它可能在 app/views/layouts/application.html.erb
中:
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload',
defer: false %>```
【讨论】:
以上是关于通过 Webpack 在 Rails 中安装 jQuery 时未定义 $的主要内容,如果未能解决你的问题,请参考以下文章
ubuntu 14.04中安装 ruby on rails 环境
如何在 Rails 6 和 Webpacker(以及引导程序和 SASS/SCSS)中安装自定义字体