目前来说,按照概念,“前端工程”至少应该是要解决以下几个方面的问题:
1、提供项目开发所需的一整套运行环境,这和IDE作用类似,由于前端开发的特殊性,这个“IDE”是一个集成了多种语言和工具的开发环境;
2、资源管理,包括资源获取、依赖处理、实时更新、按需加载、公共模块管理等。这里也可以看成是组件化和模块化;
3、打通研发链路的各个环节,debug、mock、proxy、test、build、deploy等,达到一次安装,自动打包的目的。
4、解决前端性能问题,尤其是移动前端页面的性能优化,实现组件化开发。
所以,一个典型的webapp项目目录是这样的(注:此目录图来自基于webpack搭建前端工程解决方案探索):
- webapp/ # webapp根目录
- src/ # 开发目录
+ css/ # css资源目录
+ img/ # webapp图片资源目录
- js/ # webapp js&jsx资源目录
- components/ # 标准组件存放目录
- foo/ # 组件foo
+ css/ # 组件foo的样式
+ js/ # 组件foo的逻辑
+ tmpl/ # 组件foo的模板
index.js # 组件foo的入口
+ bar/ # 组件bar
+ lib/ # 第三方纯js库
... # 根据项目需要任意添加的代码目录
+ tmpl/ # webapp前端模板资源目录
a.html # webapp入口文件a
b.html # webapp入口文件b
- assets/ # 编译输出目录,即发布目录
+ js/ # 编译输出的js目录
+ img/ # 编译输出的图片目录
+ css/ # 编译输出的css目录
a.html # 编译输出的入口a
b.html # 编译处理后的入口b
+ mock/ # 假数据目录
app.js # 本地server入口
routes.js # 本地路由配置
webpack.config.js # webpack配置文件
gulpfile.js # gulp任务配置
package.json # 项目配置
README.md # 项目说明
这个目录是由开发环境(配置工具)自动生成的,这个项目目录基本上体现了资源管理、模块管理、调试、打包、发布这几个重要环节。