Borislav Hadzhiev
Tue Mar 29 2022·2 min read
Photo by Amarnath Tade
To re-export values from another file in JavaScript, make sure to export the
name exports as export {myFunction, myConstant} from './another-file.js
and
the default export as export {default} from './another-file.js'
. The values
can be imported from the file that re-exported them.
Here is an example of a file that has 2 named exports and a default export.
// 👇️ named export export function increaseSalary(salary) { return salary + 100; } // 👇️ named export export const department = 'accounting'; // 👇️ default export export default function multiply(a, b) { return a * b; }
Here is how you would re-export the exported members of another-file.js
from a
file called index.js
.
export {increaseSalary, department, default} from './another-file.js';
The example above directly re-exports the 2 named exports and the default export.
increaseSalary
, department
and the default export in the index.js
file because we haven't imported them, we directly re-exported them.If you have to use the values in the file, you would also have to import them.
// 👇️ import (only if you need to use them in index.js) import multiply, {increaseSalary, department} from './another-file.js'; // 👇️ re-export export {increaseSalary, department, default} from './another-file.js'; console.log(multiply(5, 5)); // 👉️ 25 console.log(department); // "accounting" console.log(increaseSalary(100)); // 👉️ 200
The syntax for re-exporting members of another module is:
// 👇️ re-export NAMED exports export {increaseSalary, department} from './another-file.js' // 👇️ re-export DEFAULT export export {default} from './another-file.js'
The two lines from the example above can be combined into a single line if you're re-exporting members of the same file.
// 👇️ re-export NAMED exports export {increaseSalary, department} from './first-file.js' // 👇️ re-export default export export {default} from './second-file.js'
You could then import the re-exported members from the same module.
// 👇️ default and named imports (all from index.js) import multiply, {increaseSalary, department} from './index.js'; console.log(multiply(10, 10)); // 👉️ 100 console.log(increaseSalary(100)); // 👉️ 200 console.log(department); // 👉️ "accounting"
The pattern you often see is - re-export members of different files from a file
called index.js
. The name index.js
is important because you don't have to
explicitly specify the name index
when importing (in some environments).
'./index.js'
and are not allowed to import from './
.In general it's better to be explicit and import from './utils/index.js'
,
rather than ./utils
, because this syntax is supported in more environments and
is more obvious and direct.
Many of the files you use might make use of multiple utility functions that have
been extracted into separated files, and you might not want to have 5 lines of
imports just for utility functions or constants - this is when re-exporting from
an index.js
file comes in.