0

Often times I see the following directory structure and import pattern in Javascript projects:

ClassName/index.js pattern

RepoRoot
|-src
  |-index.js
  |-ClassName
    |-index.js
    |-SupportingClass.js

src/ClassName/index.js

import { SupportingClass } from './SupportingClass';
export class ClassName {
  // Implementation
}

src/index.js

import { ClassName } from './ClassName';

This is all fine and dandy. It allows for a much cleaner import of the ClassName class. However I'm not a fan of the name of the class file index.js not having the same name as the class's name. It:

  1. Makes it harder to locate the file in a file name search (Command+P in VS Code)
  2. You end up with just a very unhelpful index.js in the file tab in the IDE (yes I know some IDEs are smart enough to add a bit more context when you have more than one file of the same name open. That helps, but isn't a real solution imo)
  3. Other files that aren't the indexes get much more descriptive names: SupportingClass.js, someUtils.js, etc.

ClassName/ClassName.js pattern

RepoRoot
|-src
  |-index.js
  |-ClassName
    |-ClassName.js
    |-SupportingClass.js

src/ClassName/ClassName.js

import { SupportingClass } from './SupportingClass';
export class ClassName {
  // Implementation
}

src/index.js

import { ClassName } from './ClassName/ClassName';

This solves all of the problems I laid out, but makes the import of ClassName a bit duplicative. Probably not a big deal for most people especially with your IDE being able to auto import things for you nowadays.

However...

Just how webpack & node.js understand out of the box how to interpret the import path:

  • ./ClassName as ./ClassName/index.js

Is there a setting or plugin that allows for it to interpret:

  • ./ClassName as ./ClassName/ClassName.js?

I've been wondering for years if such a thing existed but could never really find any literature on it. Curious if anyone here knows of anything.

Frank Weindel
  • 1,212
  • 1
  • 13
  • 31

1 Answers1

0

You are dealing with named imports and default imports, more details on this discussion can be found here:

How to import both default and named from an ES6 module

From your situation (I haven't tried with subfolders, but it should work), you may want to organize your files as such:

RepoRoot
|-src
  |-index.js
  |-ClassName
    |-ClassName.js (named module)
    |-SupportingClass.js (named module)
    |-index.js (default modules)

And then you can easily import your stuff in src/index.js such as:

import ClassName, SupportingClass, { otherValues } from './ClassName'
Ernani Joppert
  • 503
  • 5
  • 12
  • Ah right, I should've mentioned that that's what most people end up doing to achieve this. But I'm really looking for a solution that doesn't involve having to maintain an unneeded index.js file in every directory. – Frank Weindel Aug 20 '21 at 14:02
  • If you don't need default modules, you can use just named one, go ahead and try deleting index.js file from ClassName subfolder and remove the , { otherValues } from your import statement. – Ernani Joppert Aug 20 '21 at 14:04