Функции Bootstrap JS не загружаются в Rails 6 / Webpacker

Поднимитесь по кривой обучения с Webpacker и Rails 6.

Я установил Boostrap 4 с помощью Yarn и Webpacker. Когда я пытаюсь поиграть с компонентами Bootstrap в консоли JS браузера, я получаю: TypeError: $.fn.button is undefined.

Если я удалю установку Yarn, добавьте ссылку Bootstrap CDN в head HTML (старый способ), все будет работать нормально. Когда я удаляю ссылки CDN и возвращаюсь к использованию Webpacker, я возвращаюсь к указанной выше ошибке.

Вот моя настройка Webpacker:

// package.json
{
  "name": "depot",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "4.2.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }
}

// enviornment.js
const { environment } = require("@rails/webpacker");

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

module.exports = environment;

// application.js

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

import "./src/application.scss";

# layouts/application.html.haml
!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
    %title Depot
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

Что мне нужно сделать, чтобы экспортировать функции Bootstrap в глобальное пространство имен?


ruby-on-rails-6 webpacker
person Gazza    schedule 02.10.2019    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Нашел форум, где это обсуждалось: https://gorails.com/forum/how-to-use-bootstrap-with-webpack-rails-discussion.

Они упомянули, что это может быть вызвано многократной загрузкой jQuery, а последнее объявление препятствует загрузке JS Bootstrap. Я не нашел в своем проекте никаких доказательств этого.

Для меня исправление закончилось тем, что в точку входа веб-пакета было добавлено несколько строк, которые открывали jQuery для браузера:

# packs/application.js

import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;
person Gazza    schedule 08.10.2019

arrow_upward
0
arrow_downward

Я заметил, что даже если я удалил require 'jquery' из applications.js, jquery все еще появляется в скомпилированном application.js, поэтому я удалил это из enviroment.js

$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',

и добавьте это в application.js

import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;

перезапустите сервер rails, он работает!

Если вы хотите узнать, почему вы видите этот ответ < / а>

person fangxing    schedule 20.08.2020