Я пытаюсь установить Toastr с помощью веб-упаковщика в Rails

Question

Я пытаюсь установить toastr с помощью webpacker в Rails

Теперь я использую toastr от gem 'toastr-rails' Но замените его, используя yarn add toastr

Как мне настроить app/javascript/packs/application.js?

Это application.js в моем приложении

app/japascript/packs/application.js
import "jquery"
global.$ = require("jquery")

// JS-----
// install by yarn
import 'modaal/dist/js/modaal'
import 'flatpickr/dist/flatpickr'
require("jquery-ui-bundle")

// CSS ------
// install by yarn
import 'flatpickr/dist/flatpickr.min.css';
import 'font-awesome/css/font-awesome.min.css';
import 'jquery/dist/jquery';

import 'stylesheets/application';
import 'javascripts/application';
require.context('../images', true, /\.(png|jpg|jpeg|svg)$/);


$("#login-button").click(function(event){
     event.preventDefault();

    $('form').fadeOut(500);
    $('.wrapper').addClass('form-success');
});


console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

конфиг / Инициализаторы / asset.rb Нужно ли что-то добавлять в asset.rb?

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your 
assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths <<             
Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css     
)

Answer 1

Этот совет предполагает, что у вас есть папка node_modules в корне вашего приложения rails.

Если вы установили toastr с помощью команды ...

yarn add toastr

Тогда пряжа автоматически сгенерирует папку node_modules в корне вашего приложения. Эта папка создается при первом добавлении зависимости с помощью yarn add.

Возможно, у вас уже есть эта папка node_modules, и вы просто не можете ее увидеть. Это связано с тем, что по умолчанию rails добавляет эту папку в .gitignore, что делает ее невидимой в некоторых файловых системах.

Вы можете проверить, есть ли у вас папка node_modules, временно удалив строку node_modules внутри файла .gitignore, а затем обновив дерево файлов.

В этот момент вы сможете увидеть папку node_modules. Добавьте node_modules обратно к вашему .gitignore после того, как вы подтвердите, что эта папка существует в вашем проекте.

Как только это будет сделано, откройте файл config/initializers/assets.rb и добавьте следующие строки

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.js']
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.css']

Затем добавьте следующую инструкцию require в файл application.js

//= require toastr/build/toastr.min

И если вы используете расширения .scss в своих файлах css, то вам нужно добавить следующее в application.scss файл

@import 'toastr/build/toastr.min'; 

Это работает в моей среде.

Обратите внимание, что toastr требует, чтобы jquery был загружен до его загрузки.

Таким образом, вы должны убедиться, что вы включили скрипт jquery перед тегом <%= javascript_include_tag 'application' %> в макете application.html.erb.