Understanding ES6 modules
Please can anyone confirm my understanding of ES modules?
In javascripts/bar.js
:
var foo = 2;
export function Bar() {}
IN index.html
<script>
import { Bar } from 'javascripts/bar';
var b = new Bar(); // Instantiates an instance of Bar.
</script>
Under the hood, the ES6 engine will load bar.js
when it evaluates import { Bar } from 'javascripts/bar';
and block it when this module is returned over HTTP? Or is it loaded bar.js
before the script is evaluated in index.html
?
Since it is bar.js
loaded using a keyword import
, are global variables in bar.js
bound to this module and are not displayed globally?
Now, if I want to merge modules, will I still need to wrap my modules in IIFEs to make their scopes differ (or at least use a build step that does this under the hood)?
source to share
Under the hood, the ES6 engine will load bar.js when it evaluates {Bar} imports from 'javascripts / bar' ;, and block when that module is returned via HTTP? Or is the bar.js file loaded before evaluating the script in index.html?
There is no correct answer at the moment, because there is no specification for how modules are loaded. ES2015 only defines module syntax, but as a runtime interpretation, which is not yet standardized. For example, it is very unlikely that any bootloader specification that is eventually implemented will allow you to omit .js
as much as you do. And it's also very unlikely that tags <script>
will be allowed to be used import
.
However, discarding any syntax errors you made, I can tell you in general terms what can be standardized for the browser loader. This is the last one: imports are defined and loaded in advance before any script execution takes place. (For the Node.js loader, however, it is probably blocking.)
Since bar.js is loaded using the import keyword, are the global variables in bar.js bound to this module and not globally visible?
It depends on what you mean by globals. If you declare global with, for example window.x = 5
, that will still mutate the global object. Modules do not receive separate global objects to communicate with.
However, if you are referring to "random" globals such ads with ads var
or function
on the upper level, the answer lies in the fact that top-level ad units var
, and function
do not cause the global properties that are to be determined.
(Note that in both modules and script, top-level declarations let
and const
do not create properties for the global object.)
Now, if I want to merge modules, will I still need to wrap my modules in IIFEs to make their scopes differ (or at least use a build step that does this under the hood)?
If you want to combine modules, you have a lot more problems than the ones you are describing. For example, import
and export
can only be used at the top level, not within an IIFE. Modules are not designed to be concatenated as this is actively detrimental to performance given modern browsers and servers.
source to share