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
Recall earlier in the "`export`ing API Members" section that we talked about how the `bar` and `baz` bindings are bound to the actual identifiers inside the `"world"` module. That means if the module changes those values, `hello.bar` and `hello.baz` now reference the updated values.
1442
1442
1443
-
But the immutable/read-only nature of your local imported bindings enforces that you cannot change them from the importing code, hence the `TypeError`s. That's pretty important, because without those protections, your changes would end up affecting all other consumers of the module (remember: singleton), which could create some very surprising side-effects.
1443
+
But the immutable/read-only nature of your local imported bindings enforces that you cannot change them from the imported bindings, hence the `TypeError`s. That's pretty important, because without those protections, your changes would end up affecting all other consumers of the module (remember: singleton), which could create some very surprising side-effects!
1444
1444
1445
1445
Moreover, though a module *can* change its API members from the inside, you should be very cautious of intentionally designing your modules in that fashion. ES6 modules are *supposed to be* static, so deviations from that principle should be rare and should be carefully and verbosely documented.
1446
1446
1447
1447
**Warning:** There are module design philosophies where you actually intend to let a consumer change the value of a property on your API, or module APIs are designed to be "extended" by having other "plugins" add to the API namespace. As we just asserted, ES6 module APIs should be thought of and designed as static and unchangeable, which strongly restricts and discourages these alternate module design patterns. You can get around these limitations by exporting a plain object, which of course can then be changed at will. But be careful and think twice before going down that road.
1448
1448
1449
+
From inside a module, you can access its own metadata information using the `this module` target in place of a string module specifier:
1450
+
1451
+
```js
1452
+
import { urlasmoduleURL } from this module;
1453
+
import*asmetafrom this module;
1454
+
1455
+
console.log( moduleURL ); // ..
1456
+
1457
+
console.log( meta.url ); // ..
1458
+
console.log( meta.name ); // ..
1459
+
```
1460
+
1449
1461
Finally, the most basic form of the `import` looks like this:
1450
1462
1451
1463
```js
@@ -1525,14 +1537,16 @@ bar( 25 ); // 11.5
1525
1537
1526
1538
The static loading semantics of the `import` statement mean that a `"foo"` and `"bar"` which mutually depend on each other via `import` will ensure that both are loaded, parsed, and compiled before either of them runs. So their circular dependency is statically resolved and this works as you'd expect.
1527
1539
1528
-
### Module Loader
1540
+
### Module Loading
1529
1541
1530
-
We asserted at the beginning of this "Modules" section that the `import` statement uses a separate mechanism, provided by the hosting environment (browser, Node.js, etc.) to actually resolve the module specifier string into some useful instruction for finding and loading the desired module. That process is handled by a*Module Loader*.
1542
+
We asserted at the beginning of this "Modules" section that the `import` statement uses a separate mechanism, provided by the hosting environment (browser, Node.js, etc.), to actually resolve the module specifier string into some useful instruction for finding and loading the desired module. That mechanism is the system*Module Loader*.
1531
1543
1532
1544
The default module loader provided by the environment will interpret a module specifier as a URL if in the browser, and (generally) as a local file system path if on a server such as Node.js. The default behavior is to assume the loaded file is authored in the ES6 standard module format.
1533
1545
1534
1546
For the vast majority of users and uses, the default loader will be sufficient.
1535
1547
1548
+
The module loader is not specified by ES6. It is a separate, parallel standard (http://whatwg.github.io/loader/) controlled by the WHATWG browser standards group. At the time of this writing, the following is the expected API design, but of course things are subject to change.
1549
+
1536
1550
#### Loading Modules Outside Of Modules
1537
1551
1538
1552
One use for the module loader is if your main program (non-module) needs to load a module. Consider:
@@ -1544,11 +1558,13 @@ One use for the module loader is if your main program (non-module) needs to load
1544
1558
System.import( "foo" )
1545
1559
// returns a promise
1546
1560
.then( function(foo){
1547
-
1561
+
foo.bar();
1548
1562
} );
1549
-
1550
1563
```
1551
1564
1565
+
The `System.import(..)` utility imports the entire module into the named parameter as a namespace, just like the `import * as foo ..` namespace import we discussed earlier.
1566
+
1567
+
**Note:** The `System.import(..)` utility returns a promise that is fulfilled once the module is ready. To import multiple modules, you can compose promises from multiple `System.import(..)` calls using `Promise.all([ .. ])`. For more information about promises, see "Promises" in Chapter 4.
0 commit comments