关于前端项目组织与模块动态导出

关于前端项目组织与模块动态导出

在代码组织架构方面，可以按业务或者按功能来组织项目的结构。PS：以下是使用React项目进行演示。

按业务组织项目结构

根据页面来管理相关的代码，每一个page下都将会有service、store、types等等文件夹，相当于对一个页面进行业务集中管理。

优点：

1. 易于维护和扩展： 业务相关的代码被组织在一起，开发人员可以更容易地理解和维护这些代码。
2. 降低耦合性： 不同业务模块之间的依赖性较低，修改一个业务不会对其他业务产生影响。
3. 团队协作： 业务团队可以独立开发和测试其业务功能，提高团队协作效率。

缺点：

1. 跨业务功能复用困难： 如果有一些通用的功能需要多个业务模块共享，会比较困难。
2. 难以处理交叉业务逻辑： 涉及多个业务领域的功能会导致代码分散，难以管理。

按功能组织项目结构

只需要在modules文件夹下不断创建对应的ts模块文件，编写对应的服务即可。

优点：

1. 易于复用功能： 同一功能的代码被组织在一起，便于复用。
2. 结构清晰： 每个功能模块都有自己的目录和文件，使项目结构更清晰。
3. 便于单元测试： 功能模块独立性强，方便编写和运行单元测试。

缺点：

1. 耦合性高： 不同功能模块之间的依赖性增加，修改一个功能可能会影响其他功能。
2. 维护困难： 随着项目规模增大，功能模块之间的关联会变得复杂，维护成本也会提高。
3. 团队协作： 不同功能模块可能需要多个团队合作，沟通成本较高。

综上所述，按业务组织项目结构适合中小型项目或团队，有利于快速开发和维护业务功能；而按功能组织项目结构适合大型项目或需要频繁功能复用的场景，有利于功能模块的独立开发和测试。在实际应用中，也可以结合两种方式，根据具体情况进行灵活调整和优化。

小结

个人认为，可以使用按业务组织项目结构配合动态模块导入，能更好的进行开发。例如：动态导入views下的store文件夹下的ts文件

1. 在webpack中。

const sliceModules: any = []

const filesContext = require.context('../../views', true, /\/store\/.*\.ts$/)

filesContext.keys().forEach((key: string) => {
  const pathArr = key.split('/')
  const moduleName = pathArr[pathArr.length - 1].replace(/\.ts$/, '')
  sliceModules[moduleName] = filesContext(key).default
})

export default sliceModules

2. 在vite中。

const sliceModules: Record<string, any> = {}

function importAll(r: __WebpackModuleApi.RequireContext) {
  r.keys().forEach((key: string) => {
    const pathArr = key.split('/')
    const moduleName = pathArr[pathArr.length - 1].replace(/\.ts$/, '')
    sliceModules[moduleName] = r(key).default
  })
}

importAll(import.meta.glob('../../views/**/store/*.ts'))

export default sliceModules

3. 注册模块

import { configureStore } from '@reduxjs/toolkit'
import { TypedUseSelectorHook, useSelector, useDispatch, shallowEqual } from 'react-redux'

import TestReducer from '@/store/modules/test'

import sliceModules from './modules'

const store = configureStore({
  reducer: {
    test: TestReducer,
    ...sliceModules  // 动态注册模块
  }
})

export const shallowEqualApp = shallowEqual

export type RootState = ReturnType<typeof store.getState>
export type RootDispatch = typeof store.dispatch

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
export const useAppDispatch: () => RootDispatch = useDispatch

export default store