Import js from script tag in HTML file. Possible?

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.

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>

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>

I had an... interesting... use case at my company where I had to import functions from a file, but the script tag couldn't be a module.

The script tag creates a new script tag in the dom with type = module, which imports an object containing each function. For each of the functions we run window.myFunction = myFunction to allow them to be used from the dom.

HTML:

<script>
    ((path = "./importme.js", fileId = "importme") => {
        if (document.getElementById(fileId)) return;
        let tag = document.createElement("script");
        tag.type = "module";
        tag.id = fileId;
        tag.innerHTML =
            'import codeFromFile from "' +
            path +
            '"; Object.keys(codeFromFile).forEach(k => { window[k] = codeFromFile[k] });';
        document.body.appendChild(tag);
    })();
</script>
<button onclick="testFunction()">Click me</button>

./importme.js

function testFunction() {
    alert("Test Function");
}

export default { testFunction };

Alternatively, if you just want to run what's in the imported file you could do this:

HTML:

<script>
    ((src = "/importme.js", fileId = "importme") => {
        if (document.getElementById(fileId)) return;
        let tag = document.createElement("script");
        tag.id = fileId;
        tag.src = src;
        document.body.appendChild(tag);
    })();
</script>
<button id="click">Click me</button>

./importme.js (wrap everything in the exported anonymous function)

window.onload = () => {
    document.getElementById('click').onclick = e => {
        alert('Element clicked!');
    };
};

This is a bad way to do things, only for a worst-case scenario. This answer is food for thought, please don't do this... My company found a way to get around this in the end.

You can simply use a global variable like so:

• In your HTML file:

 <script>var myGlobalVar = "foo";</script>

• In your JS file before enqueuing your script:

/* global myGlobalVar */

alert(myGlobalVar);

Then you can use your variable in the JS file.