带有 Webpacker 的 Rails Bootstrap 3 - 下拉菜单不起作用

Question

我知道我可以使用引导程序，因为容器/行在这个网站上工作，但由于某种原因，它看起来不像 JS 为引导程序工作。

我在 app>assets>javascripts>application.js 中有以下设置

//= require rails-ujs
//= require rails-validator

在应用内>javascript>packs>application.js

import "babel-polyfill/dist/polyfill.js";
import nav from "./nav";

app>javascript>packs>styles>bootstrap.scss

@import '~bootstrap/dist/css/bootstrap';
@import '~bootstrap/scss/_functions';
@import '~bootstrap/scss/_variables';

config>webpack>environment.js

const environment = require('./environment')
environment.plugins.get("UglifyJs").options.uglifyOptions.ecma = 5
module.exports = environment.toWebpackConfig()

Gemfile.lock

bootstrap-sass (3.3.7)
  autoprefixer-rails (>= 5.2.1)
  sass (>= 3.3.4)

我不知道我需要更新什么才能让 JS 真正工作。

我尝试过更新应用程序>javascript>application.js：

// JS libraries
import "jquery"
import "jquery-ujs"
import "bootstrap"

这会导致 Uncaught Error: Cannot find module "jquery-ujs" 和 Uncaught ReferenceError: app is not defined。

我尝试添加到 app>javascript>application.js 中：

import 'bootstrap/dist/js/bootstrap';
import Rails from 'rails-ujs';
Rails.start();

然后在我的 config>webpacker>environment.js 中使用：

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

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));

module.exports = environment;

以 bootstrap.js:7 未捕获的错误结束：找不到模块“popper.js”和 home.js:4 未捕获的 ReferenceError：未定义应用程序

Answer 1

也许您可以尝试在您的项目中添加 popper gem。如果我记得它不会自动包含在内。 https://github.com/glebm/popper_js-rubygem