You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: files/uk/web/javascript/reference/statements/import/index.md
+43-1Lines changed: 43 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ import "module-name";
32
32
-`defaultExport`
33
33
- : Назва, що вказує на усталений експорт із модуля. Повинна бути дійсним ідентифікатором JavaScript.
34
34
-`module-name`
35
-
- : Модуль, з якого відбувається імпорт. Обчислення вказівника залежить від середовища. Часто це відносний чи абсолютний URL до файлу `.js`, що містить модуль. В середовищі Node імпорти без розширення часто вказують на пакунки у `node_modules`. Деякі пакувальні програми можуть допускати імпортування файлів без розширення — краще перевіряти налаштування середовища. Дозволяються лише рядки, виділені одинарними чи подвійними лапками.
35
+
- : Модуль, з якого відбувається імпорт. Дозволяються лише літерали в одинарних та подвійних лапках. Обчислення специфікатора залежить від середовища. Більшість середовищ узгоджені з браузерами та розв'язують специфікатори як URL, відносні щодо URL поточного модуля (дивіться [`import.meta.url`](/uk/docs/Web/JavaScript/Reference/Operators/import.meta)). Node, збирачі та інші небраузерні середовища нерідко визначають власні додаткові можливості, тож слід шукати їхню власну документацію, аби дізнатися конкретні правила. Також більше інформації можна знайти в розділі [розв'язання специфікаторів модулів](#rozviazannia-spetsyfikatoriv-moduliv).
36
36
-`name`
37
37
- : Назва об'єкта модуля, яку під час звертання до імпортів буде вжито як свого роду простір імен. Повинна бути дійсним ідентифікатором JavaScript.
Специфікація ECMAScript не визначає того, як специфікатори модулів повинні розв'язуватись, і покладає це на середовище виконання (наприклад, браузери, Node.js, Deno). Логіка браузерів задана [специфікацією HTML](https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier), і вона стала _де-факто_ базою для реалізацій у всіх інших середовищах.
170
+
Поширене визнання специфікаторів трьох типів, реалізованих специфікацією HTML, Node та багатьма іншими:
171
+
172
+
-_Відносні специфікатори_, що починаються з `/`, `./` або `../`, розв'язуються відносно URL поточного модуля.
173
+
-_Абсолютні специфікатори_, що є валідними URL, розв'язуються як є.
174
+
-_Голі (bare) специфікатори_, що не належать до двох попередніх типів.
175
+
176
+
Найпомітніший підступ із відносними специфікаторами, особливо для тих, хто знайомий з поняттями [CommonJS](https://wiki.commonjs.org/wiki/CommonJS), полягає в тому, що браузери забороняють, аби один специфікатор неявно розв'язувався до кількох потенційних кандидатів. У CommonJS, якщо є `main.js` and `utils/index.js`, то всі три записи нижче імпортують "усталений експорт" з `utils/index.js`:
177
+
178
+
```js
179
+
// main.js
180
+
constutils=require("./utils"); // Пропущено назву файлу "index.js"
181
+
constutils=require("./utils/index"); // Пропущено лише розширення ".js"
182
+
constutils=require("./utils/index.js"); // Найбільш явна форма
183
+
```
184
+
185
+
У вебі це затратно, тому що якщо написати `import x from "./utils"`, то браузер повинен надіслати запити щодо `utils`, `utils/index.js`, `utils.js` і, можливо, багатьох інших URL, поки не знайде модуль, який можна імпортувати. Таким чином, у специфікації HTML специфікатор усталено може бути лише URL, що розв'язується відносно URL поточного модуля. Не можна пропустити розширення файлу чи ім'я файлу `index.js`. Така логіка була успадкована реалізацією ESM у Node, але не є частиною специфікації ECMAScript.
186
+
Зверніть увагу, що це не означає, що `import x from "./utils"` у вебі ніколи не працює. Браузер все одно надсилає запит за URL, і якщо сервер може відповісти коректним вмістом, то такий імпорт спрацює. Це вимагає того, щоб сервер мав реалізацію певної власної логіки розв'язання, тому що зазвичай запити без розширень вважаються запитами на файли HTML.
187
+
Абсолютні специфікатори можуть бути [URL](/uk/docs/Web/URI) будь-якого роду, що розв'язуються до вихідного коду, який можна імпортувати. Перш за все:
188
+
189
+
-[URL HTTP](/uk/docs/Web/HTTP) завжди підтримуються у вебі, оскільки більшість сценаріїв одразу мають URL HTTP. Вони нативно підтримуються Deno (який із самого початку заснував усю свою систему модулів на URL HTTP), але мають лише експериментальну підтримку в Node – завдяки [кастомним завантажувачам HTTPS](https://nodejs.org/api/module.html#import-from-https).
190
+
- URL `file:` підтримуються багатьма небраузерними середовищами виконання, наприклад, Node, оскільки сценарії зразу мають URL `file:`, але не підтримуються браузерами через безпекові міркування.
191
+
-[URL даних](/uk/docs/Web/URI/Schemes/data) підтримуються багатьма середовищами виконання, серед яких браузери, Node, Deno тощо. Вони корисні для вбудовування маленьких модулів безпосередньо у вихідний код. Підтримуються [типи MIME](/uk/docs/Web/HTTP/MIME_types), що позначають вихідний код, який можна імпортувати, як-то `text/javascript` для JavaScript, `application/json` для модулів JSON, `application/wasm` для модулів WebAssembly тощо. (Вони можуть все ж потребувати [атрибутів імпортування](/uk/docs/Web/JavaScript/Reference/Statements/import/with).)
importxfrom'data:application/json,{"foo":42}' with { type: "json" };
200
+
```
201
+
202
+
URL даних `text/javascript` інтерпретуються як модулі, але не можуть скористатися відносними імпортами, оскільки схема URL `data:` не є ієрархічною. Тобто `import x from "data:text/javascript,import y from './y.js';"` викине помилку, адже відносний специфікатор `'./y.js'` не може бути розв'язаний.
203
+
204
+
-[URL `node:`](https://nodejs.org/api/esm.html#node-imports) розв'язуються до вбудованих модулів Node.js. Вони підтримуються Node та іншими середовищами виконання, що заявляють про сумісність із Node, як-от Bun.
205
+
206
+
Голі специфікатори, популяризовані CommonJS, розв'язуються в директорії `node_modules`. Наприклад, якщо є `import x from "foo"`, то середовище виконання шукає пакет `foo` всередині будь-якої з директорій `node_modules` у батьківських щодо поточного модуля директоріях. Така логіка може відтворюватися в браузерах за допомогою [карт імпортування](/uk/docs/Web/JavaScript/Guide/Modules#import-moduliv-za-dopomohoiu-kart-importuvannia), які також дають змогу налаштувати розв'язання в інші способи.
207
+
Алгоритм розв'язання модуля також можна виконати програмно, скориставшись функцією [`import.meta.resolve`](/uk/docs/Web/JavaScript/Reference/Operators/import.meta/resolve), визначеною специфікацією HTML.
0 commit comments