See the Pen thecodelog.com - ES6 Modules 1 by Deano (@deangilewicz) on CodePen.
When a module is only called for as a singleton (i.e., it just needs one instance) we can do:
See the Pen thecodelog.com - ES6 Modules 2 by Deano (@deangilewicz) on CodePen.
ES6 modules have first class syntactic and functional support. At this time it uses file-based modules (1 module per file) and if you are going to load ES6 modules directly into a browser web application, you will be loading them individually, not as a large bundle in a single file.
ES6 modules are singletons. This means that every time you import that module into another module, you get a reference to the one centralized instance.
Import and export must appear outside of all blocks and functions – (e.g. it can’t be in an if block).
See the Pen thecodelog.com - ES6 Modules 3 by Deano (@deangilewicz) on CodePen.
You can also “rename” (aka alias) a module member during a named export. When the following module is imported, only the aCoolFn member name is available to import. myFn3 stays hidden inside the module.
See the Pen thecodelog.com - ES6 Modules 4 by Deano (@deangilewicz) on CodePen.
Within your module, if you change the value of a variable you already exported a binding to, even if it’s already been imported, the imported binding will resolve to the current (updated) value.
When the following module is imported, regardless of whether that’s before or after the awesome4 = 100 setting, once that assignment has happened, the imported binding resolves to the 100 value, not 42.
See the Pen thecodelog.com - ES6 Modules 5 by Deano (@deangilewicz) on CodePen.
A default export sets a particular exported binding to be the default when importing the module. The name of the binding is literally default. There can only be one default per module definition and this is usually for the main thing that the module does. When importing an exported default, you can name it whatever you like.
See the Pen thecodelog.com - ES6 Modules 6 by Deano (@deangilewicz) on CodePen.
In the above version of the module export, the default export binding is actually to the myFn7 identifier rather than its value, so you get the previously described binding behavior (i.e., if you later change myFn7’s value, the value seen on the import side will also be updated).
The following code displays a couple of additional ways you can use export and export default within the same module.
See the Pen thecodelog.com - ES6 Modules 7 by Deano (@deangilewicz) on CodePen.
Named exports are generally used for method and variables. You can have multiple named exports from a module but you need to use { } syntax to import a named export.
See the Pen thecodelog.com - ES6 Modules 8 by Deano (@deangilewicz) on CodePen.
ES6 module import syntax is as follows:
See the Pen thecodelog.com - ES6 Modules 9 by Deano (@deangilewicz) on CodePen.
The “myCoolFn1” string is called a module specifier.
See the Pen thecodelog.com - ES6 Modules 10 by Deano (@deangilewicz) on CodePen.
You can rename the bound identifiers imported, as:
See the Pen thecodelog.com - ES6 Modules 11 by Deano (@deangilewicz) on CodePen.
If importing only the default export then:
See the Pen thecodelog.com - ES6 Modules 12 by Deano (@deangilewicz) on CodePen.
Consider a “myCoolFn6” module exported as:
See the Pen thecodelog.com - ES6 Modules 13 by Deano (@deangilewicz) on CodePen.
You can import that entire API to a single module namespace binding:
See the Pen thecodelog.com - ES6 Modules 14 by Deano (@deangilewicz) on CodePen.
All imported bindings are immutable and/or read-only.
When module loading, 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 filesystem 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.