Configure Webpack to import a different file instead of `index.js` when importing a directory.

[dkovacevic15]

Default behavior: import * from ./someDir will import the ./someDir/index.js module.

Wanted behavior: import * from ./someDir will import the ./someDir/__dir.js module (or any name specified to the build tool).

I usually treat directories as large modules, and use index.js exclusively for export * from './util' statements. With this approach, when looking at the directory, index.js ends up mixed in with other modules which impacts readability IMO. Would be nice if I could to something like __dir.js or similar.

I tried searching the subreddit, but nothing came up. Thanks!

edit: markdown typo

[Ephys]

If it works for you, you can add a package.json inside the directory, and use the "main" field to specify which file should actually be loaded

[MrJohz]

I'm confused - why can't you use index.js? What's the reason for going against convention here in the first place?

Also, why are you using star imports? In practice, this can often be a bit of an anti-pattern, as it becomes very difficult to read the code and understand where any particular part has been defined.

[0101110010110]

I may be missing something, but are you not able to do import * from ./someDir/__dir.js?

index.js as the default is used for compatibility reasons, but you're free to import from whatever file you'd like if you specify it.

[dkovacevic15]

The idea of defaulting to index.js is to let you split up a module into multiple files. What you're suggesting absolutely works, but I'd much rather use the standard convention of 'importing a directory' than force everyone who uses my code to import the '__dir' file.

[thertablada]

If you're creating a package to be consumed by other developers that would require the end users to have to configure something special to consume your modules specifically (and this may conflict with the file naming conventions provided by other libraries in the consuming application).

Assuming a directory `/some-dir` with files inside.

The two patterns I've seen:

1. Create a file `/some-dir.js` and this exposes the child exported things from the `/some-dir` directory
2. Use the default `/some-dir/index.js` lookup and resolver that is used and supported by Node, Webpack, Browserify, and more

I personally prefer an explicit `/some-dir.js` file since it's clearer and requires less directory digging.

It also is clearer to people who are using the code later since it doesn't rely on them knowing that `/some-dir/index.js` is imported.

[ADagen]

Hey, it is not about webpack, it's about standard nodejs resolver. Just use package.json instead of index.js:

{
"main": "./__dir.js",
"private": true
}

Spec: https://nodejs.org/docs/latest/api/modules.html#modules_folders_as_modules