开启一个新项目

工作经验

svn 上建立

在 projectFE 上建立该项目文件夹，在下面建立 trunk 和 branches 文件。

未上线时，为了减少复杂度，在 trunk 上进行开发。

上线后，有新功能，在 branches 上建立新分支进行新功能开发。有 bug 在 trunk 紧急修复，并 merge 到在开发新功能的 branch 上。

需要将 .idea, node_modules, 前端第三方库 ignore 出版本维护。

管理前端框架和库

第三方库及自己发布的成熟稳健的库，应该排除在源代码之外。

目前有两种方式管理 bower 和 npm

bower 虽然已经停止维护，但是已经健壮可用，配合 require.js 包管理 + gulp 进行构建使用，比较方便。

npm 更新，既可以管理前端库(--save，配合 webpack 构建工具来使用)，也可以维管理构建流程(--save -dev)。

构建流程

构建工作主要有以下内容，配置好后，放入 package.json 维护，并写入 README.MD。

目前我们常用的技术有三套：用 npm scripts 组织起各种基于 node.js 的 cli 工具；用 [gulp] (https://www.gulpjs.com.cn/) 组织 gulp 插件；基于 webpack进行构建 。

• npm scripts 组织起普通的 cli 工具，主要通过 cli 参数来配置，无学习成本，简单，但维护稍显麻烦。
• gulp 的自定义性强，自由，插件丰富，维护简单。
• webpack 提供了常用的前端开发的工作流程，方法标准，功能强大。

开发环境

• 模块管理（如果使用 require.js 不需要进行构建可以直接使用），使用 webpack 需要生成 map 以便代码可调试
• ejs 编译，提供一些 DEVELOPMENT 环境下的参数来生成 html
• 样式文件编译，建议生成 map 文件以供调试（也可以不用，css 的 map 对调试影响不大）
• 开发调试 server：
  
  • 提供 mock 和 proxy 的 ajax api 接口
  • 提供静态资源服务

生产环境

• js 打包，minify, uglify，文件名 hash 化
• ejs 编译，提供一些 PRODUCTION 环境下的参数，将 js 和 css 的 hash 文件名自动写入，html 的 minify
• 样式文件编译， minify，文件名 hash 化
• 图片等，一般用雪碧图的形式，不建议使用 base64 编码（不利于利用缓存）
• 清空 dist 并将构建后的文件放入该文件夹中

规划文件结构

项目目录下，应该从 src 构建到 dist 中。

src 目录下的规划有两种思路：

• 根据文件类型来进行划分
• 根据版块来进行划分

项目基本周期

• 在 local 上独立开发，具体参考项目文件夹下 README.MD 文件
• 将开发好的模块 build 到 dev 环境，进行联调，具体向运维了解操作方式
• 将可测试的项目 build 到 staging 环境，进行集成测试。通知运维进行操作
• 将测试合格的项目部署在 production 环境。由项目经理安排

整体跑通

写一些示例代码，将构建流程跑通。