javascript - 如何使用 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) 启用 $是 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()我收到以下错误:

Uncaught TypeError: $.alert is not a function

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

import 'bootstrap/js/dist/alert';

有什么我想念的吗？

Answer 1

尝试这个
Rails 6.0.1config/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 中使用样式表