小编1. 为什么学习 ES6 须要构建环境

1. 由于 ES6 一些语法, 在浏览器中是不能直接运行的 。
2. 环境构建内容:

1. 根本架构 1. 项目须要放置那些目录 。
2. 那些目录放置那些文件 。
3. 思考为什么这样放, 它的合理性在哪里 。
4. 结合模块化的思想, 如何去创建一个前端项目的架构组成 。
2. 任务自动化 (gulp) 1. 大略来说便是自动化编译, 如 sass/less 自动编译为 css 。
3. 编译工具 (babel / webpack) 1. 自动化须要编译工具去完成 。
4. 代码实现 1. 由于代码太多不才面会有专门的一篇文章去展示代码以及讲授代码的含义 。
3. 任务自动化 gulp:

1. 什么是任务自动化 1. 减少人工操作, 让机器监听我们所有的操作, 让其自动相应 。
2. 什么是 gulp 1. 普通来说便是一个办理自动化的一个工具 。
2. gulp 通过 stream 流的办法, 操作文件非常的快 。
3. gulp 的浸染 1. 完成自动化, 帮助我们事情流程顺利完成 。
4. 理解如何利用 gulp 完成任务自动化 1. 去 gulp 中文网理解 API 2. 理解 gulp 合营利用的插件 。
4. 编译工具:

1. 什么是 babel 、 webpack 1. babel: 可以理解为 JavaScript 的编译器(ES6 是不能直接在浏览器上运行的, 它须要编译, 而编译的工具便是 babel); 2. webpack: 办理模块化 。
2. babel 的核心用法 1. 办理兼容性问题 、 如何做编译 、 该当引用那些包 。
3. 理解 webpack 以及 webpack-stream 的浸染 1. webpack-stream 是对 gulp 的一个支持插件; gulp 是通过二进制流的办法去操作的, webpack 在 gulp 上利用的便是 webpack-stream 去操作的 。
5. 环境构建的详细思路:

1. 完成目录构造2. 自动构建3. 做事器搭建如图所示:

5.1 构建思路 构建 3 个版块

1. 构建思路 构建 3 个版块 。
1. 放置我们前端代码这一块 -- app ; 包括 js/css/以及一些模板 。
1. css: 放置 .CSS 文件目录 2. js: 放置 .JS 文件目录 1. class: 放置 '类' 文件目录 1. test.js: 初始类文件 2. index.js: 初始入口文件 3. views: 放置 .html 模板目录 1. error.ejs: 初始缺点模板文件 2. index.ejs: 初始入口模板文件 1. 利用 .ejs 文件而不是利用 .html 文件, 是由于创建做事器的代码是通过 express nodeJS 框架来做的; express 它所利用的引擎便是 .ejs 模板引擎 。
2. 放置做事器代码 -- server; 供应我们真实的数据 。
1. 我们在创建 server 的过程中须要利用一个工具, 即 express 脚手架工具(利用 express 的条件是已经安装了 nodeJS) 。
2. Node.js 安装包网址: http://nodejs.cn/download/ 3. express 脚手架利用流程: 1. express -e . : express 脚手架启动命令; -e 表示我要利用 ejs 模板引擎; . 表示在当前目录实行 。
2. 在当前目录实行 cnpm i (此时做事代码已经安装完成)。
3. 前端代码编译, 做事器定时刷新 '构建工具'-- tasks; 起到一个赞助浸染的模块 。
1. 在当前目录创建一些任务的 .js 文件: 文件的合并 、 脚本的编译 、 模板的自动更新 。
如图所示:

5.2. 创建一个 package.json 文件

1. 创建方法: 1. 手动创建 2. 自动创建 1. cnpm init (初始化 package.json 文件); 2. 当这个文件创建完成之后, 我们就可以通过 cnpm i 来安装我们须要的依赖包 。
5.3 创建一个设置 babel 编译工具的配置文件

1. 命令行操作: touch .babelrc 1. .babelrc 文件名是固定的, 我们不能随便修正, 由于 babel 进行编译的时候会自动探求 .babelrc 文件, 如果没有找到就无法读取配置内容 。
5.4 创建一个 gulp 配置文件

1. 命令行操作: touch gulpfile.babel.js 1. 为什么没有按照官网去创建一个 gulpfile.js 文件, 而是创建了一个 gulpfile.babel.js 文件; 这是由于我们的项目利用的都是 ES6 语法, 如果这里不该用 gulpfile.babel.js 的话, 那么在实行 gulp 脚本的时候, 它是会报错的 。
2. 安装 express-generator 脚手架 1. sudo cnpm install -g express-generator 2. express --version 检测安装是否成功 。
6. 知识点扩展: Mac 命令行利用积累

1. mkdir name 创建文件夹2. touch name 创建文件3. cd ../name/4. express -e .5. cd . && npm install6. cd . 当前目录

之前有整理过部分知识点, 现在将整理的干系内容, 验证之后逐步分享给大家; 这个专题是 “前端ES6根本” 的干系专栏; 不积跬步，无以至千里, 戒焦戒躁 。

es6编译phpES6基本情况构建义务主动化办事器搭建 SQL

如果对你有所帮助，喜好的可以点个关注; 文章会持续打磨 。
有什么想要理解的前端知识吗? 可以评论区留言, 会及时跟进分享所干系内容 。
整理知识点不易, 每次都是在事情繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己揭橥的文章给大家造成误导 。
如有问题还望不吝见教，本人会及时变动 (本文原创, 如需转载，请注明出处) 。