跳到主要内容

目录规范

项目根目录​

project/
├── dist/
├── public/
├── src/
│   └── ...
├── tests/
|   ├── e2e/
│   └── unit/
├── .browserslistrc
├── .editorconfig
├── .env.development
├── .env.production
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .gitlab-ci.yml
├── .lighthouserc.js
├── commitlint.config.js
├── jest.config.js
├── package.json
├── package-lock.json
├── stylelint.config.js
└── tsconfig.json
  • dist/：项目构建结果
  • public/：静态文件，不受构建工具影响
  • src/：项目源代码，见 src 目录
  • tests/：测试源代码
    • e2e/：E2E 测试代码
    • unit/：单元测试代码
  • .browserslistrc：Browserslist 配置文件，配置浏览器兼容性
  • .editorconfig：编辑器配置
  • .env.development .env.production：环境配置
  • .eslintignore：忽略不需要 ESLint 检查的目录或文件
  • .eslintrc.js：ESLint 配置
  • .gitignore：忽略不需要 Git 提交的目录或文件
  • .gitlab-ci.yml：Gitlab CI 配置
  • .lighthouserc.js：lighthouse 检查配置，在 CI 环境下运行
  • commitlint.config.js：commitlint 配置
  • lint-staged.config.js：lint-staged 配置
  • jest.config.js：Jest 配置
  • package.json
  • pnpm-lock.yaml
  • stylelint.config.js：stylelint 配置
  • tsconfig.json：TypeScript 配置

src 目录​

project/
└── src/
    ├── assets/
    ├── components/
    ├── hooks/
    ├── layouts/
    ├── service/
    ├── store/
    ├── utils/
    ├── pages/
    ├── App.tsx
    ├── main.tsx
    └── react-env.d.ts
  • assets/：静态文件目录
  • components/：项目公共组件
  • hooks/：自定义 React Hooks
  • layouts/：页面布局组件
  • services/：HTTP 请求封装方法
  • store/：Zustand 相关代码
  • utils/：工具 JS 函数
  • pages/：页面组件
  • App.tsx：根组件
  • main.tsx：页面入口文件
  • react-env.d.ts：React Types 类型文件

模块的导出​

模块应该使用统一入口进行导出，以 components/ 为例

目录结构，注意这里 HelloWorld/ 下的 assets/ 为组件私有资源，components/ 为私有组件。我们会把 components/index.ts 作为统一的组件入口。

components/
├── HelloWorld/
|   ├── assets/
|   ├── components/
|   └── index.tsx
└── index.ts

在把模块导出成统一入口：

// components/index.ts
export { default as HelloWorld } from './HelloWorld';

在页面组件中使用：

import React from 'react';
import { HelloWorld } from '@/components';

const Page: React.FC = function Page() {
  return (
    <HelloWorld />
  );
};

export default Page;