Working with multiple JS files in Vanilla JS application:
1. UMD - Import all files to index.html file with script tag,
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hellow orld
<script src="index.js"></script>
<script src="mod1.js"></script>
<script src="mod2.js"></script>
</body>
</html>
// index.js
var ind = "100";
console.log({ ind });
console.log({ mod1 });
console.log({ cal: func1() });
console.log({ ind1 });
console.log({ ind2 });
// mod1.js
var ind1 = "200";
console.log("mod1", { ind1 });
const mod1 = 1000;
function func1() {
console.log("logged func");
}
// mod2.js
var ind2 = "300";
console.log("mod2", { ind2 });
Working with multiple JS files in Vanilla JS application:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hellow orld
<script type="module" src="mod1.js"></script>
<script type="module" src="index.js"></script>
</body>
</html>
// index.js
import func1 from "./mod1.js";
var ind = "100";
console.log({ ind });
console.log({ modname: func1() });
// mod1.js
function func1() {
console.log("logged func");
return "10000";
}
export default func1;
Working with multiple JS files in Vanilla JS application:
// index.js
import func1 from "./mod1.js";
console.log(func1());
// mod1.js
function func1() {
console.log("logged func");
return "10000";
}
export default func1;
// mod1.js
// just add "default"
export default class User {
constructor(name) {
this.name = name;
}
}
// index.js
import User from './user.js';
new User('John');
Working with multiple JS files in Vanilla JS application:
// index.js
import whateverName from "./mod1.js";
console.log(whateverName());
// no function name
export default function(user) {
alert(`Hello, ${user}!`);
}
// export an array
export let months = ['Jan', 'Feb', 'Mar']
// export a constant
export const MODULES_YEAR = 2015;
// export a class
export class User {
constructor(name) {
this.name = name;
}
}
Working with multiple JS files in Vanilla JS application:
// say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye};
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!
import * as say from './say.js';
say.sayHi('John');
say.sayBye('John');
Working with multiple JS files in Vanilla JS application:
// Error! (non-default export needs a name)
export class {
constructor() {}
}
// say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi as hi, sayBye as bye};
import {hi as sayingHi, bye as sayingBye} from './say.js';
sayingHi('John'); // Hello, John!
sayingBye('John'); // Bye, John!
Working with multiple JS files in Vanilla JS application:
function sayHi(user) {
alert(`Hello, ${user}!`);
}
// same as if we added
// "export default" before
// the function
export {sayHi as default};
import saying from './user.js'; // works
import justKidding from './user.js'; // works too
Working with multiple JS files in Vanilla JS application:
export default class User {
constructor(name) {
this.name = name;
}
}
export function sayHi(user) {
alert(`Hello, ${user}!`);
}
import {default as User, sayHi} from './user.js';
new User('John');
Working with multiple JS files in Vanilla JS application:
import * as user from './user.js';
// the default export
let User = user.default;
new User('John');
// import login/logout and immediately export them
import {login, logout} from './helpers.js';
export {login, logout};
// import default as User and export it
import User from './user.js';
export {User};
export {login, logout} from './helpers.js';
// re-export the default export as User
export {default as User} from './user.js';
// to re-export named exports
export * from './user.js';
export {default} from './user.js'
Working with multiple JS files in Vanilla JS application:
export function hi() {
alert(`Hello`);
}
export function bye() {
alert(`Bye`);
}
Dynamic Imports:
let {hi, bye} = await import('./say.js');
hi();
bye();
import('./say.js')
.then(func => console.log(func()))
.catch(err => console.log(err))
Dynamic Imports:
let obj = await import('./say.js');
let say = obj.default;
export default function() {
alert("Module loaded (export default)!");
}
Dynamic Imports:
Although import() looks like a function call, it’s a special syntax that just happens to use parentheses (similar to super()).
So we can’t copy import to a variable or use call/apply with it. It’s not a function.