Andrew's Digital Garden

Barrel files in Javascript

A barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.

It's easier to import from a module in one statement, rather than three separate import statements.

import { FooComponent, BarComponent, FooBarComponent } from 'your-module';`

Barrel files are named index by convention.

A nice side-effect is that it avoids duplicate names of the folder and the component, e.g. import { Component } from '../Component/Component'

Note that you can't use the barrel export inside your module, as it will lead to circular dependencies. Similarly, importing from a barrel file can lead to adding unnecessary code to your bundle. As far as I understand, one import leads to effectively importing everything within the barrel file. [[20220912113840-tree-shaking]] is a often used as a solution to this problem.

https://github.com/basarat/typescript-book/blob/master/docs/tips/barrel.md

[[20210726162517-default-exports-js]]

[[js]] [[ts]]

Barrel files in Javascript