이 글은 프론트엔드 프로젝트에서 디렉토리 구조를 최적화하는 방법을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
이제 프런트엔드 프로젝트는 점점 더 대규모 프로젝트처럼 변하고 점점 더 복잡해지고 있습니다. 팀 구성원 간의 협업을 처리해야 하며 비즈니스 세분화도 필요합니다. 유지 관리 비용을 줄이고 고효율 개발을 유지하기 위한 분리.
프로젝트 디렉터리 구조를 최적화하는 것은 이 목표를 달성하는 한 가지 방법입니다. 일반적으로 다중 페이지 프로젝트이든 단일 페이지 응용 프로그램이든 또는 둘 다이든 디렉토리 구조는 다음 두 가지 방식입니다.
유형 그룹화(파일 유형, 비즈니스 유형 등에 따라 그룹화)
모듈 차단(페이지 모듈, 비즈니스 모듈 등으로 차단)
이 방법은 파일 유형, 비즈니스 유형 또는 기타 유형별로 그룹화하는 것입니다.
다중 페이지 프로젝트
|-- src/ 源代码目录 |-- html/ html 文件目录 |-- page1.html page1 页面的 html 文件 |-- module1/ 子目录 |-- page2.html page2 页面的 html 文件 |-- ... |-- ... |-- js/ js 文件目录 |-- common/ 公共文件目录 |-- page1/ page1 页面的 js 目录 |-- module1/ 子目录 |-- page2/ page2 页面的 js 目录 |-- ... |-- ... |-- css/ css 文件目录 |-- common/ 公共文件目录 |-- page1/ page1 页面的 css 目录 |-- module1/ 子目录 |-- page2/ page2 页面的 css 目录 |-- ... |-- ... |-- less/ less 文件目录（内部结构跟上面类似） |-- images/ 图片文件目录（内部结构跟上面类似） |-- data/ api-mock 文件目录（内部结构跟上面类似） |-- ...
단일 페이지 신청
|-- src/ 源代码目录 |-- components/ 组件文件目录（如 react） |-- common/ 公共文件目录 |-- page1.js page1 页面的组件文件 |-- module1/ 子目录 |-- page2.js page2 页面的组件文件 |-- ... |-- ... |-- services/ service 文件目录 |-- service1.js page1 页面的 service |-- module1/ 子目录 |-- service2.js page2 页面的 service |-- ... |-- ... |-- models/ model 文件目录 |-- model1.js page1 页面的 model |-- module1/ 子目录 |-- model2.js page2 页面的 model |-- ... |-- ... |-- ... |-- images/ 图片文件目录（内部结构跟上面类似） |-- data/ api-mock 文件目录（内部结构跟上面类似） |-- ...
이 방법의 장점은 파일 분류와 기능 분류를 매우 명확하게 할 수 있고, 글쓰기 스타일을 제한할 수 있다는 점입니다. 팀원의 정보(디렉토리 구조)도 어느 정도 명확하고 이해하기 쉽습니다. 하지만 이 방법에는 다음과 같은 명백한 단점이 있습니다.
특정 페이지나 기능 블록에 어떤 파일이 있는지 파악하는 것은 쉽고 빠르지 않습니다.
다른 페이지로 이동해야 하기 때문에 페이지 생성, 업데이트 및 삭제가 비효율적입니다.
페이지를 편집할 때 편집기의 파일 탐색에서 각 파일을 확장해야 하고 탐색이 매우 복잡하기 때문에 개발 효율성이 높지 않고 피곤해지기 쉽습니다. 긴.
그래서 프론트엔드 프로젝트에서는 대부분의 경우 이 디렉토리 구조를 사용하지 않을 것입니다.
이 방법은 페이지 모듈, 비즈니스 모듈 또는 기타 유형으로 구분됩니다.
다중 페이지 프로젝트
|-- src/ 源代码目录 |-- page1/ page1 页面的工作空间 |-- index.html html 入口文件 |-- index.js js 入口文件 |-- index.(css|less|scss) 样式入口文件 |-- html/ html 片段目录 |-- js/ js 文件目录 |-- (css|less|scss)/ 样式文件目录 |-- data/ 本地 json 数据模拟 |-- images/ 图片文件目录 |-- components/ 组件目录（如果基于 react, vue 等组件化框架） |-- ... |-- module1/ 子目录 |-- page2/ page2 页面的工作空间（内部结构跟 page1 类似） |-- ... |-- html/ 公共 html 片段 |-- less/ 公共 less 目录 |-- components/ 公共组件目录 |-- images/ 公共图片目录 |-- data/ 公共 api-mock 文件目录 |-- ...
단일 페이지 애플리케이션
|-- src/ 源代码目录 |-- page1/ page1 页面的工作空间 |-- index.js 入口文件 |-- service.js |-- model.js |-- data/ 本地 json 数据模拟 |-- images/ 图片文件目录 |-- components/ 组件目录（如果基于 react, vue 等组件化框架） |-- ... |-- module1/ 子目录 |-- page2/ page2 页面的工作空间（内部结构跟 page1 类似） |-- ... |-- images/ 公共图片目录 |-- data/ 公共 api-mock 文件目录 |-- components/ 公共组件目录 |-- ...
이 방법은 "유형 그룹화" 문제를 방지하지만 몇 가지 단점도 있습니다.
거의 몇 가지 단점이 있습니다. 그룹 구성원에 대한 제약, 각 작업 공간 아래의 디렉터리 구조는 완전히 다를 수 있습니다.
작업 공간 아래의 디렉터리 구조는 정의하기 쉽지 않으며 개발자에 대한 요구 사항도 더 높습니다.
몇 가지 단점이 있지만 빌드 도구로 해결할 수 있으므로 일반적으로 이 디렉토리 구조를 선택합니다.
여러 페이지 프로젝트의 작은 단일 페이지 응용 프로그램과 같이 많은 경우 이 두 가지 방법을 함께 사용할 수 있습니다.
아아아아위 내용은 프런트엔드 프로젝트의 디렉터리 구조를 최적화하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
