Moduł 10 – Moduły, NPM i ES6+

JavaScript, od 1995 roku, kiedy został opublikowany, przeszedł bardzo długą drogę do stanu, w którym jest dziś. Największe zmiany zaszły stosunkowo niedawno, w 2015 roku, gdy wydana została wersja 6 znana jako ECMAScript 6 lub w skrócie ES6. Za pomocą nazwy ES6+ lub ESNext określa się wszystkie nowe wersje JS-a, czyli te wydane od 2015 roku. Dowiemy się, jakie zmiany zaszły, z czego możemy swobodnie korzystać, na co trzeba uważać i co najważniejsze — jaką wersję JS-a obsługują przeglądarki.

📚 Zawartość modułu

Moduł "Moduły, NPM i ES6+" jest podzielony na 42 lekcje:

1. Wstęp: Lekcja wprowadza do tematu modułów, NPM i ES6+, prezentując ich znaczenie i wpływ na rozwój języka JavaScript.
2. Podstawy działania modułów: Omawia podstawowe koncepcje modułów w JavaScript, takie jak eksportowanie i importowanie funkcji i zmiennych.
3. Importy i exporty nazwane i domyślne: Pokazuje różne sposoby eksportowania i importowania elementów w modułach, zarówno za pomocą nazwanych, jak i domyślnych eksportów.
4. Symulacja działania modułu za pomocą funkcji: Odczarowujemy "czarną skrzynkę" jaką dla wielu są moduły, przedstawiając metodę ich działania za pomocą starej dobrej funkcji w czystym JS!
5. Import całej zawartości modułu na raz: Wyjaśnia możliwość importowania całego modułu jednocześnie, co ułatwia korzystanie z niektórych bibliotek i zestawów narzędzi.
6. Projekt 0 - counter z użyciem modułów: Praktyczne zastosowanie modułów w prostym projekcie licznika, aby zaprezentować ich działanie w praktyce.
7. Projekt 1 - counter z interfejsem z użyciem modułów: Kontynuacja poprzedniego projektu, dodając interfejs użytkownika przy użyciu modułów.
8. Instalacja NodeJS: Instrukcje dotyczące instalacji środowiska Node.js na Windows, MacOS i Linux.
9. NPM inicjalizacja i instalacja zależności: Omawia inicjalizację projektu przy użyciu NPM oraz proces instalacji i zarządzania zależnościami.
10. Użycie modułów zainstalowanych przez NPM: Pokazuje, jak korzystać z zewnętrznych modułów zainstalowanych przez NPM w naszym projekcie.
11. Webpack: Wprowadzenie do narzędzia Webpack, które umożliwia pakowanie i budowanie aplikacji JavaScript.
12. Webpack - HtmlWebpackPlugin: Wyjaśnia, jak skonfigurować HtmlWebpackPlugin w Webpacku, aby generować dynamicznie pliki HTML.
13. Webpack - DevServer: Przedstawia DevServer w Webpacku, który zapewnia szybkie środowisko deweloperskie z automatycznym odświeżaniem strony.
14. Webpack - importowanie CSS: Demonstruje, jak importować i zarządzać stylami CSS w projekcie za pomocą Webpacka.
15. Webpack - importowanie zdjęć lub innych zasobów: Wyjaśnia, jak importować i obsługiwać grafiki, zdjęcia i inne zasoby w projekcie za pomocą Webpacka.
16. Webpack - bundle hash i CleanWebpackPlugin: Omawia techniki tworzenia unikalnych hashów dla plików wynikowych i czyszczenia folderu wyjściowego za pomocą CleanWebpackPlugin w Webpacku.
17. Babel - wprowadzenie: Przedstawia narzędzie Babel, które umożliwia transpilację kodu ES6+ na wcześniejsze wersje JavaScript.
18. Babel - transpilacja za pomocą CLI: Wyjaśnia, jak używać Babela z interfejsem wiersza poleceń (CLI) do transpilacji kodu JavaScript.
19. Webpack - babel-loader: Pokazuje, jak skonfigurować babel-loader w Webpacku, aby automatycznie transpilować kod przy budowaniu.
20. Webpack - struktura folderów: Przedstawia sugerowaną strukturę folderów dla projektu opartego na Webpacku, zapewniającą czytelność i skalowalność.
21. Webpack - source maps: Wyjaśnia, jak skonfigurować source maps w Webpacku, aby ułatwić debugowanie kodu w przeglądarce.
22. ES6 - lista zmian: Przegląd zmian wprowadzonych w ES6, takich jak nowe składnie, metody i funkcje, które znacząco ulepszają JavaScript.
23. ES6 - extended object literals: Omawia rozszerzone literały obiektowe w ES6, które umożliwiają bardziej wyrafinowane tworzenie i inicjalizację obiektów.
24. ES6 - template strings: Wyjaśnia template strings w ES6, które umożliwiają łączenie dynamicznych wartości z ciągami znaków w bardziej czytelny sposób.
25. ES6 - destrukturyzacja tablic: Pokazuje destrukturyzację tablic w ES6, umożliwiając wygodne wyodrębnianie wartości z tablicy do oddzielnych zmiennych.
26. ES6 - destrukturyzacja tablic w parametrach: Wyjaśnia, jak destrukturyzować tablice w parametrach funkcji, co ułatwia przekazywanie danych do funkcji.
27. ES6 - destrukturyzacja obiektów: Przedstawia destrukturyzację obiektów w ES6, umożliwiając wygodne wyciąganie wartości z obiektu do zmiennych o odpowiadających nazwach.
28. ES6 - destrukturyzacja obiektów z innymi nazwami zmiennych: Omawia technikę destrukturyzacji obiektów z przypisaniem do zmiennych o innych nazwach niż oryginalne właściwości.
29. ES6 - użycie default, rest i spread w funkcjach: Przedstawia zastosowanie konstrukcji default, rest i spread w funkcjach w ES6, które wprowadzają nowe możliwości manipulacji danymi.
30. ES6 - nowe właściwości wbudowanych obiektów: Wyjaśnia nowe właściwości i metody dodane do wbudowanych obiektów w ES6.
31. ES7 - lista zmian: Przegląd zmian wprowadzonych w ES7, takich jak metoda includes dla tablic.
32. ES8 - lista zmian: Omawia zmiany wprowadzone w ES8.
33. ES9 - lista zmian: Przedstawia zmiany wprowadzone w ES9.
34. ES10 - lista zmian: Wyjaśnia nowości w ES10.
35. ES11 - globalThis: Przedstawia dodanie globalThis w ES11, co umożliwia łatwiejszy dostęp do globalnego obiektu niezależnie od środowiska wykonawczego.
36. ES11 - optional chaining: Omawia operator optional chaining wprowadzony w ES11, który ułatwia dostęp do zagnieżdżonych właściwości obiektów, eliminując potrzebę sprawdzania null lub undefined.
37. ES11 - nullish coalescing: Wyjaśnia operator nullish coalescing w ES11, który umożliwia wybór wartości domyślnej tylko w przypadku, gdy wartość jest null lub undefined.
38. Publikacja w NPM — przygotowanie: Przedstawia proces przygotowania paczki do publikacji w rejestrze NPM, w tym konfigurację pliku package.json.
39. Publikacja w NPM: Wyjaśnia kroki niezbędne do opublikowania pakietu w rejestrze NPM, aby inni programiści mogli go instalować i używać.
40. Wersjonowanie w NPM: Omawia zasady wersjonowania w NPM, w tym semantyczną wersję i zarządzanie zależnościami między paczkami.
41. Łatwiejsza publikacja z NP: Pokazuje narzędzie NP, które ułatwia proces publikacji w NPM, zapewniając automatyczną aktualizację wersji i wykonywanie innych rutynowych zadań.
42. Instalacja nowych wersji paczek: Wyjaśnia, jak instalować nowe wersje paczek zależności i zarządzać ich aktualizacjami w projekcie.

👀 Zobacz przykładową lekcję z tego modułu kursu:

👨‍💻 Zobacz przykładowy kod z tej lekcji:

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!