Pracując nad swoim projektem Atena pierwszy raz spotkałem się z webpackiem, który okazał się wspaniałym narzędziem i postanowiłem się trochę nim pobawić. Wyszedł z tego poboczny projekt (generator-front-webpack) nad którym pracowałem w wolnych chwilach.

Co to jest webpack?

Webpack jest to module bundler, który „składa” twoje zależności w całość i pozwala w łatwy sposób budować projekty. Nie będę się tutaj rozpisywał na jego temat ponieważ w internecie jest pełno artykułów na temat webpacka. Poniżej przedstawiam moim zdaniem najbardziej interesujące:

Generator-front-end-sass

Dawno temu zrobiłem już swój generator i nawet opisałem go na blogu. Tamten generator oparty był w głównej mierze na GruntJS. Sprawdzał się bardzo dobrze, pomógł mi w wielu projektach. Wpadłem na pomysł, aby w nowym generatorze zaimplementować najważniejsze funkcje ze starego,  pozbyć się to co niepotrzebne i dodać to czego brakowało.

Generator-front-webpack – nowy, lepszy, fajniejszy 🙂

Tak powstał generator-front-webpack. Lista zaimplementowanych ficzerów:

  • bundlowanie modułów za pomocą webpacka
  • transpilacja (uwielbiam to słowo) ES2015 do ES5 za pomocą babela
  • kompilowanie SASS/SCSS do CSS
  • Autoprefixer CSS
  • Lintowanie kodu JavaScript za pomocą eslint
  • Lintowanie kodu SASS za pomocą sass-lint
  • walidacja kodu html za pomocą html-validator
  • walidacja web accessibility za pomocą AccessSnif
  • testy kednostkowe kodu JavaScript za pomocą Karma i Jasmine

Instalacja

Aby generator działa musisz mieć zainstalowany nodejs na komputerze. Jeśli tak nie jest to możesz pobrać node z oficjalnej strony: https://nodejs.org/en/

Kolejnym krokiem jest instalacja yeomana. Jeśli już go masz to możesz pominąć ten krok

Do odpalania testów jednostkowych należy zainstalować narzędzie karma-cli. Jeśli go nie masz możesz to zrobić w łatwy sposób:

Następnie należy zainstalować generator-front-sass:

Generowanie projektu

Teraz przejdź do folderu gdzie chcesz utworzyć nowy projekt:

Aby wygenerować projekt wpisz komendę:

Development

Aby zacząć development i uruchomić dev server użyj komendy

Jeśli wszystko zadziałało to możesz wpisać w przeglądarce adres: http://localhost:8080/

Twoim oczom powinno ukazać się coś takiego:

generator-front-webpack

Testy

Aby przeteotwać swój projekt użyj komendy

Build

Aby zbudować projekt do katalogu /dist użyj komendy

Plany

Funkcjonalności, które udało się zaimplementwać to tak zwana wersja MVP. Planuję rozwijać ten generator i dodać kilka interesujących funkcjonalności jak np.:

  • testy regresyjne css
  • optymalizacja plików produkcyjnych
  • automatyczne generowanie dokumentacji do plików SASS
  • automatycznie generowanie dokumentacji do plików JS
  • starter kit z plikami html/scss
  • Continous integration
Podsumowanie

Dzisiaj pokazałem CI swój nowy generator do aplikacji frontendowych. Wbijaj na Githuba zostawić gwiazdkę jeśli CI się spodobało. Będę bardzo wdzięczny. 🙂

Share on FacebookTweet about this on TwitterShare on LinkedIn