Sometimes we have a long list of imports, with files that come from the same place, it makes our code noisy and a bit longer, something like:
import { BeersService } from './services/beers.service';
import { WhiskyService } from './services/whiski.service';
import { WineService } from './services/wine.service';
We can simplify it by exposing all files, from a single file, to point to all of them.
Create drinks.ts into the service directory and export all services.
export * from './beers.service';
export * from './whiski.service';
export * from './wine.service';
Now we can update our files, to the new path.
import { BeersService, WhiskyService, WineService } from './services/drinks';
Thanks @lissetteibnz , If rename the filename from drinks.ts to index.ts, Javascript understand the file index like the entrypoint for the directory, so it works only using the directory name.
import { BeersService, WhiskyService, WineService } from './services';
The code looks clean and easy to ready because all of them comes from the same place.
Photo by Marcin Jozwiak on Unsplash
Latest comments (5)
It could break project compilation in some cases.
Can bundler still do tree-shaking with import like this?
Yes, that's how library entry points are structured.
If you create a index.ts file with:
export * from './beers.service';
export * from './whiski.service';
export * from './wine.service';
After, you can import all services as:
import { BeersService, WhiskyService, WineService } from './services';
You don't need to add
index
Thanks! I update the post adding your buckets.