F1V3.0-15 前端开发环境搭建

1 引言

前端这里主要针对两种角色进行环境搭建配置：服务器环境搭建、个人机环境搭建。

2 个人机环境搭建

2.1 nginx配置搭建

在对前端进行开发时，需要nginx对静态资源和服务地址进行路由索引，首要的任务是对nginx进行配置。

在nginx官网对nginx进行下载。

Nginx详细配置详见前端微服务改造1–Nginx F1平台3.0快速配置

2.2 Sublime Text编辑器使用

前端开发建议使用Sulime Text编辑器，Sublime Text 是一个代码编辑器，也是HTML和散文先进的文本编辑器。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

在Sublime Text官网进行下载。

Sublime Text编辑器具体使用，快捷键使用，以及推荐插件及功能详见Sublime Text介绍和使用配置

3 服务器环境搭建

3.3 Nodejs环境配置

在使用平台对项目前端进行开发时，需要使用到Gulp和Webpack等Node框架，故在框架使用前需要安装Node环境。

Node环境配置详见NodeJs框架

3.4 Gulp环境配置

对于平台开发人员和项目开发人员来说，都需要使用Gulp对开发环境中的进行打包。这里要求每个平台开发人员都要有一套Gulp打包环境，项目中至少有一套打包环境，保证在进行开发之后可以正常的打包，转到生产环境。

Gulp环境具体配置详见前端微服务改造–Gulp针对F1平台的前端资源打包说明

3.5 Webpack环境配置

平台开发人员对平台组件等进行开发之后，需要对平台的代码打包，这里需要Webpack来处理。

Webpack环境具体配置详见Webpack使用说明。

在对平台代码进行调试时，无法再每修改一次就打一次包，这样很影响效率，所以这里我们建议在对平台代码调试的时候，使用热更新方法，即修改代码之后调试页面可以实时看到修改效果。

具体热更新方式详见前端微服务改造2–gulp针对F1平台的前端资源打包说明