Maximus Maximus - 1 month ago 25
Javascript Question

Should I reference files in `script` tag when using es6 modules in a browser

I can't seem to find an answer to my question whether I should include files into

<script>
tag when using es6 modules or a browser will request them automatically? If so, how does it resolve path?

Answer

Browsers don't support ES2015 modules yet. For the moment, to use them in a browser, you need to use a tool like browserify or webpack that transforms the source a bit instead, converting imports into calls to loading functions.


In a comment you've said:

I know that there's no support yet. My question is about how it'll behave when implemented

I think that's still being decided, but some basics are in place. The WHAT-WG specification currently lists that we'll use <script type="module"> for them:

Setting the attribute to an ASCII case-insensitive match for the string "module" means that the script is a module script, to be interpreted according to the JavaScript Module top-level production.

...

Classic scripts and module scripts may either be embedded inline or may be imported from an external file using the src attribute, which if specified gives the URL of the external script resource to use.

There's an example further on which suggests that dependencies will be resolved and automatically fetched:

The following sample shows how a script element can be used to include an external module script.

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

This module, and all its dependencies (expressed through JavaScript import statements in the source file), will be fetched. Once the entire resulting module tree has been imported, and the document has finished parsing, the contents of app.js will be evaluated.

Additionally, if code from another script element in the same Window imports the module from app.js (e.g. via import "./app.js";), then the same module script created by the former script element will be imported.

and also:

The following sample shows how a script element can be used to write an inline module script that performs a number of substitutions on the document's text, in order to make for a more interesting reading experience (e.g. on a news site): [XKCD1288]

<script type="module">
 import { walkAllTextNodeDescendants } from "./dom-utils.js";

 const substitutions = new Map([
   ["witnesses", "these dudes I know"]
   ["allegedly", "kinda probably"]
   ["new study", "Tumblr post"]
   ["rebuild", "avenge"]
   ["space", "spaaace"]
   ["Google glass", "Virtual Boy"]
   ["smartphone", "Pokédex"]
   ["electric", "atomic"]
   ["Senator", "Elf-Lord"]
   ["car", "cat"]
   ["election", "eating contest"]
   ["Congressional leaders", "river spirits"]
   ["homeland security", "Homestar Runner"]
   ["could not be reached for comment", "is guilty and everyone knows it"]
 ]);

 function substitute(textNode) {
   for (const [before, after] of substitutions.entries()) {
     textNode.data = textNode.data.replace(new RegExp(`\\b${before}\\b`, "ig"), after);
   }
 }

 walkAllTextNodeDescendants(document.body, substitute);
</script>

Some notable features gained by using a module script include the ability to import functions from other JavaScript modules, strict mode by default, and how top-level declarations do not introduce new properties onto the global object. Also note that no matter where this script element appears in the document, it will not be evaluated until both document parsing has complete and its dependency (dom-utils.js) has been fetched and evaluated.

Comments