diff --git a/files/uk/web/javascript/guide/modules/index.md b/files/uk/web/javascript/guide/modules/index.md index 2735e54c33..df2d63c0fa 100644 --- a/files/uk/web/javascript/guide/modules/index.md +++ b/files/uk/web/javascript/guide/modules/index.md @@ -2,9 +2,6 @@ title: Модулі JavaScript slug: Web/JavaScript/Guide/Modules page-type: guide -browser-compat: - - javascript.statements.import - - javascript.statements.export --- {{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}} @@ -15,15 +12,9 @@ browser-compat: Програми на JavaScript спершу були доволі дрібними: більшість застосування JavaScript полягала в ізольованих сценарних операціях, доданні дрібки інтерактивності до вебсторінок, де це необхідно, тож великі сценарії загалом не були потрібні. Перемотка на кілька років – і ось цілі застосунки працюють в браузерах, з купою JavaScript, а крім того, JavaScript використовується в інших контекстах ([Node.js](/uk/docs/Glossary/Node.js), наприклад). -Таким чином, протягом останніх років з'явився зміст подумати про надання механізмів розбиття програм на JavaScript на окремі модулі, котрі можуть бути імпортовані при потребі. Node.js вже тривалий час має таку можливість, крім того, є низка бібліотек і фреймворків JavaScript, що дають змогу користуватись модулями (наприклад, модульні системи на основі [CommonJS](https://uk.wikipedia.org/wiki/CommonJS) і [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), як то [RequireJS](https://requirejs.org/), а геть нещодавно – [Webpack](https://webpack.js.org/) і [Babel](https://babeljs.io/)). +Складні проєкти потребують механізму розбиття програм на JavaScript на окремі модулі, котрі можуть бути імпортовані при потребі. Node.js вже тривалий час має таку можливість, крім того, є низка бібліотек і фреймворків JavaScript, що дають змогу користуватись модулями (наприклад, модульні системи на основі [CommonJS](https://uk.wikipedia.org/wiki/CommonJS) і [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), як-то [RequireJS](https://requirejs.org/), [Webpack](https://webpack.js.org/) і [Babel](https://babeljs.io/)). -Добрі новини полягають в тому, що сучасні браузери почали підтримувати функціональність модулів нативно, і це те, про що розповідає вся ця стаття. Це може бути лише доброю штукою: браузери можуть оптимізувати завантаження модулів, роблячи його більш ефективним, ніж потреба використати бібліотеку й виконувати всю надлишкову обробку на клієнтському боці й зайві ходки в мережу. - -Використання нативних модулів JavaScript залежить від інструкцій {{jsxref("Statements/import", "import")}} і {{jsxref("Statements/export", "export")}}; їх підтримка в браузері показана в таблиці сумісності нижче. - -## Сумісність із браузерами - -{{Compat}} +Усі сучасні браузери нативно підтримують модульні можливості без потреби трансляції коду. Це однозначно добре: браузери можуть оптимізувати завантаження модулів, роблячи його більш ефективним, ніж потреба використати бібліотеку та виконувати всю надлишкову обробку на клієнтському боці й зайві ходки в мережу. Проте від цього не застарівають збирачі штибу Webpack: вони все одно гарно справляються з поділом коду на порції розумного розміру, а також здібні до інших оптимізацій, як-то мініфікації, вилучення мертвого коду та перетрушування дерева. ## Введення прикладу @@ -410,10 +401,10 @@ document.adoptedStyleSheets = [styles]; > Модулі та їхні залежності можуть бути завантажені наперед шляхом задання їх в елементах [``](/uk/docs/Web/HTML/Element/link) з атрибутом [`rel="modulepreloaded"`](/uk/docs/Web/HTML/Attributes/rel/modulepreload). > Це може суттєво знизити час завантаження, коли ці модулі використовуються. -## Інші відмінності між модулями й звичайними сценаріями +## Інші відмінності між модулями та класичними сценаріями - Слід звернути увагу на локальне тестування: якщо спробувати завантажити файл HTML локально (тобто з URL `file://`), то трапляться помилки CORS, у зв'язку з вимогами безпеки модулів JavaScript. Тестування треба проводити за допомогою сервера. -- Крім того, зверніть увагу, що поведінка частин сценарію, визначених всередині модулів, коли порівняти зі звичайними сценаріями, може відрізнятися. Це пов'язано з тим, що модулі автоматично застосовують {{jsxref("Strict_mode", "суворий режим", "", 1)}}. +- Крім того, зверніть увагу, що може відрізнятися поведінка частин сценарію, визначених всередині модулів, коли порівняти з класичними сценаріями. Це пов'язано з тим, що модулі автоматично застосовують {{jsxref("Strict_mode", "суворий режим", "", 1)}}. - Немає потреби застосовувати атрибут `defer` (дивіться [`