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: 1-js/13-modules/01-modules-intro/article.md
+12-12
Original file line number
Diff line number
Diff line change
@@ -49,7 +49,7 @@ The `import` directive loads the module by path `./sayHi.js` relative the curren
49
49
50
50
Let's run the example in-browser.
51
51
52
-
As modules support special keywords and features, we must tell the browser that a script should be treated as module, by using the attribute `<script type="module">`.
52
+
As modules support special keywords and features, we must tell the browser that a script should be treated as a module, by using the attribute `<script type="module">`.
53
53
54
54
Like this:
55
55
@@ -165,7 +165,7 @@ So, let's reiterate -- the module is executed only once. Exports are generated,
165
165
166
166
Such behavior allows to *configure* modules on first import. We can setup its properties once, and then in further imports it's ready.
167
167
168
-
For instance, `admin.js` module may provide certain functionality, but expect the credentials to come into the `admin` object from outside:
168
+
For instance, the `admin.js` module may provide certain functionality, but expect the credentials to come into the `admin` object from outside:
169
169
170
170
```js
171
171
// 📁 admin.js
@@ -236,7 +236,7 @@ You may want skip this section for now if you're reading for the first time, or
236
236
Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts.
237
237
238
238
In other words:
239
-
- downloading of external module scripts `<script type="module" src="...">` doesn't block HTML processing, they load in parallel with other resources.
239
+
- downloading external module scripts `<script type="module" src="...">` doesn't block HTML processing, they load in parallel with other resources.
240
240
- module scripts wait until the HTML document is fully ready (even if they are tiny and load faster than HTML), and then run.
241
241
- relative order of scripts is maintained: scripts that go first in the document, execute first.
242
242
@@ -264,21 +264,21 @@ Compare to regular script below:
264
264
<button id="button">Button</button>
265
265
```
266
266
267
-
Please note: the second script actually works before the first! So we'll see `undefined` first, and then `object`.
267
+
Please note: the second script actually runs before the first! So we'll see `undefined` first, and then `object`.
268
268
269
-
That's because modules are deferred, so we wait for the document to be processed. The regular scripts runs immediately, so we saw its output first.
269
+
That's because modules are deferred, so we wait for the document to be processed. The regular script runs immediately, so we see its output first.
270
270
271
271
When using modules, we should be aware that HTML-page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that.
272
272
273
273
### Async works on inline scripts
274
274
275
275
For non-module scripts, `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document.
276
276
277
-
For module scripts, it works on any scripts.
277
+
For module scripts, it works on any script.
278
278
279
279
For example, the script below has `async`, so it doesn't wait for anyone.
280
280
281
-
It performs the import (fetches `./analytics.js`) and runs when ready, even if HTML document is not finished yet, or if other scripts are still pending.
281
+
It performs the import (fetches `./analytics.js`) and runs when ready, even if the HTML document is not finished yet, or if other scripts are still pending.
282
282
283
283
That's good for functionality that doesn't depend on anything, like counters, ads, document-level event listeners.
284
284
@@ -296,7 +296,7 @@ That's good for functionality that doesn't depend on anything, like counters, ad
296
296
297
297
External scripts that have `type="module"` are different in two aspects:
298
298
299
-
1. External scripts with same `src` run only once:
299
+
1. External scripts with the same `src` run only once:
300
300
```html
301
301
<!-- the script my.js is fetched and executed only once -->
// the module must have a path, e.g. './sayHi.js' or wherever the module is
323
323
```
324
324
325
-
Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet.
325
+
Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet.
326
326
327
327
### Compatibility, "nomodule"
328
328
329
-
Old browsers do not understand `type="module"`. Scripts of the unknown type are just ignored. For them, it's possible to provide a fallback using `nomodule` attribute:
329
+
Old browsers do not understand `type="module"`. Scripts of an unknown type are just ignored. For them, it's possible to provide a fallback using the`nomodule` attribute:
330
330
331
331
```html run
332
332
<script type="module">
@@ -350,7 +350,7 @@ Build tools do the following:
350
350
1. Take a "main" module, the one intended to be put in `<script type="module">` in HTML.
351
351
2. Analyze its dependencies: imports and then imports of imports etc.
352
352
3. Build a single file with all modules (or multiple files, that's tunable), replacing native `import` calls with bundler functions, so that it works. "Special" module types like HTML/CSS modules are also supported.
353
-
4. In the process, other transforms and optimizations may be applied:
353
+
4. In the process, other transformations and optimizations may be applied:
354
354
- Unreachable code removed.
355
355
- Unused exports removed ("tree-shaking").
356
356
- Development-specific statements like `console` and `debugger` removed.
@@ -379,7 +379,7 @@ To summarize, the core concepts are:
379
379
3. Modules always `use strict`.
380
380
4. Module code is executed only once. Exports are created once and shared between importers.
381
381
382
-
When we use modules, each module implements the functionality and exports it. Then we use `import` to directly import it where it's needed. Browser loads and evaluates the scripts automatically.
382
+
When we use modules, each module implements the functionality and exports it. Then we use `import` to directly import it where it's needed. The browser loads and evaluates the scripts automatically.
383
383
384
384
In production, people often use bundlers such as [Webpack](https://webpack.js.org) to bundle modules together for performance and other reasons.
0 commit comments