Import js from script tag in HTML file. Possible?

Question

I want to access data from script tag in html file, produced by cms. Is it possible to do this without polluting global namespace? I've tried to use es6 modules but I've failed and I couldn't find any info about it.

    <script>
        let list = ['a','b','c'];
        export default list
    </script>

    //test.js
    import list from './index.html' 

Error: 'http://localhost:8080/index.html net::ERR_ABORTED 404' or: 'Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.'

Answer 1

No, doing that isn't covered by the HTML specification yet¹ (and I suspect it never will be²). (If it were, you'd still need type="module" on your first script tag.) There's no module specifier that specifies a script element in an HTML page. At the moment, the only module specifiers are URLs for JavaScript files. Details in the spec.

Instead, you probably want something like this:

<script type="module">
import { setList } from "./test.js";
setList(['a', 'b', 'c']);
</script>

...where test.js exports a named export that lets you tell it what list to use.

(Or of course, it could be a default export.)

Inline script type="module" tags can import, but while they can use export, nothing can make use of the exports they create because they have no useful module specifier.

---

¹ It's the HTML spec because the form and semantics of module specifiers are left to the host environment by the JavaScript spec (details here). All that the JavaScript spec says about them is that they're string literals.

² It certainly could be, for instance using fragment identifiers. But with HTTP/2 multiplexing making discrete resource loading so fast compared with HTTP/1.1 (and esp. vs. HTTP/1.0), the impetus to make everything contained in a single resource is dramatically lower now than it was some years ago.

Answer 2

You can't export JS from HTML. You can import it however, using the type="module" attribute on the <script> tag:

<script type="module">
  import list from "./test.js";
  //Use list
</script>

Answer 3

I also asked myself the same question and found your topic. But then a simple solution came to mind.

// buffer.js
    export default let buffer={};

// index.html
<script type="module">
    import buffer from './buffer.js';
    buffer.helloWorld='hello world';
</script>
....
<script type="module">
    import buffer from './buffer.js';
    console.log(buffer.helloWorld);
</script>