What is the native way to import more than one module into a web page?

Question

ES2015 module loading is now supported natively. I want to avoid transpilation, and as I understand it, modules cannot be natively bundled into a single file without transpilation.

What is the native way to import more than one module into a web page? Is it lots of <script type=“module” src=“...”> imports?

Or can I import all my modules into one module and then re-export them from that single module, and then have only a single script tag in my HTML?

Answer 1

Or can I import all my modules into one module and then re-export them from that single module, and then have only a single script tag in my HTML?

This can work, though usually the setup would be different. Each module can have its own dependencies, so rather than a single hub from which all other modules are imported from, I'd often expect a single entry point from which other modules get imported, and the process continues recursively, eventually resulting in a tree-like structure, and not a dandelion.

If you have multiple entirely separate scripts (for example, one which renders a chart on the page, and another which adds JS functionality to the rest of the page), that'd be a situation where it could sense to have separate initial <script> tags for each, if you wanted.