Rails 6.1及更高版本如何正确引入Bootstrap JavaScript脚本

Rails 6 默认使用 Webpacker 管理前端资源，旧版本 Sprockets 的 //= require 语法仅对 app/assets/javascripts 目录下的文件生效，写在 Webpacker 管理的 app/javascript/packs/application.js 中不会生效，你之前混合两种语法、重复导入的写法均为错误配置，按以下步骤修正即可：

1. 清理无效配置 #

• 删除 Gemfile 中的 jquery-rails 依赖，Webpacker 环境直接通过 npm 安装 jQuery，无需该 Ruby gem，修改后执行 bundle install 生效
• 删除 app/javascript/packs/application.js 中所有 //= require 开头的行，以及末尾重复的 require(xxx).start() 相关代码（require("bootstrap-sprockets").start()、require("require_tree .").start() 等写法均为语法错误）

2. 安装npm依赖 #

在项目根目录执行以下命令，安装和你当前使用版本对齐的Bootstrap及依赖：
yarn add jquery bootstrap@3.3.7 popper.js

3. 配置Webpacker暴露全局jQuery #

Bootstrap 3 依赖全局的 jQuery 对象运行，修改 config/webpack/environment.js 为以下内容：

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  })
)

module.exports = environment

4. 修正application.js内容 #

将 app/javascript/packs/application.js 调整为以下内容：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
// 引入Bootstrap JS
import "bootstrap"
// 样式如果仍走Asset Pipeline管理可删除下一行，走Webpacker则保留
import "../stylesheets/application"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

5. 验证生效 #

重启 Rails 服务与 webpack-dev-server（若开启），打开浏览器控制台输入 $().tooltip，若返回函数定义则说明 Bootstrap JS 已成功加载。如果原样式仍通过 Sprockets 管理，Gemfile 中的 bootstrap-sass、font-awesome-sass 可保留无需修改，不影响JS逻辑。

内容的提问来源于stack exchange，提问作者user15765109