git 创建webpack项目_前端工程项目结构

工程结构指的是代码组织方式，比如常见的组织方式，核心代码放在src，公共库放在lib，测试代码放在test等等。

所以如果有100个团队应该就会有100种方式了。但是今天讨论的主题不是哪种组织方式最好，而是这些组织方式背后的主要目的。

自从NodeJS面世，前端工程化取得了巨大的进步，不仅出现了grunt、gulp这样的任务执行器，还有webpack、rollup这样的构建工具。所以，工程组织结构不再重要，只要配置好你的构建工具，包括项目的入口，那么你就可以只需要聚焦你的精力在业务上就可以了。

所以我们的目标就是，隔离变化，沉淀共识。

怎么理解这句话呢？

前端直接面向用户，会有各种各样的需求，这些需求不全是一样的，也并非完全不一样。

所以不同的项目我们可以用“平铺”的方式去管理它们，比如现在流行的Nuxt框架的多页面结构，就是使用“平铺”方式，把多个项目用多个页面去表示。对于公共部分，比如通用UI组件、网络请求组件、监控组件、上报组件等等，就会抽离出业务项目，放到公共库里。

事实上，我所在的项目组就是用类似Nuxt框架去组织代码的，不过是内部自研的，有些许不同。重要的是，团队里需要约定好在哪个目录下存放项目。因为webpack提供了API接口，所以其实我们是可以自定义热更新逻辑（这一点会在后面的文章《前端开发环境》里继续讲述）。

因为开发过程中我们有如下的需求：

1. 统一处理配置，包括开发阶段和上线阶段
2. 把一些说明文档聚合在一起
3. 把开发过程中用到的一些脚本聚到一起，比如本地运行脚本、构建脚本、git钩子脚本、ci脚本等等
4. 管理脚手架
5. 公共模块聚合
6. 需求项目聚合
7. 项目根目录下还有一些工具配置文件，如eslint、ci、git等等

所以，一般的前端工程结构大致如下：

configs/
docs/
lib/
projects/
templates/
scripts/
.gitignore
.git-commit-template
.eslint
.ci

前端架构和需求的关系：