Установка jquery: jQuery | Установка библиотеки

Содержание

Как установить jQuery и bootstrap в приложении rails 7 с помощью esbuild (без webpacker)

спросил 1 год, 3 месяца назад

Изменено 3 месяца назад

Просмотрено 15 тысяч раз

Я пытаюсь создать приложение для рельсов, установив bootstrap и jQuery. Сначала я попытался создать с помощью

 новое имя рельсов - начальная загрузка css

Но это не работает. Так что я сделал это с ним вручную.

Я также пытался использовать esbuild, но в случае печати в консоли он не работает. Вот ссылка на YouTube, которую я пробовал.

Итак, вопрос в том, как установить jQuery в приложение rails 7 без использования веб-упаковщика

Проблема в том, что теперь начальная загрузка и JavaScript работают, но не jQuery.

Вот мои файлы выглядят так:

 // app/assets/stylesheet/application.  scss
@import "бутстрап-звездочки";
@import "загрузочная";

 // приложение/javascript/application.js
//= требуется JQuery
//= требуется jquery_ujs
//= требуется bootstrap.min
// требуются турболинки
//= требуемое_дерево.

 # Gemfile
гем 'бутстрап-дерзость', '~> 3.3.7'
гем 'jquery-rails'
драгоценный камень «sass-rails»

После того, как все это создало контроллер и добавило базовую загрузку, Коды JavaScript и jquery для проверки, работают они или нет, но и JavaScript, и загрузчик работают. jQuery работает при добавлении ссылки ajax.googleapi на HTML-страницу. Но это не очень хорошая практика.

Итак, вопрос в том, как установить jQuery без использования веб-упаковщика в приложение для рельсов 7.

А также пытался установить с помощью

 rails новое приложение -j esbuild --css bootstrap
пряжа добавить jquery

Но в моем случае это все еще не работает.

У кого-нибудь есть решение

jquery
ruby-on-rails
ruby-on-rails-7

А также пытался установить с помощью

 рельсы новое приложение -j esbuild --css bootstrap
пряжа добавить jquery

Правильно начинаешь! Вам просто нужны дополнительные действия

Добавить в ваш app/javascript/application.js перед библиотеками JQuery или скриптами JQuery

 import './add_jquery'

И создайте файл app/javascript/add_jquery.js :

 импортируйте jquery из 'jquery'
окно.jQuery = jquery
окно. $ = jquery

Первая строка импортирует библиотеку в локальный файл ( add_jquery.js )

Вторая и третья строки делают эту библиотеку глобальной

Вот и все

рэп-дерзость драгоценных камня

Вот чистое решение, основанное на этом руководстве по начальной загрузке. Я использовал тот же принцип, чтобы добавить jquery. Sprockets используется для файлов css, а importmaps — для js. Webpacker, node, yarn и т.п. не нужны.

В Gemfile :

 gem "jquery-rails"
драгоценный камень "бутстрап"
драгоценный камень "sassc-рельсы"

В app/assets/stylesheets/application.scss (обратите внимание, что суффикс файла должен быть .scss , а не .css ; при необходимости измените суффикс):

 @import "bootstrap";

В config/initializers/assets.rb :

 Rails.application.config.assets.precompile += %w(jquery.min.js jquery_ujs.js bootstrap.min.js popper.js)

В config/importmap.rb :

 прикрепить "jquery", к: "jquery.min.js", предварительная загрузка: true
прикрепить "jquery_ujs", к: "jquery_ujs.js", предварительная загрузка: true
прикрепить "popper", к: "popper.js", предварительная загрузка: true
прикрепить "bootstrap", к: "bootstrap. min.js", предварительная загрузка: true

В app/javascript/application.js :

 импортировать "jquery"
импортировать "jquery_ujs"
импортный "поппер"
импортировать "бутстрап"

Установите драгоценные камни, удалите старые активы, перезапустите сервер, и все должно заработать.

Мне удалось заставить его работать. Я использую следующие версии ruby и rails:

 // Gemfile
рубин '3.1.3'
драгоценный камень «рельсы», «~>  7.0.4»

Я использую следующие драгоценные камни для добавления Bootstrap (которые позволяют мне вызывать стандартные классы начальной загрузки и переменные цвета в моих файлах .scss):

 // Gemfile
гем 'бутстрап-дерзость', '~> 3.4', '>= 3.4.1'
гем 'bootstrap-will_paginate', '~> 1.0.0'

Со следующей конфигурацией application.js:

 // javascript/application.js
импортировать { Turbo } из "@hotwired/turbo-rails"
Turbo. session.drive = правда
импортировать "контроллеры"
импортировать jquery
импортировать * как бутстрап из 'bootstrap'
window.bootstrap = начальная загрузка

Использование таблиц стилей .scss (включая переименование application.css в application.scss) и добавление следующего импорта в мою таблицу стилей custom.scss, которая использует стандартные классы начальной загрузки и цветовые переменные:

 // custom.scss
@import "бутстрап-звездочки";
@import "загрузочная";

А также добавить следующие строки в importmap.rb:

 // config/importmap.rb
прикрепить "jquery", к: "https://code.jquery.com/jquery-3.6.0.min.js", предварительная загрузка: true
прикрепить "popper", к: "popper.js", предварительная загрузка: true
прикрепить "bootstrap", к: "bootstrap.min.js", предварительная загрузка: true

И следующая строка в manifest.js

 // config/manifest.js
//= ссылка bootstrap.min.js

Обратите внимание, что (насколько я понимаю) Rails 7 работает без wepback (и без необходимости использовать что-то вроде esbuild) благодаря следующим драгоценным камням, которые, как мне кажется, установлены по умолчанию (но также перечислены в моем Gemfile):

 // Gemfile
gem 'звездочки-рельсы', '~> 3.   4', '>= 3.4.2'
gem 'importmap-rails', '~> 1.1', '>= 1.1.5'
драгоценный камень «стимул-рельсы»
драгоценный камень «турбо-рельсы»
драгоценный камень 'will_paginate', '~> 3.1.8'

Столкнулся с той же проблемой. Что я сделал на основе этой ссылки

В Gemfile добавить gem

 gem 'jquery-rails'

В application.js добавьте

 импорт "jquery"
импортировать "jquery_ujs"

В config/importmap.rb

 прикрепить "jquery", к: "jquery.min.js", предварительная загрузка: true
прикрепить "jquery_ujs", к: "jquery_ujs.js", предварительная загрузка: true

Вот моя ссылка на репозиторий github, где я реализовал базовый код для jQuery

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Ruby on Rails Установка JQuery

Я создаю новый проект, я просто следую инструкциям шаг за шагом, чтобы установить jquery в свой проект, но это не работает.

Я добавляю эти две строки в свой вид.

<% stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<% javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Проект\Gemfile

    источник 'https://rubygems.org'
    git_source(:github) сделать |repo_name|
      repo_name = "#{repo_name}/#{repo_name}", если только repo_name.include?("/")
      "https://github.com/#{repo_name}.git"
    конец
    # Вместо этого добавьте Edge Rails: gem 'rails', github: 'rails/rails'
    гем 'рельсы', '~> 5.1.4'
    # Использовать sqlite3 в качестве базы данных для Active Record
    драгоценный камень 'sqlite3'
    # Использовать Puma в качестве сервера приложений
    гем 'пума', '~> 3.7'
    # Используйте SCSS для таблиц стилей
    гем 'sass-rails', '~> 5.0'
    # Используйте Uglifier в качестве компрессора для ресурсов JavaScript
    драгоценный камень 'углификатор', '>= 1.3.0'
    # См. https://github.
  com/rails/execjs#readme для получения дополнительной информации о поддерживаемых средах выполнения.
    # gem 'therubyracer', платформы: :ruby
    # Используйте CoffeeScript для активов и представлений .coffee
    gem 'coffee-rails', '~> 4.2'
    # Turbolinks ускоряет навигацию по вашему веб-приложению. Подробнее: https://github.com/turbolinks/turbolinks
    гем 'турболинки', '~> 5'
    # Легко создавайте JSON API. Подробнее: https://github.com/rails/jbuilder
    гем 'jbuilder', '~> 2.5'
    # Используйте адаптер Redis для запуска Action Cable в производственной среде.
    # gem 'redis', '~> 3.0'
    # Использовать ActiveModel has_secure_password
    # гем 'bcrypt', '~> 3.1.7'
    # Используйте Capistrano для развертывания
    # gem 'capistrano-rails', group: :development
    группа :разработка, :тест делать
      # Вызовите 'byebug' в любом месте кода, чтобы остановить выполнение и получить консоль отладчика
      gem 'byebug', платформы: [:mri, :mingw, :x64_mingw]
      # Добавляет поддержку системного тестирования Capybara и драйвера селена.  
      драгоценный камень 'капибара', '~> 2.13'
      драгоценный камень «селен-вебдрайвер»
    конец
    группа :развитие делать
      # Получите доступ к консоли IRB на страницах исключений или с помощью любого места в коде.
      gem 'веб-консоль', '>= 3.3.0'
    конец
    # Windows не включает файлы zoneinfo, поэтому свяжите гем tzinfo-data
    гем 'tzinfo-data', платформы: [:mingw, :mswin, :x64_mingw, :jruby]
    гем 'jquery-rails'
    драгоценный камень 'mysql2'

Проект\приложение\активы\javascripts\application.js

 // Это файл манифеста, который будет скомпилирован в application.js, в который будут включены все файлы
 // перечислено ниже.
 //
 // Любой файл JavaScript/Coffee в этом каталоге, lib/assets/javascripts или любой плагин
 // Здесь можно сослаться на каталог vendor/assets/javascripts, используя относительный путь.
 //
 // Не рекомендуется добавлять код прямо сюда, но если вы это сделаете, он появится внизу
 // скомпилированный файл.

Штирлиц — Сеть печатных салонов в Перми

Установка jquery: jQuery | Установка библиотеки

Как установить jQuery и bootstrap в приложении rails 7 с помощью esbuild (без webpacker)

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Ruby on Rails Установка JQuery

Добавить комментарий Отменить ответ