如何使用 Rails + Webpack 配置 Bootstrap 插件？

Question

我正在使用 webpack 设置一个新的 Rails 项目，但我不知道如何启用 Bootstrap 插件（工具提示、警报等）。

1）安装的依赖项：

yarn add bootstrap jquery popper.js

2）我需要以下模块app/javascript/packs/application.js：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("popper.js")
require("bootstrap")

3)在全局范围内启用$y ：jQuery

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

4）我认为：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip">
  Button
</button>

我知道 JQuery 正在工作，因为我可以$('#some-id')从浏览器控制台运行类似的东西。但我无法使用 Bootstrap 的插件。该按钮不显示工具提示。

如果我输入$('#some-id').tooltip()或$('#other-id').alert()收到以下错误：

未捕获的类型错误：$.alert 不是函数

我怎样才能解决这个问题？我读过我需要单独导入插件，但它对我不起作用：

import 'bootstrap/js/dist/alert';

我缺少什么吗？

Answer 1

尝试这个

Rails 6.0.1

config/webpack/enviornment.js

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

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

module.exports = environment

app/javascript/packs/application.js

import "../stylesheets/application"

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'bootstrap/js/src/tooltip'
import 'bootstrap/js/src/alert'

import './main'

window.$ = window.jQuery = $ // make $ available in console for debugging

app/javascript/packs/main.js

// Wait for turbolinks load event
$(document).on('turbolinks:load', () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('.alert').alert()
})

app/javascript/stylesheets/application.scss

$primary: #757575;
$light: #e9ecef;

@import 'bootstrap';
@import 'custom.css';

加载上面的样式表

layouts/application.html.erb。

添加<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

或替换stylesheet_link_tag为stylesheet_pack_tag. 如果你不想使用样式表assets/stylesheets