Modules | Notion

Named Modules

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modules</title>
</head>
<body>
    
<script src="module2.js" type="module"></script>
</body>
</html>

module1.js


// Named Export

export let a = 9;
export let Username = "Vignesh";
export let arr = [1, 2, 3, 4, 5];
export let obj = { 
    name: "Vignesh", 
    age: 19
};

module2.js

import {a,Username,arr,obj} from './module1.js';
console.log(a); // 9
console.log(Username); // Vignesh
console.log(arr); // [1, 2, 3, 4, 5]
console.log(obj); // {name: "Vignesh", age: 19}

Untitled

Default Modules

Default Export.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Export</title>
</head>
<body>
    
    <script src="default import.js" type="module"></script>
</body>
</html>

default Export.js


// Named Export

let a = 9;
let Username = "Vignesh";
let arr = [1, 2, 3, 4, 5];
let obj = { 
    name: "Vignesh", 
    age: 19
};

// Default Export pack all the default exports into a single object
export default {Username, a, arr, obj};

default import.js

import variables from './default Export.js';
console.log(variables.Username); // Vignesh
console.log(variables.a); // 9
console.log(variables.arr); // [1, 2, 3, 4, 5]
console.log(variables.obj); // {name: "Vignesh", age: 19}

Untitled