Importing Vanilla JS Files

Here’s a little tip which allows you to use ES6 import/export syntax in your vanilla JS files in supported browsers (over 95% at the time of writing).

You might be used to adding script tags that look like this:

<script type="text/javascript" src="script.js"></script>

But what if you want to break up your code into multiple files? You can do this by adding a script tag for each file, but this can get messy, and requires you to consider the order in which you add the script tags.

Instead, you can use the ES6 import/export syntax to import your files as you wish, keeping the structure of your code clean and easy to understand. Simply change the tag type to module, and you’re good to go!

<script type="module" src="script.js"></script>

Now you can use the import keyword to import other files:

// foo.js
export function hello() {
  return "Hello World!";
}

// script.js
import { hello } from "./foo.js";
console.log(hello());

Easy, right?