It's been a long time coming, and we're still on shaky ground - but native module support is close. Not "burn your build tools!" close, but "burn your build tools for personal projects!" close... like arrow function syntax in 2013. If you have Firefox Nightly, or Safari Tech Preview (or Edge, I believe!) - you can give Babel a nice kick in the guts, and get back to some plain ol' JavaScript + HTML + CSS.
At the moment there's a couple of differences from the import syntax you know and love: first, your entry point needs to be a script tag from your HTML file:
<script type="module" src="main.js"></script>
Additionally, you need to add the file extension as part of the import path:
import test from "./test.js";
Notice the ".js" on the end there? Required. This means we lose the "default to 'index.js'" for importing just a folder path:
import test from "./test/index.js";
(Rather than the nicer import test from "./test"
) Still, I'll take it! Module support is enabled by default in Safari Technology Preview and can be switched on in Firefox Nightly in about:config
under the key dom.moduleScripts.enabled
- which default to false
.