What is the best way to export a module that includes submodules using an index.js. For a long time now I follow a pattern on naming and saving my web components on my projects (Vue or React). But I want a more practical way to export a module using a single index to avoid cases like the following:
My Pattern
import PostDetail from 'src/views/posts/PostDetail'
We use react and redux for my applications. We mostly try to follow modular design in code folder structure.
Modules happen to be independent in itself and can be used standalone. If some parts of modules are required to be used outside the module itself, we only expose those files through it's index.js
Here's what we follow:
Project-name
├── assets
│ ├── images
│ └── stylesheets
│ ├── components
│ ├── misc
│ ├── objects
│ └── vendor
├── build
│ ├── javascripts
│ └── stylesheets
├── src
│ ├── modules
│ │ │
│ │ ├── common
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ ├── module_1
│ │ │ ├── sub_module_1
│ │ │ │ ├── actions
│ │ │ │ ├── components
│ │ │ │ │ └── body
│ │ │ │ ├── helpers
│ │ │ │ └── reducers
│ │ │ └── sub_module_2
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ ├── module_2
│ │ │ └── components
│ │ ├── module_3
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ │ └── body
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ └── module_4
│ │ ├── components
│ │ └── helpers
│ └── pages
├── stories
│ ├── common
│ ├── establishment
│ │ └── visiting_clinics
│ ├── providers
│ │ └── body
│ └── relations
└── tools
Each module has an index.js at it's root directory which exposes required files and functions which is to be used in other modules.
This structure makes local file interactions smooth as imports are short, clearly visible and name spaced(functionality based) where it's coming from.