如何使用 esbuild（没有 webpacker）在 rails 7 应用程序中安装 jQuery 和 bootstrap

Question

我正在尝试通过安装 bootstrap 和 jQuery 创建一个 rails 应用程序。首先我尝试使用

创建

rails new name--css bootstrap

但它不起作用。所以我用它手动完成了。

我也尝试过使用 esbuild，但在控制台打印的情况下它不起作用。这是我试过的YouTube link。

所以问题是如何在不使用 webpacker

的情况下在 rails 7 应用程序中安装 jQuery

问题是现在 bootstrap 和 JavaScript 正在工作，但 jQuery。

这是我的文件看起来像

// app/assets/stylesheet/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

// app/javascript/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
// require turbolinks
//= require_tree .

# Gemfile

gem 'bootstrap-sass', '~> 3.3.7'
gem 'jquery-rails'
gem 'sass-rails'

在所有这些创建控制器并添加一些基本内容后 bootstrap，要测试的 JavaScript 和 jquery 代码是否有效，但 JavaScript 和 bootstrap 都有效。 jQuery 在将 ajax.googleapi link 添加到 HTML 页面时有效。但这不是一个好习惯。

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

所以问题是如何在不使用 webpacker 的情况下安装 jQuery rails 7 个应用程序。

也尝试使用

安装

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

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

Answer 1

And also tried to install by using

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-rails 和 bootstrap-sass 宝石

Answer 2

这是一个干净的解决方案，基于 this bootstrap tutorial。我用同样的原理加了jquery。 Sprockets 用于 css 文件，而 importmaps 用于 js。不需要webpacker、node、yarn等

在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，破坏旧资产，重新启动服务器，它应该可以工作。

如何使用 esbuild（没有 webpacker）在 rails 7 应用程序中安装 jQuery 和 bootstrap

How to install jQuery and bootstrap in rails 7 app using esbuild (without webpacker)

jquery

ruby-on-rails

ruby-on-rails-7