Viewing: ar.javascript.info

(module). .

( ).

AMD: require.js.
CommonJS: Node.js.
UMD: ( ) AMD CommonJS.

( ) .

( ) 2015 ( Node.js) . .

. .

export import :

export .
import .

sayHi.js :

          //  sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
        

          //  main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // function...  
sayHi('John'); // Hello, John!
        

import ./sayHi.js . sayHi .

<script type="module">.

say.js

index.html

export function sayHi(user) {
  return `Hello, ${user}!`;
}

<!doctype html>
<script type="module">
  import {sayHi} from './say.js';

  document.body.innerHTML = sayHi('John');
</script>

( ) .

If you try to open a web-page locally, via file:// protocol, youll find that import/export directives dont work. Use a local web-server, such as static-server or use the live server capability of your editor, such as VS Code Live Server Extension to test modules.

=======

() "

          <script type="module">
  a = 5; // 
</script>
        

. .

hello.js user user.js :

hello.js

user.js

index.html

alert(user); // no such variable (each module has independent variables)

let user = "John";

<!doctype html>
<script type="module" src="user.js"></script>
<script type="module" src="hello.js"></script>

export import .

user.js hello.js .

hello.js

user.js

index.html

import {user} from './user.js';

document.body.innerHTML = user; // John

export let user = "John";

<!doctype html>
<script type="module" src="hello.js"></script>

. <script type="module">:

          <script type="module">
  //        
  let user = "John";
</script>

<script type="module">
  alert(user); // :  user  
</script>
        

window window.user. .

. .

( ) :

          //  alert.js
alert("Module is evaluated!"); //   !
        

          //       

//  1.js
import `./alert.js`; //   !

//  2.js
import `./alert.js`; // (   )
        

. .

          //  admin.js
export let admin = {
  name: "John"
};
        

admin .

admin :

          //  1.js
import {admin} from './admin.js';
admin.name = "Pete";

//  2.js
import {admin} from './admin.js';
alert(admin.name); // Pete

//   1.js  2.js   
//      1.js     2.js
        

. admin .

admin.js admin :

          //  admin.js
export let admin = { };

export function sayHi() {
  alert(`Ready to serve, ${admin.name}!`);
}
        

init.js ( ) admin.name. admin.js :

          //  init.js
import {admin} from './admin.js';
admin.name = "Pete";
        

admin.name:

          //  other.js
import {admin, sayHi} from './admin.js';

alert(admin.name); // Pete

sayHi(); // Ready to serve, Pete!

import.meta

import.meta .

HTML:

          html run height=0
<script type="module">
  alert(import.meta.url); //  URL  ( URL  HTML  )
</script>
        

`this`

this .

this :

          html run height=0
<script>
  alert(this); // window
</script>

<script type="module">
  alert(this); //  
</script>
        

( ) type="module" .

defer ( ) .

<script type="module" src="..."> HTML .
HTML ( HTML) .
: .

HTML .

          <script type="module">

  alert(typeof button); //  (object):     
  //    .      
</script>

Compare to regular script below:

<script>
  alert(typeof button); // button is undefined, the script can't see elements below
  //         
</script>

<button id="button">Button</button>
        

! undefined object. . .

HTML . . .

Async

async ( Asynchronous ) . HTML.

async .

( ./analytics.js) HTML . .

( analytics.js). .

          <script async type="module">
  import {counter} from './analytics.js';

  counter.count();
</script>
        

type="module" :

src . my.js .

          <script type="module" src="my.js"></script>
<script type="module" src="my.js"></script>
        

( ) CORS . Access-Control-Allow-Origin. Access-Control-Allow-Origin ( another-site.com) .
```
<script type="module" src="http://another-site.com/their.js"></script>
```

import URL . . import.

import :

          import {sayHi} from 'sayHi'; //   
//      : './sayHi.js'      
        

Node.js . .

nomodule

type ="module". . nomodule:

          <script type="module">
  alert("Runs in modern browsers");
</script>

<script nomodule>
  alert("Modern browsers know both type=module and nomodule, so skip this")://    type=module   nomodule    
  alert("Old browsers ignore script with unknown type=module, but execute this.");//       type=module    nomodule
</script>
        

. [Webpack] (https://webpack.js.org/) .

HTML/CSS.

main <script type ="module"> HTML.
: .
( ) import . HTML/CSS.
:
- .
- ( ).
- console debugger.
- [Babel] (https://babeljs.io/).
- ( ).

( ) import/export . import/export type="module" : bundle.js : Webpack.

<script src="bundle.js"></script>

( ). Webpack: .

. import/export <script type ="module">. :
- .
- Async .
- ( / / ) CORS .
- .
import/export.
use strict.
. .

. import . .

[Webpack] (https://webpack.js.org) .

-- Modules, introduction The JavaScript language