JavaScript ‪Module Cheatsheet 📄‬

Samantha Ming

·

Follow

Published in

DailyJS

·

4 min read

·

Nov 18, 2019

2.5K

3

Listen

Share

Here’s a cheatsheet to show you the different ways of exporting and the corresponding way to import it. It really distills to 3 types: name, default, and list. Just make sure your export matches your import way and you will have no problem 👍

// Name Export | Name Import
export const name = 'value'
import { name } from '...'// Default Export | Default Import
export default 'value'
import anyName from '...'// Rename Export | NameImport
export { name as newName }
import { newName } from '...'// Name + Default | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'// Export List + Rename | Import List + Rename
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'

Now let’s look at each of them and see how they work 🤓

a. Name

The key here is having a name. Hence a “named” export lol 😂

export const name = 'value';import { name } from '...';console.log(name); // 'value'

❌ What did I say, no name, no export!

export 'value'
import { } // 👈 see I don't even know what to put…