Невозможно получить доступ к jQuery из моих взглядов на RoR - PullRequest
Новая
       7

Невозможно получить доступ к jQuery из моих взглядов на RoR

0 голосов
/ 27 октября 2019

Мне нужен доступ к jquery из моих представлений, и я не могу понять, как заставить рельсы внедрять его в страницы. Я проверяю наличие jquery с помощью следующего кода: 

=render 'nav'
:javascript
  if (typeof jQuery != 'undefined') {
    // jQuery is loaded => print the version
    alert(jQuery.fn.jquery);
  } else {
    alert("JQuery undefined");
  }

Это всегда было "jquery undefined".

Я пробовал много вещей, включая добавление 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)

Я добавил ссылки на jquery также под app/assets/javascripts/application.js

//= 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

На консоли нет сообщений об ошибках.

1 Ответ

0 голосов
/ 07 ноября 2019

Для настроенной ProvidePlugin потребуется jQuery (если он отсутствует) для устаревших сценариев, связанных Webpack. Он не предоставляет jQuery для глобальной области видимости, что объясняет, почему он не определен в вашем шаблоне HAML.

Существует несколько способов сделать это, хотя я бы рекомендовал расширить конфигурацию Webpack с помощью expose-loader для jQuery. Загрузчик expose «выставляет» переменные для глобальной области видимости из 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: '$'
  }]
})

С добавлением вышеуказанного конфига вы сможете получить доступ к window.$ и window.jQuery из ваших шаблонов HAML.

...