140 lines
2.8 KiB
Markdown
140 lines
2.8 KiB
Markdown
---
|
|
title: JavaScript modules Cheat Sheet
|
|
type: cheatsheet
|
|
tags: [javascript,cheatsheet]
|
|
author: chalarangelo
|
|
cover: mountain-lake-2
|
|
excerpt: Learn everything you need to know about JavaScript modules with this handy cheatsheet.
|
|
dateModified: 2021-06-12T19:30:41+03:00
|
|
---
|
|
|
|
### Named exports
|
|
|
|
```js
|
|
/* environment.js */
|
|
export const key = 'this-is-a-secret';
|
|
|
|
/* index.js */
|
|
import { key } from 'environment';
|
|
```
|
|
|
|
- Named exports use a name.
|
|
- A module can have any number of named exports.
|
|
- Import and export name should be the same.
|
|
- Importing requires `{}`.
|
|
|
|
### Default exports
|
|
|
|
```js
|
|
/* environment.js */
|
|
const environment = {
|
|
key: 'this-is-a-secret',
|
|
port: 8000
|
|
};
|
|
|
|
export default environment;
|
|
/* index.js */
|
|
import environment from 'environment';
|
|
|
|
const { key, port } = environment;
|
|
```
|
|
|
|
- Default exports expose a default value, use the `default` keyword.
|
|
- A module can only have one default export.
|
|
- Import name can be anything.
|
|
- Importing does not require `{}`.
|
|
|
|
### Default + named
|
|
|
|
```js
|
|
/* environment.js */
|
|
export const envType = 'DEV';
|
|
|
|
const environment = {
|
|
key: 'this-is-a-secret',
|
|
port: 8000
|
|
};
|
|
|
|
export default environment;
|
|
|
|
/* index.js */
|
|
import { envType }, environment from 'environment';
|
|
|
|
const { key, port } = environment;
|
|
```
|
|
|
|
- Default and named exports can be mixed.
|
|
- Rules about number of exports and naming conventions apply as before.
|
|
- Import rules apply as before, can be mixed if necessary.
|
|
|
|
### Export list
|
|
|
|
```js
|
|
/* environment.js */
|
|
const key = 'this-is-a-secret';
|
|
const port = 8000;
|
|
|
|
export {
|
|
key,
|
|
port
|
|
};
|
|
|
|
/* index.js */
|
|
import { key, port } from 'environment';
|
|
```
|
|
|
|
- An export list is a compact way to write multiple named exports.
|
|
- Rules about number of exports, naming conventions and import rules are the same as those of named exports.
|
|
- Export lists are not objects.
|
|
|
|
### Rename export
|
|
|
|
```js
|
|
/* environment.js */
|
|
const key = 'this-is-a-secret';
|
|
|
|
export { key as authKey };
|
|
|
|
/* index.js */
|
|
import { authKey } from 'environment';
|
|
```
|
|
|
|
- Named exports can make use of the `as` keyword to rename an export.
|
|
- Import name should be the same as the renamed export.
|
|
|
|
### Rename import
|
|
|
|
```js
|
|
/* environment.js */
|
|
export const key = 'this-is-a-secret';
|
|
|
|
/* index.js */
|
|
import { key as authKey } from 'environment';
|
|
```
|
|
|
|
- Named imports can make use of the `as` keyword to rename an import.
|
|
- Import name (before the `as` keyword) should be the same as the export.
|
|
|
|
### Import all
|
|
|
|
```js
|
|
/* environment.js */
|
|
export const envType = 'DEV';
|
|
|
|
const environment = {
|
|
key: 'this-is-a-secret',
|
|
port: 8000
|
|
};
|
|
|
|
export default environment;
|
|
|
|
/* index.js */
|
|
import * as env from 'environment';
|
|
|
|
const { default: { key, port}, envType } = environment;
|
|
```
|
|
|
|
- Use `*` to import everything a module exports.
|
|
- Named exports will be available by their names on the imported object.
|
|
- Default export will be available as the `default` key on the imported object.
|