Webpack

Node.js

Щоб був термінал Bash треба щоб був встановлений Git

Транспіляція кода з нового в старий. babeljs Parcel робить це сам

type="module" - це для браузера. Parcel i webpack - робить це сам

Node.js - легке та ефективне середовище виконання JavaScript. Дозволяє писати високопродуктивні серверні застосунки та інструменти. Node.js побудована на JavaScript-рушію V8 і написана на C++.

Спочатку Node.js створювалася як серверне оточення для застосунків, але розробники почали використовувати її для створення інструментів, які допомагають автоматизувати виконання локальних завдань. В результаті нова екосистема інструментів, яка виникла навколо Node.js, призвела до трансформації процесу фронтенд-розробки.

Щоб встановити останню стабільну версію, перейдіть на офіційну сторінку, завантажте LTS-інсталятор і дотримуйтесь вказівок.

Користувачам Windows необхідно вибрати чекбокси для встановлення всіх додаткових інструментів, крім Chocolatey. Це встановить Python і різноманітні допоміжні утиліти і компілятори.

    node --version

Node.js дозволяє виконувати JavaScript-код поза браузером. Відкрийте будь-який термінал і виконайте команду node, запуститься REPL (read-eval-print loop) - інтерактивне середовище виконання JS-коду. Виведемо щось в консоль. Для того, щоб вийти з REPL, натисніть комбінацію Ctrl + C на Windows і Control + C на MacOS.

епер створимо папку node-tut, а в ній - файл index.js з кодом, який ми писали в REPL. Для запуску потрібно відкрити термінал і перейти в папку node-tut, в якій лежить index.js.

Тепер в консолі запускаємо файл за допомогою команди node index.js і отримуємо такий самий результат - виведення рядка безпосередньо в терміналі.

В цьому і полягає суть Node.js - можливість виконувати JavaScript поза браузером. Таким чином можна писати цілі застосунки, наприклад, бекенд або утиліти, що не залежать від браузера.

Пакетний менеджер npm

Щоб використовувати все різноманіття інструментів (або пакетів) Node.js, нам необхідна можливість встановлювати і керувати ними. Для цього створений NPM (node package manager) - пакетний менеджер Node.js. Він встановлює потрібні пакети і забезпечує зручний інтерфейс для роботи з ними.

NPM складається з трьох основних компонентів:

Сайт npmjs.com - використовується для пошуку та ознайомлення з документацією пакетів.
Інтерфейс командного рядка (CLI) - запускається з терміналу і надає набір команд для роботи з реєстром і пакетами. Дозволяє створювати скрипти для запуску в терміналі.
Реєстр пакетів (registry) - велика загальнодоступна база даних інструментів розробки (пакетів).

Пакет (package) - невелика JavaScript бібліотека, що вирішує специфічне завдання. Пакети пишуть самі розробники і діляться зі спільнотою. Такий підхід спрощує життя, тому що не потрібно винаходити колесо, всі колеса вже давно лежать на полицях реєстру і готові до використання.

Команди NPM

node -v
npm -v
npm init -y - ініціалізує npm в проекті і створює файл package.json
npm install - встановлює всі залежності, перелічені в package.json
npm list --depth=0 - виведе в терміналі список локально встановлених пакетів з номерами їх версій, без залежностей
npm install [package-name] - встановить пакет локально у папку node_modules
npm uninstall [package-name] - видалить пакет, встановлений локально і оновить package.json
npm start і npm test - запустить скрипт start або test, розташований в package.json
npm prestart
npm poststart
npm run [custom-script] - запустить кастомний скрипт, розташований в package.json
npm outdated - використовується для пошуку оновлень, виявить сумісні версії програмно і виведе список доступних оновлень
npm update - оновить всі пакети до максимально дозволеної версії

Команди з файлами та папками

pwd - шлях
ls - список
ls - список
ls -l - list
ls -la - list скриті файли
cd ../ - на рівень вище
cd ../../ - на 2 рівень вище
cd namefolder
cd G:
G:
touch file.xxx - создать файл
mv file.xxx file2.xxx - переменовать файл
rm nod3.js - удалить файл
mkdir folder - создать папку
rm -rf folder - удалить полную папку
rm -dir folder - удалить пустую папку
ctrl + l - очистить терминал
clear
man ls - документація

Документація NPM

Ініціалізація проекту

Кожен проект починається зі створення файлу package.json - він відстежує залежності, містить службову інформацію, дозволяє писати npm-скрипти і слугує інструкцією під час створення нового проекту на основі вже готових налаштувань.

npm init -y

Буде створено package.json зі значеннями за замовчуванням. Щоб встановити ці значення, виконайте в терміналі послідовно наступні команди, підставивши своє ім'я та пошту.

    npm config set init.author.name "YOUR_NAME"
    npm config set init.author.email "YOUR_EMAIL"

Файл package.json можна редагувати вручну або виконати npm init ще раз.

npm-скрипти

"start": "node index.js"

Тепер ми можемо запустити його в терміналі командою npm start

Якщо створити скрипт з будь-яким іншим ім'ям, крім start або test, він буде запускатися як npm run ім'я-скрипта - не забудьте run.

Встановлення пакетів

Одна з можливостей, які надає npm - встановлення пакетів, які витягуються з реєстру і розпаковуються в папку node_modules в корені проекту. Після створення файлу package.json, можна додати залежності в проект.

npm install validator

Не додавайте папку node_modules в систему контролю версій, у всіх розробників вона буде своя. Якщо ви використовуєте Git, не забувайте додати папку node_modules у файл .gitignore.

Зверніть увагу на створений файл package-lock.json - це журнал знімків дерева залежностей проекту. Він гарантує, що команда розробників використовує однакові версії залежностей. NPM автоматично оновлює його під час додавання, видалення та оновлення пакетів.

В package.json з'явилася нова залежність в полі dependencies. Це означає, що validator версії 11.1.0 був встановлений як залежність і готовий до роботи. Пакети постійно оновлюються, ваша версія може відрізнятися.

const validator = require("validator");
        const validateEmail = email => {
            return validator.isEmail(email);
          };
        validateEmail("mango@mail.com"); // true

Видалення пакетів

npm uninstall validator

Встановлення певної версії пакета

npm install validator@1.0.0

Типи залежностей

-save - dependencies

-save-dev - devDependencies

-global

Управління версіями пакетів

Пакети мають пов'язаний з ними номер версії. Номери версій відповідають стандарту SemVer.

npm outdated - використовується для пошуку оновлень, виявить сумісні версії програмно.
npm update - оновить всі пакети до максимально дозволеної версії.
npm update [ім'я-пакета] - оновить зазначений пакет.

Якщо ви не довіряєте машинам або вам потрібна певна версія пакету, можна відкрити package.json і вручну поміняти версії пакетів, після чого виконати npm install.

Управління кешем

npm cache clean

Після встановлення пакета npm зберігає його копію в кеші, тому під час наступного встановлення, вам не потрібно знову завантажувати його з інтернету. Кеш зберігається в папці .npm вашого домашнього каталогу.

Ця папка з часом засмічується старими пакетами і її корисно іноді очищати, не дуже часто (декілька разів на рік). Кешування корисне, тому що скорочує час встановлення вже використаних пакетів.

Import Export. Модульність коду

Короче: усі види імпорту працюють у Parcel (8-й урок). Перевірив Не забути вказати type="module"

"require" - в браузері не працює! Тільки в ноді!!!!!!!!!!!!!

Модульний код допомагає в організації, обслуговуванні, тестуванні і, найголовніше, управлінні залежностями. Найважливіші переваги модулів - це підтримка, простір імен і повторне використання.

Підтримка - добре розроблений модуль, покликаний максимально зменшити залежність від інших частин коду. Це дозволить розширювати функціонал застосунку, не побоюючись порушити його роботу в цілому. Оновлення одного модуля набагато простіше, якщо модуль - самодостатній.

Модулі дозволяють уникнути забруднення простору імен, створюючи окрему область видимості для змінних.

Збирання модулів

Збирання модулів - це процес конкатенації групи модулів і їх залежностей в один або групу файлів.

Наявність окремих тегів script для кожного файлу означає, що браузер буде завантажувати кожен файл окремо, що негативно позначається на швидкості завантаження сторінки. Щоб обійти цю проблему, файли об'єднуються в один або пару файлів з метою зменшення кількості запитів. Але залишається проблема управління залежностями між модулями.

Якщо використовуються системи модулів, такі як CommonJS або ESM, необхідно використовувати інструмент для їх перетворення у правильно впорядкований і доступний для браузера код. Саме тут починають діяти Webpack та інші бандлери (від англійського bundle).

Import Export

ECMAScript Modules (ESM)

    Це працює у Parcel!!!
    greeter.js
    const helloMessage = "hello!";
    const goodbyeMessage = "goodbye!";

    export const hello = () => helloMessage;
    export const goodbye = () => goodbyeMessage;

    index.js
    import { hello, goodbye } from "./greeter";

    console.log(hello());// "hello!"
    console.log(goodbye());// "goodbye!"

Кожен JS-файл зберігає код в унікальному контексті модуля та імпортує необхідні йому залежності, і експортує все, що інші модулі повинні імпортувати. Операції експорту/імпорту реалізовані конструкціями import і export. Є дві очевидні переваги цього підходу - запобігання забрудненню глобального простору імен і явне зазначення залежностей.

Нова система модулів відрізняється від CommonJS та інших, перш за все тим, що це стандарт. А значить, з часом, буде повністю підтримуватися браузерами нативно, без додаткових інструментів. Однак, зараз браузерна підтримка - неповна, тому ESM використовуються разом з інструментами збірки модулів, такими як Webpack , Parcel та іншими.

Named export

Перший спосіб - це використовувати ключове слово export перед усіма сутностями, які необхідно експортувати. Вони будуть додані як властивості в експортований об'єкт. Під час імпорту ми деструктуризуємо властивості з імпортованого об'єкта.

        Це працює у Parcel!!!
        my-module.js
        const sqrt = Math.sqrt;
        export const square = x => x * x;
        export const diag = (x, y) => sqrt(square(x) + square(y));
    
        main.js
        import { square, diag } from "./path/to/my-module";

        console.log(square(11));// 121
        console.log(diag(4, 3));// 5

Другий спосіб - це явно вказати об'єкт з властивостями для експорту.

        Це працює у Parcel!!!
        my-module.js
        const sqrt = Math.sqrt;
        const square = x => x * x;
        const diag = (x, y) => sqrt(square(x) + square(y));

        export { square, diag };
    
        main.js
        import { square, diag } from "./path/to/myModule";

        console.log(square(11));// 121
        console.log(diag(4, 3));// 5

Наступний синтаксис імпортує всі експорти модуля як об'єкт із зазначеним ім'ям. Це називається namespace import.

        Це працює у Parcel!!!
        main.js
        import * as myModule from "./path/to/my-module";

        console.log(myModule.square(11));// 121
        console.log(myModule.diag(4, 3));// 5

Default export

        my-func.js
        export default function myFunc() {
            // ...
        }

        my-class.js
        export default class MyClass {
            // ...
        }

        main.js
        import myFunc from "./path/to/my-func";
        import MyClass from "./path/to/my-class";

Використовуйте іменований експорт, якщо необхідно експортувати декілька сутностей, а експорт за замовчуванням - для експорту однієї сутності.

Webpack

Webpack став одним із найважливіших інструментів веб-розробника. В першу чергу - це менеджер модульних залежностей застосунку і збирач JS-файлів, але він може трансформувати усі ресурси (HTML і CSS, SASS тощо), оптимізувати зображення, компілювати шаблони, запускати локальний веб-сервер для розробки і багато іншого.

Webpack перетворює залежності в модулі і зшиє в один або декілька файлів. Кожен модуль буде мати закритий простір імен і підключатися у потрібний час і правильному порядку.

Webpack - незамінний, якщо ви використовуєте сучасні бібліотеки і фреймворки для розробки, такі як React, Vue, Angular тощо.

За посиланнями нижче ви знайдете вичерпні інструкції з покроковими поясненнями налаштування Webpack.

Формат JSON

Метод JSON.stringify()

Приймає значення і перетворює його у JSON. Значенням може бути число, буль, null, масив або об'єкт. Рядки - це вже валідний JSON, тому в їх перетворенні немає сенсу.

    const dog = {
        name: "Mango",
        age: 3,
        isHappy: true,
      };
    
    const dogJSON = JSON.stringify(dog);

якщо в об'єкта є методи, то при перетворенні вони будуть проігноровані.

Також, при спробі перетворити функцію в JSON, результатом буде undefined.

Метод JSON.parse()

Щоб отримати з JSON валідне JavaScript значення, його необхідно розпарсити (parse). Це операція зворотна перетворенню в рядок (stringify).

    const json = '{"name":"Mango","age":3,"isHappy":true}';

    const dog = JSON.parse(json);
    console.log(dog);// {name: "Mango", age: 3, isHappy: true}

Обробка помилок

Якщо методам класу JSON передати невалідний JSON, то вони «викинуть» помилку і весь скрипт впаде. Для уникнення цього, використовується конструкція try...catch

Змінна error - це об'єкт помилки з інформацією про те, що сталося. У цього об'єкта є кілька корисних властивостей:

name - тип помилки. Для помилки парса - це SyntaxError
message - повідомлення про деталі помилки.
stack - стек викликів функцій на момент помилки.

рядок з символами - це невалідний JSON, оскільки не може бути перетворений у валідне JavaScript значення.

const data = JSON.parse("Well, this is awkward");// ❌

Використовуючи конструкцію try...catch, ми можемо обробити цей виняток таким чином, щоб скрипт продовжив працювати, навіть у разі помилки.

    try {
        const data = JSON.parse("Well, this is awkward");
      } catch (error) {
        console.log(error.name);// "SyntaxError"
        console.log(error.message);// Unexpected token W in JSON at position 0 
      }

Веб-сховище localStorage()

Веб-сховище складається з локального сховища (localStorage) і сховища сеансів (sessionStorage). Забезпечує спосіб зберігання даних інтуїтивно зрозумілим чином у вигляді пар ключ:значення.

Технічно у веб-сховище можна записати тільки рядки, але це не проблема, якщо використовувати методи класу JSON для перетворення складних типів. У веб-сховище не записують методи об'єктів або функції, тільки дані.

localStorage.setItem("key", "value"); - створює новий, або оновлює вже існуючий запис
localStorage.getItem("key") - повертає зі сховища значення з ключем key
localStorage.removeItem(key) - видаляє зі сховища запис з ключем key
localStorage.clear() - повністю очищає всі записи сховища.
localStorage.length - кількість записів у сховищі.

Збереження

Якщо необхідно зберегти щось, крім рядка, наприклад, масив або об'єкт, необхідно перетворити їх у рядок методом JSON.stringify().

    const settings = {
        theme: "dark",
        isAuthenticated: true,
        options: [1, 2, 3],
      };
                      
      localStorage.setItem("settings", JSON.stringify(settings));

Читання

Метод getItem(key) дозволяє прочитати зі сховища запис з ключем key. Якщо у сховищі відсутній запис з таким ключем, метод повертає null. Якщо значення - це звичайний рядок, немає потреби його парсити.

    localStorage.setItem("ui-theme", "dark");

    const theme = localStorage.getItem("ui-theme"); 
    console.log(theme);// "dark"

В іншому випадку, необхідно розпарсити значення методом JSON.parse(), щоб отримати валідні дані.

    const settings = {
        theme: "dark",
        isAuthenticated: true,
        options: [1, 2, 3],
      };
                      
      localStorage.setItem("settings", JSON.stringify(settings)); 
                      
      const savedSettings = localStorage.getItem("settings");
      const parsedSettings = JSON.parse(savedSettings);
      console.log(parsedSettings);// settings object

Не забувайте використовувати конструкцію try...catch з методом JSON.parse(), щоб уникнути «падіння» скрипту, якщо раптом прочитали невалідний JSON.

Видалення

    localStorage.setItem("ui-theme", "dark"); 
    localStorage.removeItem("ui-theme");

Очищення сховища

localStorage.clear();

Приклад для форми

    const form = document.querySelector(".feedback-form");
    const localStorageKey = "goit-example-message";

    form.elements.message.value = localStorage.getItem(localStorageKey) ?? "";

    form.addEventListener("input", (evt) => {
      localStorage.setItem(localStorageKey, evt.target.value);
    });

    form.addEventListener("submit", (evt) => {
      evt.preventDefault();
      localStorage.removeItem(localStorageKey);
      form.reset();
    });

Подивитися вміст веб-сховища можна в інструментах розробника на вкладці Application. Там само ви можете вручну видаляти і додавати записи. Н

Приклад додатку

Для того, щоб скоротити кількість повторюваного коду при роботі з веб-сховищем, можна написати сервіс зі стандартними методами, наприклад, save і load.

    const save = (key, value) => {
        try {
          const serializedState = JSON.stringify(value);
          localStorage.setItem(key, serializedState);
        } catch (error) {
          console.error("Set state error: ", error.message);
        }
      };
                      
      const load = key => {
        try {
          const serializedState = localStorage.getItem(key);
          return serializedState === null ? undefined : JSON.parse(serializedState);
        } catch (error) {
          console.error("Get state error: ", error.message);
        }
      };
                      
      export default {
        save,
        load,
      };

Примітки з відео Рисіча - 1/2

Налаштування Parcel

Ми юзаємо Parcel. Він менший ніж Webpack.
Починаємо з читати readme файл parcel-project-template
Не намагайся оновити ноду. Видали її через вінду. Встановити новую Перезавантажити коип
Склонувати проект parcel-project-template
Якщо не користуємося GitHub Desctop то встановити GitBash
npm i
npm audit fix - сам пофіксить варнінги
npm start - збирається проект і дає посилання Server running at http://localhost:1234
Щоб скинути слідкування: Ctrl+C
Налаштувати Git: General/Actions/General: Read and Write permition
Package.json змінити "homepage": "https://Yupiter101.github.io/Parcel-hw8-2024", та "build": "parcel build src/*.html --public-url /Parcel-hw8-2024/"
src замінити на той що для домашки
git add . git commit -m "" git push
Ідем на гіт дивимся на зелений кружок або червоний хрестик
Якщо друге то відкриваємо деталі
Error можливо не проставили галочки
На Гіті головна гілка повинна називатися main
Для запуску Гіт сторінки: Setting/ Pages / branch: gh-pages. Save

Привязка Гіт репозиторія Інструкція

git remote -v на який репо ми посилаємось зараз
git remote set-url origin https://github.com/OWNER/REPOSITORY.git
Налаштувати деплой: змінити в Package.json "homepage" та "build"
Не використовуємо "Go Live Server"
Користуємося лише at http://localhost:1234
Налаштувати Git: General/Actions/General: Read and Write permition
Робимо push
Але тепер GitHub Desctop не працює
Тому в GitHub Desctop add add existing repositoriy

Примітки з відео Рисіча - 2/2

Import Export

Дефолтний імпорт використовують тільки для експорту класів

Дефолтний імпорт я затестив

Іменований імпорт не працює

Webpack

Зміст

Node.js

Пакетний менеджер npm

Команди NPM

Команди з файлами та папками

npm-скрипти

Встановлення пакетів

Видалення пакетів

Встановлення певної версії пакета

Типи залежностей

Управління версіями пакетів

Управління кешем

Import Export. Модульність коду

Збирання модулів

Import Export

ECMAScript Modules (ESM)

Named export

Default export

Webpack

Формат JSON

Метод JSON.stringify()

Метод JSON.parse()

Обробка помилок

Веб-сховище localStorage()

Збереження

Читання

Видалення

Очищення сховища

Приклад додатку

Примітки з відео Рисіча - 1/2

Налаштування Parcel

Привязка Гіт репозиторія Інструкція

Примітки з відео Рисіча - 2/2

Import Export