通过 Webpack 在 Rails 中安装 jQuery 时未定义 $
$ is not defined when installing jQuery in Rails via Webpack
我正在尝试通过 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 需要 jquery 来自 node_modules
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
.
我已经检查了像 这样的 Whosebug 答案,看看我是否错误地注册了关键字符“$”,但我只找到了建议使用我已经提到的 ProvidePlugin 的答案在我的配置中。
此外,如果我在浏览器检查器中浏览我的应用程序源代码,我会看到 jQuery 代码集成在 localhost:3000 >> packs/js 中,所以问题不在于 Webpack 没有找到 jQuery 但关键字 '$' 和 'jQuery' 未被识别。
非常感谢你帮助调试这个。
我已经找到了缺少的东西。
在app/javascript/packs/application.js
忘记申报:
window.jQuery = $;
window.$ = $;
所以 jQuery 个关键字可以被提取。
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
和 yarn 1.16.0
我尝试了很多东西,有些在我的 Docker 容器中有效,有些无效,有些无效。最后我决定把它放在 app/javascript/packs/application.js
:
global.$ = require('jquery')
你当然需要yarn add jquery
。
我相信有更好的方法,但这是唯一对我有用的方法,所以我把它放在这里以防它对其他人有帮助。
我正在尝试从 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
正如我在 https://github.com/rails/webpacker/commit/198a1580c7ec26a24ee81a09404fc173e725f032 and https://github.com/rails/webpacker/issues/3116defe 中解释的:
- 使用
expose-loader
版本3
- 通过在
app/packs/entrypoints/application.js
. 中使用 import $ from "expose-loader?exposes=$,jQuery!jquery"
,更喜欢使用 expose-loader
公开 jQuery 的内联版本(记录在 https://webpack.js.org/loaders/expose-loader/#inline)
- 在您使用
javascript_pack_tag
的地方添加 defer: false
。例如,它可以在 app/views/layouts/application.html.erb
中,其中:
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload',
defer: false %>```
我正在尝试通过 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 需要 jquery 来自 node_modules
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
.
我已经检查了像
此外,如果我在浏览器检查器中浏览我的应用程序源代码,我会看到 jQuery 代码集成在 localhost:3000 >> packs/js 中,所以问题不在于 Webpack 没有找到 jQuery 但关键字 '$' 和 'jQuery' 未被识别。
非常感谢你帮助调试这个。
我已经找到了缺少的东西。
在app/javascript/packs/application.js
忘记申报:
window.jQuery = $;
window.$ = $;
所以 jQuery 个关键字可以被提取。
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
和 yarn 1.16.0
我尝试了很多东西,有些在我的 Docker 容器中有效,有些无效,有些无效。最后我决定把它放在 app/javascript/packs/application.js
:
global.$ = require('jquery')
你当然需要yarn add jquery
。
我相信有更好的方法,但这是唯一对我有用的方法,所以我把它放在这里以防它对其他人有帮助。
我正在尝试从 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
正如我在 https://github.com/rails/webpacker/commit/198a1580c7ec26a24ee81a09404fc173e725f032 and https://github.com/rails/webpacker/issues/3116defe 中解释的:
- 使用
expose-loader
版本3 - 通过在
app/packs/entrypoints/application.js
. 中使用 - 在您使用
javascript_pack_tag
的地方添加defer: false
。例如,它可以在app/views/layouts/application.html.erb
中,其中:
import $ from "expose-loader?exposes=$,jQuery!jquery"
,更喜欢使用 expose-loader
公开 jQuery 的内联版本(记录在 https://webpack.js.org/loaders/expose-loader/#inline)
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload',
defer: false %>```