es6项目模仿学习记录：

一、使用的技术

es6 + node + gulp + babel +webpack、webpack-stream

二、技术介绍

es6：

node：

express：node框架

gulp：任务自动化，

babel：编译工具

webpack：模块化

webpack-stream ：处理gulp

三、环境搭建

（1）node环境搭建（Windows系统下）

1. node下载地址：http://nodejs.cn/download/

2. 根据系统位数、选择msi版（安装简单）安装，如下图

3.一路下一步进行安装

4.检查安装，在cmd命令下输入 node -v 命令显示如下，表明安装成功。

（2）安装express框架

1.下载express：通过node下的npm命令，在cmd 下输入 npm -g express命令进行下载，该命令会将express下载系统盘符的用户下的node_modules文件夹下。

2.将express使用安装器装载起来用于创建新网站环境，目的是使用 express 命令。在cmd下输入 npm -g express-generator 命令，如下图表示命令执行成功：

3.检查安装，在cmd命令下输入 express -v 命令显示如下，表明安装成功。

（3）通过npm安装gulp

在cmd下输入npm install gulp -g 命令（全局安装）进行安装即可

项目构建

1.项目结构如下图：

说明：

1.app目录：该目录主要是用来存放前端的文件，其中view存放时模板文件，该文件是以ejs为后缀的文件（express的模板引擎使用的是ejs）。

2.server目录：该目录主要用于存放服务器的配置文件，该目录下的所有目录及文件需要使用命令进行生成。方法：在cmd命令下进入到es6项目的server目录，使用 express -e .命名进行创建express，注意命令中的“.”表示当前目录。如下图：

接着输入 npm install 命令安装npm，在server下生成package.json文件，如下图：

3.tasks目录：该目录用于保存自动化配置脚本文件，手动创建就行。

4.根目录下创建package.json文件（用于项目安装npm依赖包的配置），可以手动创建也可用使用命令创建。此处使用 npm init 命令创建，一路回车确认就行，最后一步输入 y 如下图：

根目录下创建babel编译的配置文件 ， .babelrc 文件，再创建gulp配置文件，gulpfile.babel.js文件（使用es6编写脚本）。