Как да инсталирате 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 и да стигнете до никъде, както аз.

Отворете папката си node_modules и voilà!

Сега имаме два варианта. Можем или да добавим цялата рамка на 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 вече знае къде да ги търси.

И това е! Насладете се на славата на вашия ново инсталиран пакет и започнете да разпространявате тези колони и редици навсякъде!