Eigene JS-Library erstellen

JavaScript ‪Module Cheatsheet 📄‬

Code Tidbit by SamanthaMing.com
// 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 '...'

 

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'
export 'value'
import { } // 👈 see I don't even know what to put here...give me a name!

 

b. Default

With a default export, you don’t need any name. Because you can name it whatever you want 👏

export default 'value'
import anyName from '...';
console.log(anyName); // 'value'
export default const name = 'value'; // don't try to give me a name!

 

Mixing Default + Name

You can absolutely combine default and name export in one file 🤝

export const name = 'value';
export default 'value'
import anyName, { name } from '...';

 

c. Export List

The third style is an Export List.

const name1 = 'value1';
const name2 = 'value2';
export {
name1,
name2
}
import {
name1,
name2
} from '...'
console.log(
name1, // 'value1'
name2, // 'value2'
)
// ❌ Export list ≠ Object
export {
name: 'name'
}

 

Renaming Export

Not happy with the export name. No problem, you can rename it using the as keyword.

const name = 'value'export {
name as newName
}
import { newName } from '...'console.log(newName); // 'value'// Original name is not accessible
console.log(name); // ❌ undefined
export const name = 'value';// You're already exporting name ☝️, don't export me again
export {
name
}

 

Renaming Import

The same rule applies to import. We can rename it using the as keyword.

const name1 = 'value1';
const name2 = 'value2';
export {
name1,
name2 as newName2
}
import {
name1 as newName1,
newName2
} from '...'
console.log(newName1); // 'value1'
console.log(newName2); // 'value2'

name1; // undefined
name2; // undefined

 

Import All

export const name = 'value';export default 'defaultValue';import * as anyName from '...';console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'

 

Name vs Default

There’s been a lot of debate whether one should use default export at all. Check out these 2 articles.

 

Name vs Default Export in Non-Dev Terms

Let’s say you owe your friend some money. Your friend says you can pay them back with cash or e-transfer. Paying through e-transfer is like a named export because your name is attached to the transaction. So if your friend is forgetful and starts chasing you down claiming that you still owe them money. You can simply show them the proof of transfer because your name is on the payment. However, if you had paid your friend back with cash, which is like a default export, you have no proof. They can say the $50 is from Susan and NOT you. The cash has no name attached to it so they could say it’s from you or whoever it is 😵

 

Community Input

@kyleshevlin: Maybe there’s a way you could add the asterisk import, too, where you import all exports from a module. import * as myModule from '/modules/my-module.js';. The key with that one is that on the import side when using the module, the default is there as myModule.default and the rest are as they are named, myModule.nameOfSomething. CodeSandbox Example