Search code examples
javascriptmodulees6-modules

Classic scripts vs. module scripts in JavaScript

I was going through the WHATWG specifications for async and defer attributes for the <script> tag, when I saw this statement:

Classic scripts may specify defer or async; module scripts may specify async.

I went through the WHATWG definitions for classic and module scripts, but I didn't really get much clarity. In simple terms, what are the differences between classic and module scripts in JavaScript?

Solution

  • A classic script is just a standard JavaScript script as you know it. A module script is one that contains an ES6 module, i.e. it uses (or: can use) import and export declarations.

    From §8.1.3.8 Integration with the JavaScript module system:

    The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts of their processing model. This specification defines the rest of their processing model: how the module system is bootstrapped, via the script element with type attribute set to "module", and how modules are fetched, resolved, and executed. [JAVASCRIPT]

    Note: Although the JavaScript specification speaks in terms of "scripts" versus "modules", in general this specification speaks in terms of classic scripts versus module scripts, since both of them use the script element.

    Also have a look at https://blog.whatwg.org/js-modules.