Which browsers support import and export syntax for ECMAScript 6?
Chrome and Firefox support import
and export
syntax (there exists tests for proper parsing).
What isn't supported is module loading - you can't load module by any means, because specification for it isn't complete. You have to use some kind of module bundler for this. I'm not front-end developer, but I have heard good opinions on Rollup from my coworkers.
How will browsers handle ES6 import/export syntax
This is standardized now and supported by all major modern browsers.
will the modules be loaded asynchronously?
Yes, with two options available; details below.
Referencing only my main or entry file and browsers will lazy load the requiere modules.
Not so much "lazy," but yes.
Enabling it
Details in the spec here and here (and possibly elsewhere).
To get this behavior, you specify that your script is a module by using type="module"
:
<script src="main.js" type="module"></script>
or for inline scripts
<script type="module">
// ...module code here
</script>
That means that the script is parsed and handled per the Module definition in the JavaScript specification instead of per the Script definition, which means it can have imports (and exports).
Imports are resolved relative to the script's URL (for modules loaded via a separate resource such as the main.js
above, just like CSS) or relative to the document (for inline modules like the one above).
So for instance, if I have this in my document at http://example.com/index.html
:
<script src="./handy/stuff/nifty.js" type="module"></script>
...and nifty.js
contains
import Thingy from "./thingy.js";
...then the browser looks for http://example.com/handy/stuff/thingy.js
, not http://example.com/thingy.js
. Again, just like CSS imports.
Note that the ./
on that module specifier is required, just from "thingy.js"
won't work. That's because bare specifiers are disallowed because they'll probably end up having a special meaning. (For instance, in Node.js, that's how you specify built-in modules, and modules installed in node_modules
.) A module specifier must be a full URL, or a relative URL starting with /
, ./
, or ../
.
Async
I said above that modules are loaded asynchronously, and there are two options available. This graphic from the spec says it best (see the spec for the latest copy of it):
As you can see, for type="module"
scripts, if you don't put any special flag attributes on the script
tag, all of the module's dependencies will be resolved and then the script will be run once parsing of the HTML is complete. If you include the async
attribute, it may run sooner, before the HTML parsing is complete (for instance, if all the scripts are in cache). (defer
is not valid for modules.)
JavaScript - How to make ES6 imports work in browser?
To be honest - I think this is a good question because JS
is widely use in both server-side and client-side application, which contributes to the already existing confusion among developers
It's clear that your TS
code is written as server-side code (probably on Node.js
). Trying to run it (as is) on client-side is... well.. tricky. The reason: The syntax you are using in your code suppose to run on server-side (not on client-side). Is there a workaround? Well... yes!
The good news:
JS ES6
does have a native module loader! (check MDN)
The bad ones:
- Syntax is different from
Node.js
module loader syntax (when exporting a module) - Support is very partial (modern browsers only)
Some additional notes:
- The common syntax of modules loading is associated with a third-party library called require js (https://requirejs.org/). You can use this library in client side projects but you have to install it and configure it properly (the docs are pretty clear about how to do that)
- You can always use a task runner like grunt (https://gruntjs.com/) or similar projects to assist you to minify and unify all your code to a single file in production. Why you ask? It will clearly help you ease the load when a client fetch you website (less files are better in terms of network traffic)
As you see, there is no quick or simple answer to your question.. but it may be a good starting point to improve your knowledge and building better modern web apps.
UPDATE
As requested, I created a little sandbox demo that shows how to use ES6 native module (https://codesandbox.io/s/oj2rwm9v35)
index.html
<html>
<body>
<div id="app"></div>
<script type="module" src="src/primary.js"></script>
</body>
</html>
primary.js
import test from "./test";
test();
test.js
export default function test() {
document.querySelector("#app").textContent = "Hello JS module!";
}
Related Topics
Injecting a Mock into an Angularjs Service
How to Determine If an Image Has Loaded, Using JavaScript/Jquery
Secure Random Numbers in JavaScript
Trigger Right Click Using Pure JavaScript
Remove HTML Tags in JavaScript with Regex
JavaScript - Return String Between Square Brackets
Truncate (Not Round Off) Decimal Numbers in JavaScript
How to Use Command Line Arguments in Angularjs Protractor
Get Wrong Value in Data Attribute Jquery
Getting the First Index of an Object
Handle Url Fragment Identifier (Anchor) Change Event in JavaScript
Get Event Listeners Attached to Node Using Addeventlistener
Why Were Es5 Object Methods Not Added to Object.Prototype
How to Add Predefined Length to Audio Recorded from Mediarecorder in Chrome
(Deep) Copying an Array Using Jquery
What Are the Current Cookie Limits in Modern Browsers
Jquery Function to Get All Unique Elements from an Array
Javascript: Uncaught Typeerror: Cannot Call Method 'Addeventlistener' of Null