CODEWITHSUNDEEP
javascriptreactjsimportwebpackstructure
alanbuchanan
alanbuchanan

Reputation: 4173

Importing JavaScript files with the same name as directory they're inside

In my React and Webpack project, I have the following project structure of React components:

Component/
├── Component.jsx
├── index.jsx
└── styles.css

The index.jsx file simply imports and exports Component.jsx; the reason being that in files that require it, it allows the usage of the following:

import Component from '../Component'

as opposed to

import Component from '../Component/Component'

However this seems like it may be an unnecessary extra step which requires all new components to follow suit.

With this in mind, my question is: Can I have the best of both worlds? I want to be able to only have Component.jsx and styles.css in my directory, but not have to use the name twice in my import declaration.

Upvotes: 9

Views: 3796

Answers (3)

KyleMit
KyleMit

Reputation: 29927

One option for webpack users is to install directory-named-webpack-plugin

Install, and then add the following to Webpack's config file:

var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

resolve: {
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
}

When using require("component/foo") and the path "component/foo" is resolved to a directory, Webpack will try to look for component/foo/foo.js as the entry point.

Caution: While this approach does allow webpack to resolve filenames when building and bundling, your intellisense / tooling options are a different beast altogether. Unless they also have similar functionality, you may lose Go To Definition and Intellisense support by not providing the full reference statically.

Upvotes: 2

Edmundo Santos
Edmundo Santos

Reputation: 8287

If your folder already tells you which is the component name, you don't need to put it again in the file name inside it. I use this approach.

All modern editors already solves the trouble with two equal names (ComponentA/index.jsx and ComponentB/index.jsx) for us, by adding the folder name in the tabs.

Note that this is an Vue component, but it's the same thing for React.

Upvotes: 1

anvk
anvk

Reputation: 1201

Let me suggest you the following structure I personally like:

Your component tree structure (As an example every component has a different folder structure. It is up to you to keep it clean and tidy. Index.jsx in components folder just normalizes access to those components whoever needs them):

src/components/
    Butter/
        Butter.jsx
        index.jsx
    Beets/
        Beets.jsx
    Cabbage/
        index.jsx
    Meat.jsx
index.jsx

Content of components/index.jsx

export Butter from './Butter/index.jsx';
export Beets from './Beets/Beets.jsx';
export Cabbage from './Cabbage/index.jsx';
export Meat from './Meat.jsx';

Some container Borscht.jsx somewhere else in your project which uses those components

import {
    Beets,
    Cabbage,
} from 'src/components';

Upvotes: 7

Related Questions