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:
- Wstęp: Lekcja wprowadza do tematu modułów, NPM i ES6+, prezentując ich znaczenie i wpływ na rozwój języka JavaScript.
- Podstawy działania modułów: Omawia podstawowe koncepcje modułów w JavaScript, takie jak eksportowanie i importowanie funkcji i zmiennych.
- 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.
- 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!
- 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.
- Projekt 0 - counter z użyciem modułów: Praktyczne zastosowanie modułów w prostym projekcie licznika, aby zaprezentować ich działanie w praktyce.
- Projekt 1 - counter z interfejsem z użyciem modułów: Kontynuacja poprzedniego projektu, dodając interfejs użytkownika przy użyciu modułów.
- Instalacja NodeJS: Instrukcje dotyczące instalacji środowiska Node.js na Windows, MacOS i Linux.
- NPM inicjalizacja i instalacja zależności: Omawia inicjalizację projektu przy użyciu NPM oraz proces instalacji i zarządzania zależnościami.
- Użycie modułów zainstalowanych przez NPM: Pokazuje, jak korzystać z zewnętrznych modułów zainstalowanych przez NPM w naszym projekcie.
- Webpack: Wprowadzenie do narzędzia Webpack, które umożliwia pakowanie i budowanie aplikacji JavaScript.
- Webpack - HtmlWebpackPlugin: Wyjaśnia, jak skonfigurować HtmlWebpackPlugin w Webpacku, aby generować dynamicznie pliki HTML.
- Webpack - DevServer: Przedstawia DevServer w Webpacku, który zapewnia szybkie środowisko deweloperskie z automatycznym odświeżaniem strony.
- Webpack - importowanie CSS: Demonstruje, jak importować i zarządzać stylami CSS w projekcie za pomocą Webpacka.
- 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.
- 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.
- Babel - wprowadzenie: Przedstawia narzędzie Babel, które umożliwia transpilację kodu ES6+ na wcześniejsze wersje JavaScript.
- Babel - transpilacja za pomocą CLI: Wyjaśnia, jak używać Babela z interfejsem wiersza poleceń (CLI) do transpilacji kodu JavaScript.
- Webpack - babel-loader: Pokazuje, jak skonfigurować babel-loader w Webpacku, aby automatycznie transpilować kod przy budowaniu.
- Webpack - struktura folderów: Przedstawia sugerowaną strukturę folderów dla projektu opartego na Webpacku, zapewniającą czytelność i skalowalność.
- Webpack - source maps: Wyjaśnia, jak skonfigurować source maps w Webpacku, aby ułatwić debugowanie kodu w przeglądarce.
- ES6 - lista zmian: Przegląd zmian wprowadzonych w ES6, takich jak nowe składnie, metody i funkcje, które znacząco ulepszają JavaScript.
- ES6 - extended object literals: Omawia rozszerzone literały obiektowe w ES6, które umożliwiają bardziej wyrafinowane tworzenie i inicjalizację obiektów.
- 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.
- ES6 - destrukturyzacja tablic: Pokazuje destrukturyzację tablic w ES6, umożliwiając wygodne wyodrębnianie wartości z tablicy do oddzielnych zmiennych.
- ES6 - destrukturyzacja tablic w parametrach: Wyjaśnia, jak destrukturyzować tablice w parametrach funkcji, co ułatwia przekazywanie danych do funkcji.
- 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.
- 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.
- 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.
- 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.
- ES7 - lista zmian: Przegląd zmian wprowadzonych w ES7, takich jak metoda includes dla tablic.
- ES8 - lista zmian: Omawia zmiany wprowadzone w ES8.
- ES9 - lista zmian: Przedstawia zmiany wprowadzone w ES9.
- ES10 - lista zmian: Wyjaśnia nowości w ES10.
- ES11 - globalThis: Przedstawia dodanie globalThis w ES11, co umożliwia łatwiejszy dostęp do globalnego obiektu niezależnie od środowiska wykonawczego.
- 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.
- 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.
- Publikacja w NPM — przygotowanie: Przedstawia proces przygotowania paczki do publikacji w rejestrze NPM, w tym konfigurację pliku package.json.
- Publikacja w NPM: Wyjaśnia kroki niezbędne do opublikowania pakietu w rejestrze NPM, aby inni programiści mogli go instalować i używać.
- Wersjonowanie w NPM: Omawia zasady wersjonowania w NPM, w tym semantyczną wersję i zarządzanie zależnościami między paczkami.
- Ł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ń.
- 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