Nodejs: Good practice to just use the index.js to EXPORTS?

Question

I am seeing a pattern on some code I have inherited. Each directory has its JS file but there is also a index.js that actually exports items from the other JS file or files.

I presume this is done so you can see exactly what you are exporting, as the main exports are in index.js and the main code is in the other js file or files.

Is this correct? What is this pattern called ?

Should I continue using this pattern.

Answer 1

Let's say I have the following directory structure:

MyApp
├── app.js
├── test.js
├── package.json
├─┬ controllers
│ ├── index.js
│ ├── signIn.js
│ └── signOut.js
└─┬ views
  ├── index.js
  ├── signIn.js
  └── signOut.js

Placing the following code inside the index.js files...

// index.js
module.exports = {
  signIn: require('./signIn')
, signOut: require('./signOut')
};

...allows you to require an entire directory like...

// test.js
describe('controllers', () => {
  // ~/controllers/index.js
  const controllers = require('./controllers');

  it('performs a sign-in', () => {
    ...
  });
  it('performs a sign-out', () => {
    ...
  });
});

The alternative is to require each file individually.

Having an index.js in a directory is not required. You may require a file in a directory without an index.js all the same.

// app.js
const signOut = require('./controllers/signOut.js')

However, it gets tedious as your app grows. I use a package like require-directory as typing out each file in a directory is also tedious and somewhat error prone.

// index.js
module.exports = require('require-directory')(module);

/*

This yields the same result as:

module.exports = {
  signIn: require('./signIn')
, signOut: require('./signOut')
, ...
};

*/

Answer 2

ES6 CommonJS Module syntax

Given these two common types of structures...

MyApp
│ // files divided per type (controllers, components, actions, ...)
├─┬ actions
│ ├── index.js
│ ├── signIn.js
│ └── signOut.js
├─┬ components ...
├─┬ reducers ...
├─┬ pages ...
│ 
│ // files divided per component
├─┬ components ...
│ ├── index.js 
│ ├── SimpleComponent.jsx
│ ├── AnotherComponent.duck.jsx // redux "duck" pattern
│ ├─┬ ComplexComponent // large complex logic, own actions, stylesheet, etc.
│ ...
├─┬ pages ...
│ ├── index.js 
│ ├─┬ App
│ │ ├── index.js // not necessary here, matter of habit
│ │ ├── App.jsx
│ │ ├── actions.js
│ │ └── reducer.js
│ └─┬ Dashboard
├── another.js
...

You can simply import files in another.js like this

import {signIn, signOut} from './actions'
import {App} from './pages'
import {ComplexComponent} from './components'

instead of this (without index.js files)

import {signIn} from './actions/signIn'
import {signOut} from './actions/signOut'
import {App} from './pages/App/App' //notice the redundancy here
import {ComplexComponent} from './components/ComplexComponent/ComplexComponent'

More reading

ECMAScript 6 modules
import - JavaScript | MDN
Babel transpiler - brings the new imports to your browser now

Structuring React projects
React Redux "Ducks pattern" - a single file approach for components