Modules
ES6 Modules - used in front-end
Named Exports
Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.
For example, I created a file containing the functions to retrieve the data from the back-end webAPI. It's useful to export these as an object so that the importer can import the specific functions they need.
import axios from 'axios';
const PORT=5000;
const SERVER_URL_ROOT = `http://localhost:${PORT}/api`;
async function getTopics() {
const response = await axios.get(`${SERVER_URL_ROOT}/topics`);
return response.data;
}
async function getTopic(topicId) {
const response = await axios.get(`${SERVER_URL_ROOT}/topics/${topicId}`);
return response.data;
}
async function getArticle(articleId) {
const response = await axios.get(`${SERVER_URL_ROOT}/articles/${articleId}`);
return response.data;
}
async function getArticles() {
const response = await axios.get(`${SERVER_URL_ROOT}/articles/`);
return response.data;
}
async function getArticlesForTopic(topicId) {
const response = await axios.get(`${SERVER_URL_ROOT}/articles/topic/${topicId}`);
return response.data;
}
export {
getArticles,
getArticlesForTopic,
getArticle,
getTopics,
getTopic
}
import {
getArticlesForTopic,
getArticle,
getTopic
} from '../../api/back-end';
Default Exports
But a default export can be imported with any name:
// export feature declared earlier as default
export { myFunction as default };
// export individual features as default
export default function () { ... }
export default class { .. }
// each export overwrites the previous one
The React component functions are exported as the default export.
function Header() {
return (
<header>
<a href="index.html">
<img src={logo} class="logo" alt="logo" />
</a>
<NavBar/>
</header>
);
}
export default Header;
A default export is imported with whatever name you specify.
import Header from './containers/Header/Header';
CommonJS Modules - Node.js
Resources
Last updated
Was this helpful?