Как да инсталирате bootstrap 4.3 на приложение Rails 6 с помощта на Webpack
И научете как да обслужвате активи чрез Webpack в процеса
Ако сте нов за този свят с това, че имате Webpack вътре в Rails и нямате идея как да управлявате зависимостите чрез него, не се притеснявайте, стигнахте до правилното място.
Докато изграждах нов проект, реших да изпробвам Rails 6.0.0.beta2 и всичките му славни нови функции. Един проблем, на който се натъкнах, беше как да инсталирам css и js пакети през Webpacker, вместо обичайния процес, с който бях свикнал, използвайки скъпоценен камък.
В този урок ще ви преведа през процеса на инсталиране на bootstrap на чисто нов проект Rails 6.0.0.beta2, но все пак можете да използвате почти същите стъпки със съществуващ проект Rails ≥ 5.2.
1. Настройка
Нека започнем със създаването на чисто ново приложение.
парапети нов my_awesome_app
Сега трябва да кажем на приложението ни да обслужва нашите css и js активи чрез Webpack. Нека започнем със създаването на нов манифест css в папката ни за приложение / javascript. Ще използваме този файл, за да импортираме всички наши css оттук нататък.
$ mkdir app / javascript / стилове $ touch app / javascript / stylesheets / application.scss
Забележка: В съществуващо приложение ще трябва да импортирате всичките си текущи css в папката, която създадохме по-горе, и да ги импортирате чрез новосъздадения файл на манифеста.
Сега, нека импортираме файла, който току-що създадохме в нашия манифест js.
# app / javascript / пакети / application.js
import "../stylesheets/application"
Последната стъпка е да кажете на Rails да започне да използва Webpack. За целта отворете application.html.erb файла и направете следната промяна в него.
# приложение / изгледи / оформления / application.html.erb
<% = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%> <% = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'%>
Тук сме заменили помощниците styleheet_link_tag и javascript_include_tag със съответно stylesheet_pack_tag и javascript_pack_tag. Ако стартираме нашето приложение сега, би трябвало да можем да видим тези активи, обслужвани от Webpack.
Сега Webpacker ще следи за всяка промяна в нашите активи и ще ги компилира, когато опресним страницата. Това може да накара страницата ни да се зарежда малко по-бавно в развитието, но за щастие има начин за заобикаляне.
2. Форман за настройка (незадължително)
Ако и вие като мен не ви е приятно да загубите тези скъпоценни допълнителни милисекунди, чакащи страницата ви да се зареди всеки път, когато направите промяна в активите си, не се притеснявайте, можем да използваме Foreman с webpacker-dev-сървър, за да „върнем обратно "компилация в реално време.
Ако никога досега не сте използвали майстор, можете да прочетете повече за това тук. Нека започнем с инсталирането му, както и всеки друг скъпоценен камък.
gem инсталирате бригадир
След това, нека създадем Procfile.dev файл в корена на нашето приложение и добавете следното съдържание към него.
Забележка: Предполагам, че използвате Puma като свой уеб сървър, тъй като това е по подразбиране за новите Rails приложения.
# Procfile.dev
уеб: пакет exec puma -C config / puma.rb webpacker: ./bin/webpack-dev-server
Всичко, което трябва да направим сега, е да стартираме Foreman и той ще създаде двата процеса, които декларирахме по-горе в един прозорец на терминала.
началник начало -f Procfile.dev
Ето! Сега нашите активи ще се компилират автоматично, когато направим каквито и да било промени в тях и няма да се налага да губим тези скъпоценни допълнителни милисекунди, чакащи страницата ни да се зареди след всяка промяна.
3. Добавете вашия пакет
И накрая, нека инсталираме bootstrap и необходимите му зависимости, jquery и popper.
прежда добавете [email protected] jquery popper.js
Ние също трябва да ги добавим като плъгини, така че нека да продължим напред и да добавим тези редове към нашия файл config / webpack / environment.js.
# config / webpack / environment.js
...
const webpack = изисквам ('webpack')
environment.plugins.append (
"Осигуряване",
нов уебпакет.ProvidePlugin ({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)...
Може би се чудите как да разбера какво да добавя във файловете си application.js и application.scss? Това е чудесен въпрос и тъй като четете това, няма да ви се налага да губите времето, опитвайки се да го google и да стигнете до никъде, както аз.
Сега имаме два варианта. Можем или да добавим цялата рамка на JavaScript и css файлове на bootstrap от папката node_modules / bootstrap / dist или да изберем на ръка ресурсите, които ще използваме в нашето приложение.
Ще ви покажа как да направите втората опция, тъй като ви позволява да имате повече контрол върху процеса на инсталиране. Създайте нов файл в папката си с приложение / javascript / пакети, наречена bootstrap_custom.js със следното съдържание.
# app / javascript / пакети / bootstrap_custom.js
import "bootstrap / js / dist / alar" import "bootstrap / js / dist / button" import "bootstrap / js / dist / carousel" import "bootstrap / js / dist / срив" import "bootstrap / js / dist / dropdown" import 'bootstrap / js / dist / index' import "bootstrap / js / dist / modal" import 'bootstrap / js / dist / popover' import "bootstrap / js / dist / scrollspy" import "bootstrap / js / dist / tab" import "bootstrap / js / dist / toast" импортиране „bootstrap / js / dist / tooltip“ import "bootstrap / js / dist / util"
И го свържете във вашия app / javascript / packs / application.js файл.
# app / javascript / пакети / application.js
import './bootstrap_custom.js'
Сега можете да коригирате app / javascript / пакети / bootstrap_custom.js, за да отговарят на вашите нужди, като коментирате импорта, който не ви трябва.
Нека направим същото за нашия css.
# app / javascript / stylesheets / application.scss
@import './bootstrap_custom.scss';
И създайте файла bootstrap_custom.scss в папката ни с приложение / javascript / стилове.
# app / javascript / стилове / bootstrap_custom.scss
@import '~ bootstrap / scss / _functions.scss'; @import '~ bootstrap / scss / _variables.scss'; @import '~ bootstrap / scss / _mixins.scss'; @import '~ bootstrap / scss / _root.scss'; @import '~ bootstrap / scss / _reboot.scss'; @import '~ bootstrap / scss / _type.scss'; @import '~ bootstrap / scss / _alert.scss'; @import '~ bootstrap / scss / _badge'; @import '~ bootstrap / scss / _breadcrumb'; @import '~ bootstrap / scss / _button-group'; @import '~ bootstrap / scss / _buttons'; @import '~ bootstrap / scss / _buttons.scss'; @import '~ bootstrap / scss / _card.scss'; @import '~ bootstrap / scss / _carousel.scss'; @import '~ bootstrap / scss / _close.scss'; @import '~ bootstrap / scss / _code.scss'; @import '~ bootstrap / scss / _custom-form.scss'; @import '~ bootstrap / scss / _dropdown.scss'; @import '~ bootstrap / scss / _forms.scss'; @import '~ bootstrap / scss / _grid.scss'; @import '~ bootstrap / scss / _images.scss'; @import '~ bootstrap / scss / _input-group.scss'; @import '~ bootstrap / scss / _jumbotron.scss'; @import '~ bootstrap / scss / _list-group.scss'; @import '~ bootstrap / scss / _media.scss'; @import '~ bootstrap / scss / _modal.scss'; @import '~ bootstrap / scss / _nav.scss'; @import '~ bootstrap / scss / _navbar.scss'; @import '~ bootstrap / scss / _pagination.scss'; @import '~ bootstrap / scss / _popover.scss'; @import '~ bootstrap / scss / _print.scss'; @import '~ bootstrap / scss / _progress.scss'; @import '~ bootstrap / scss / _spinners.scss'; @import '~ bootstrap / scss / _tables.scss'; @import '~ bootstrap / scss / _toasts.scss'; @import '~ bootstrap / scss / _tooltip.scss'; @import '~ bootstrap / scss / _transitions.scss'; @import '~ bootstrap / scss / _utilities.scss';
И можете да направите същото, което направихме преди, можете да изберете кои части от техния css искате да добавите към вашия проект.
Забележка: Не променяйте реда на вноса на scss (поне най-горните) или ще получите всякакви грешки.
Също така имайте предвид, че не е трябвало да добавяме node_modules част от пътя към импорта, защото Webpack вече знае къде да ги търси.
И това е! Насладете се на славата на вашия ново инсталиран пакет и започнете да разпространявате тези колони и редици навсякъде!