Automatically import modules with the same file suffix

Question

I am currently setting up my Redux store and importing many different reducer files. This is beginning to look messy and wanted to know if there was a way to import all modules with the same file suffix. So currently...

import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;

Is there a way that I can import all 'reducer.js' files instead of manually import each module separately when each of the file paths is different?

Possible duplicate of [import modules from files in directory](https://stackoverflow.com/questions/29722270/import-modules-from-files-in-directory) — Shilly, Jul 06 '18 at 13:51
It's the same question no? The answer is no. You're stuck with either creating an intermediate file that imports the list and exports it again as methods so you can write it in one statement. Or by using that babel plugin that allows you to use wildcards in import statements. — Shilly, Jul 06 '18 at 13:54
Okay cool, so babel is my answer? That helps thank you @Shilly — georgeperry, Jul 06 '18 at 13:55
Either the babel plugin or making the intermediate file. I'll post it below. — Shilly, Jul 06 '18 at 13:56

score 1 · Accepted Answer · answered Jul 06 '18 at 13:59

As written in the duplicate question:

If you create an extra file reducers.js, with this definition:

import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;
export {
  reducerOne,
  reducerTwo,
  reducerThree,
  reducerFour,
  reducerFive,
  reducerSix,
  reducerSeven
};

Then you can use this in your main file:

import { reducerOne, reducerTwo, reducerThree, reducerFour, reducerFive, reducerSix, reducerSeven } from '../reducers.js';

You basically 'bundle' all your reducers into one file with only one path. And since it's very few syntax, automating it to create such a file is trivial.

Automatically import modules with the same file suffix

1 Answers1