在（Vue，React）中导出具有子模块的模块的最佳方法是什么[关闭]

Question

使用index.js导出包含子模块的模块的最佳方法是什么。 很长一段时间以来，我都遵循一种模式，在我的项目（Vue或React）上命名和保存我的Web组件。 但是我想要一种更实用的方法来使用单个索引导出模块，以避免出现如下情况：

我的模式

import PostDetail from 'src/views/posts/PostDetail'

Answer 1

这是个有趣的问题。 我已经有一段时间考虑过同样的问题了，尝试了一些不同的方法并找到了一个似乎对我来说非常好的方法。

1. 将可重复使用的组件放在一个地方。
2. 将使用可重用组件的布局包装器放在一个位置。

1.可重复使用的组件

所有可重用的组件都包括自定义按钮和独立组件，如Posts，如上所述。 如果您的帖子可以包含详细信息和注释，请保留两个单独的组件PostDetails和PostComments ，并在单独的Post组件中导入和组合它们。 即插即用是关键。 。 您可以在这里选择两种结构，

components/PostDetails

components/PostComments

components/Post

要么

components/Post/PostDetails/...

components/Post/PostComments/...

并将它们导入components/Post/Post.js

但是您的默认导出将位于将导出Post.js components/Post/index.js中。 这样你就可以确定，Post组件是组合和可重用的，可以在任何页面/布局中作为components/Post导入。

2.布局包装

你的所有页面/布局都在这里。 典型的例子是主页，关于导入组件并将它们放在正确位置的页面。

这通常类似于文件夹名称，如页面或容器，具体取决于项目。

pages/home

pages/about

我有一些代码回购可以帮助您更好地掌握这个项目结构。

投资组合

React-Redux Boilerplate

Answer 2

我们对我的应用程序使用react和redux 。 我们主要尝试在代码文件夹结构中遵循模块化设计。

模块本身就是独立的，可以单独使用。 如果模块的某些部分需要在模块本身之外使用，我们只通过它的index.js公开这些文件

这是我们遵循的：

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

每个模块在其根目录下都有一个index.js ，它公开了在其他模块中使用的所需文件和函数。

这种结构使得本地文件交互顺畅，因为imports很短，清晰可见，并且名称间隔（基于功能）来自它。