如何使用 esbuild 在 Rails 7 应用程序中安装 jQuery 和 bootstrap（无需 webpacker）

Question

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

rails new name--css bootstrap

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

我也尝试使用 esbuild 但在控制台中打印时它不起作用。这是我尝试过的YouTube 链接。

所以问题是如何在不使用 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'

所有这些创建了一个控制器并添加了一些基本的引导程序、JavaScript 和 jquery 代码来测试它是否工作，但 JavaScript 和引导程序都工作。将 ajax.googleapi 链接添加到 HTML 页面时，jQuery 正在工作。但这不是一个好的做法。

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

所以问题是如何在 Rails 7 应用程序中不使用 webpacker 安装 jQuery。

并且还尝试使用安装

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

You start right! You just need some addition actions

Add to your app/javascript/application.js before JQuery libraries or JQuery scripts

import './add_jquery'

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

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

First line import library in local file (add_jquery.js)

Second and third lines make this library global

That's it

而且你不需要jquery-rails宝石bootstrap-sass

Answer 2

这是一个基于此引导教程的干净解决方案。我用同样的原理添加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"

安装gems，破坏旧资产，重新启动服务器，它应该可以工作。