CODEWITHSUNDEEP
javascriptwebpackbabeljs
Christian Engel
Christian Engel

Reputation: 3778

Do not import "index.js" on folder import?

I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:

/components
    /Button
        /index.js
        /style.scss
    /Checkbox
        /index.js
        /style.scss

I can easily import the components like this:

import Button from 'components/Button';
import Checkbox from 'components/Checkbox';

But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.

What I did now is changing my folder structure to this:

/components
    /Button
        /Button.js
        /Button.scss
    /Checkbox
        /Checkbox.js
        /Checkbox.scss

Which solved that problem and I can see directly where each opened file belongs to.

However, now my component imports look a bit... verbose:

import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';

Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.

You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.

Upvotes: 2

Views: 1059

Answers (1)

Christian Engel
Christian Engel

Reputation: 3778

I went with the following solution:

In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:

import module from './Button.js';
export default module;

This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.

I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.

Upvotes: 1

Related Questions