[Keywords] Modules

Reference

JavaScript Modules in 100 Seconds
JavaScript ‪Module Cheatsheet
JavaScript ES6 Modules

Modules

: a file that exports some code

ES6 modules

Default export & import

// package.js
// default export
export default () => {
 console.log('do something')
}
// app.js
// default import
// import any name from 'path'
import something from './package'; 

Named (multiple) exports & imports

// named export
const age = 25;
const color = green;
export {
  age, 
  favColor
}
// named import(rename)
import { age, favColor as color } from './package.js'
// default & named import
import something, { favColor } form './package.js'

• Benefits of named import
  : tree shakable -> import what you need, shake off the rest
  (smaller bundle size, better performance)

Example

// user.js
// export default class User {
class User {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}
// export function printName(user) {
function printName(user) {
  console.log('User's name is ${user.name}')
}
// export function printAge(user) { 
function printAge(user) {
  console.log('User is ${user.age} years old')
}
// default export => only one thing(usually class)
export default User 
// named export => various objects
export { printName, printAge } 
/***
***/
// main.js
// import 
// absolute path: same location in a file system relative to the root directory
import User from '/user.js' 
// relative path: specific location in a file system relative to the current directory you are working on
import User from './user.js'