我需要从视图访问jquery，但我不知道如何让rails将其注入页面。我正在用以下代码测试jquery：
=render 'nav'
:javascript
if (typeof jQuery != 'undefined') {
// jQuery is loaded => print the version
alert(jQuery.fn.jquery);
} else {
alert("JQuery undefined");
}
它总是"jquery未定义"。
我尝试了很多方法，包括将jquery-rails添加到Gemfile中。正在运行yarn add jquery。
我试着把config/webpack/environment.js修改成这样：
const { environment } = require('@rails/webpacker')
const merge = require('webpack-merge')
const webpack = require('webpack')
// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
$: 'jquery',
JQuery: 'jquery',
jquery: 'jquery',
'window.Tether': "tether",
Popper: ['popper.js', 'default'], // for Bootstrap 4
})
)
const envConfig = module.exports = environment
const aliasConfig = module.exports = {
resolve: {
alias: {
jquery: 'jquery/src/jquery'
}
}
}
module.exports = merge(envConfig.toWebpackConfig(), aliasConfig)
我也在app/assets/javascripts/application.js下添加了对jquery的引用
//= require jquery_ujs
//= require jquery
//= require_tree .
//= require bootstrap-sprockets
这是app/views/layouts/application.html.haml:
<!DOCTYPE html>
%html
%head
%title Imagehost
= csrf_meta_tags
= csp_meta_tag
%meta{"name"=>"viewport", "content"=>"width=device-width", "initial-scale"=>"1", "shrink-to-fit"=>"no"}
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
%body
= yield
控制台上没有错误消息。
您配置的ProvidePlugin将需要jQuery(当丢失时(用于Webpack捆绑的遗留脚本。它没有将jQuery公开到全局范围，这解释了为什么它在HAML模板中是未定义的。
有很多方法可以实现这一点，不过我建议使用expose-loaderforjQuery来扩展Webpack配置。公开加载程序将变量从Webpack"公开"到全局作用域。
yarn add expose-loader
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
environment.loaders.prepend('jquery', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
})
添加了上述配置后，您应该能够从HAML模板访问window.$和window.jQuery。