Skip to content

Commit 485f98b

Browse files
undead404alinkedd
andauthored
update(JS): web/javascript/reference/statements/import (#3393)
* update(JS): web/javascript/reference/statements/import * Update files/uk/web/javascript/reference/statements/import/index.md * Update files/uk/web/javascript/reference/statements/import/index.md * Apply suggestions from code review Co-authored-by: Alina Listunova <alinkedd@users.noreply.github.com> * Apply suggestions from code review Хай буде так, ніж сперечатись про 0 і -0 Co-authored-by: Alina Listunova <alinkedd@users.noreply.github.com> --------- Co-authored-by: Alina Listunova <alinkedd@users.noreply.github.com>
1 parent af9a58f commit 485f98b

File tree

2 files changed

+45
-1
lines changed

2 files changed

+45
-1
lines changed

files/uk/web/javascript/reference/statements/import/index.md

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import "module-name";
3232
- `defaultExport`
3333
- : Назва, що вказує на усталений експорт із модуля. Повинна бути дійсним ідентифікатором JavaScript.
3434
- `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).
3636
- `name`
3737
- : Назва об'єкта модуля, яку під час звертання до імпортів буде вжито як свого роду простір імен. Повинна бути дійсним ідентифікатором JavaScript.
3838
- `exportN`
@@ -164,6 +164,48 @@ myModule.doAllTheAmazingThings(); // myModule.doAllTheAmazingThings імпорт
164164
import * as myModule from "/modules/my-module.js";
165165
```
166166

167+
### Розв'язання специфікаторів модулів
168+
169+
Специфікація 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+
const utils = require("./utils"); // Пропущено назву файлу "index.js"
181+
const utils = require("./utils/index"); // Пропущено лише розширення ".js"
182+
const utils = 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).)
192+
193+
```js
194+
// URL HTTP
195+
import x from "https://example.com/x.js";
196+
// URL даних
197+
import x from "data:text/javascript,export default 42;";
198+
// URL даних для модулів JSON
199+
import x from '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.
208+
167209
## Приклади
168210

169211
### Стандартний імпорт

uk_spelling_additions.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,9 @@
236236
неанімованими
237237
неанімованих
238238
неблокувальному
239+
небраузерними
239240
небраузерних
241+
небраузерні
240242
небулеве
241243
небулевими
242244
небулевих

0 commit comments

Comments
 (0)