ruby-on-rails 如何使用esbuild在rails 7应用程序中安装jQuery和 Bootstrap (不带webpacker)

kiz8lqtg  于 2022-12-27  发布在  Ruby
关注(0)|答案(3)|浏览(200)

我尝试通过安装bootstrap和jQuery来创建一个rails应用程序。

rails new name--css bootstrap

但是它不起作用,所以我用它手动操作。
我也试过使用esbuild,但在控制台打印的情况下,它不起作用。这里是我试过的YouTube link
因此,问题是如何在不使用webpacker的情况下将jQuery安装到rails7应用程序中
问题是现在bootstrap和JavaScript可以工作,但jQuery不行。
这是我的文件
x一个一个一个一个x一个一个二个一个x一个一个三个一个
所有这些创建了一个控制器,并添加一些基本的 Bootstrap ,JavaScript和jquery代码来测试它是否工作,但JavaScript和 Bootstrap 都工作。jQuery是工作时,添加ajax. googleapi链接到HTML页面。但这不是一个好的做法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

因此,问题是如何在rails 7应用程序中安装jQuery而不使用webpacker。
并且还尝试使用

rails new app -j esbuild --css bootstrap
yarn add jquery

但它在我的情况下仍然不起作用。有人有解决办法吗

yqkkidmi

yqkkidmi1#

并且还尝试使用

rails new app -j esbuild --css bootstrap

yarn add jquery

你开始得很好!你只需要一些加法操作
在JQuery库或JQuery脚本之前添加到app/javascript/application.js

import './add_jquery'

并创建文件app/javascript/add_jquery.js

import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery

本地文件中的第一行导入库(add_jquery.js
第二行和第三行使此库成为全局库
就是这样
而且您不需要jquery-railsbootstrap-sass宝石

x6492ojm

x6492ojm2#

这里有一个干净的解决方案,基于this bootstrap tutorial,我用同样的原理添加了jquery. sprockets用于css文件,不需要js. webpacker,node,yarn等的importmap。
Gemfile中:

gem "jquery-rails"
gem "bootstrap"
gem "sassc-rails"

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中:

pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true

app/javascript/application.js中:

import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"

安装gem,清理旧资产,重新启动服务器,它应该可以工作。

cu6pst1q

cu6pst1q3#

我设法让它工作起来。我正在使用以下版本的ruby和rails:

// Gemfile
ruby '3.1.3'
gem 'rails', '~>7.0.4'

我使用以下gem来添加Bootstrap(它允许我在.scss文件中调用标准的bootstrap类和颜色变量):

// Gemfile
gem 'bootstrap-sass', '~> 3.4', '>= 3.4.1'
gem 'bootstrap-will_paginate', '~>1.0.0'

使用以下application.js配置:

// javascript/application.js
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = true
import "controllers"

import 'jquery'

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap

使用.scss样式表(包括将application.css重命名为application.scss),并将以下导入添加到使用引导标准类和颜色变量的自定义.scss样式表中:

// custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";

并向importmap.rb添加以下行:

// config/importmap.rb
pin "jquery", to: "https://code.jquery.com/jquery-3.6.0.min.js", preload: true
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

并将以下行添加到manifest.js

// config/manifest.js
//= link bootstrap.min.js

请注意(据我所知),由于以下gem(我认为是默认的,但也列在我的gem文件中),Rails 7在没有wepback的情况下工作(也不需要使用esbuild之类的东西):

// Gemfile
gem 'sprockets-rails', '~> 3.4', '>= 3.4.2'
gem 'importmap-rails', '~> 1.1', '>= 1.1.5'
gem 'stimulus-rails'
gem 'turbo-rails'
gem 'will_paginate', '~>3.1.8'

相关问题