Modules (Import/Export)¶

JavaScript modules allow you to break up your code into separate files. This makes it easier to maintain the code-base.

1. Exporting¶

You can export functions or variables from any file.

person.js

export const name = "Jesse";
export const age = 40;

export function greet() {
    return "Hello!";
}

You can only have one default export in a file.

const message = () => "This is default";
export default message;

You can import modules into a file in two ways, based on if they are named exports or default exports.

main.js

import { name, age } from "./person.js";
import message from "./message.js"; // No curly braces for default

To use modules in HTML, you must set type="module" in the script tag.

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

Server Required

Modules only work when served via HTTP(s), not when opening file:// directly in the browser due to CORS policies.