Javascript 导出（Vue、React）中包含子模块的模块的最佳方法是什么

使用

index.js

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

我的模式

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

---

这是一个有趣的问题。我有一段时间也在想这个问题，尝试了一些不同的方法，最终找到了一个对我来说似乎很好的方法

将可重用组件放在一个地方

将使用可重用组件的布局包装放在一个位置

1。可重用组件

所有可重用组件都包括自定义按钮和独立组件，如您提到的POST。如果您的帖子可以包含详细信息和注释，请保留两个单独的组件

postdestails

和

PostComments

，并将它们导入并组合到一个单独的

Post

组件中即插即用是关键。。你可以在这里选择两种结构

components/PostDetails

组件/后组件

components/Post

或

components/Post/PostDetails/…

components/Post/Post命令/…

并将它们导入

components/Post/Post.js

但是您的默认导出将在

components/Post/index.js

中，它将导出

Post.js

。通过这种方式，您可以确保Post组件是组合的和可重用的，并且可以作为

组件/Post

导入到任何页面/布局中

2。布局包装器

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

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

页面/主页

pages/about

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

---

我们在我的应用程序中使用

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

，它公开了在其他模块中使用的所需文件和函数

这种结构使本地文件交互变得平滑，因为导入的

文件很短，清晰可见，并且名称间隔（基于功能）很长