|
1 | 1 |
|
2 | 2 | # Modules, introduction
|
3 | 3 |
|
4 |
| -As our application grows bigger, we want to split it into multiple files, so called "modules". A module usually contains a class or a library of functions. |
| 4 | +As our application grows bigger, we want to split it into multiple files, so called "modules". A module may contain a class or a library of functions for a specific purpose. |
5 | 5 |
|
6 | 6 | For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need.
|
7 | 7 |
|
8 | 8 | But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand.
|
9 | 9 |
|
10 |
| -For instance: |
| 10 | +To name some (for historical reasons): |
11 | 11 |
|
12 | 12 | - [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](http://requirejs.org/).
|
13 | 13 | - [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server.
|
14 | 14 | - [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS.
|
15 | 15 |
|
16 | 16 | Now all these slowly become a part of history, but we still can find them in old scripts.
|
17 | 17 |
|
18 |
| -The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js. So we'll study it from now on. |
| 18 | +The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js. So we'll study the modern modules from now on. |
19 | 19 |
|
20 | 20 | ## What is a module?
|
21 | 21 |
|
22 |
| -A module is just a file. One script is one module. |
| 22 | +A module is just a file. One script is one module. As simple as that. |
23 | 23 |
|
24 | 24 | Modules can load each other and use special directives `export` and `import` to interchange functionality, call functions of one module from another one:
|
25 | 25 |
|
@@ -57,8 +57,8 @@ Like this:
|
57 | 57 |
|
58 | 58 | The browser automatically fetches and evaluates the imported module (and its imports if needed), and then runs the script.
|
59 | 59 |
|
60 |
| -```warn header="Modules work only via HTTP, not in local files" |
61 |
| -If you try to open a web-page locally, via `file://` protocol, you'll find that `import/export` directives don't work. Use a local web-server, such as [static-server](https://www.npmjs.com/package/static-server#getting-started) or use the "live server" capability of your editor, such as VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to test them. |
| 60 | +```warn header="Modules work only via HTTP(s), not in local files" |
| 61 | +If you try to open a web-page locally, via `file://` protocol, you'll find that `import/export` directives don't work. Use a local web-server, such as [static-server](https://www.npmjs.com/package/static-server#getting-started) or use the "live server" capability of your editor, such as VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to test modules. |
62 | 62 | ```
|
63 | 63 |
|
64 | 64 | ## Core module features
|
|
0 commit comments