《ES6零基础教学 解析**项目》笔记(未完结)
第1章 课程介绍
构建工具【gulp / babel / webpack / npm】+ 基础语法 + 实战演练【express / mockjs】
2015年发布 ，ECMAScript2015 -> ECMA2015 ->ES6
ES6相对ES3、ES5有更强大的生产力，提高更大的效率，以下举例说明；
1.默认参数
//ES5
function hello(txt) {
txt = txt || "hello world";
}
//ES6，比ES5代码更加简洁
function hi(txt = "hello world") {}
2.字符串模板
ES5，依赖第三方库调用方法
var compiled = _.template('hello:<%= name %>');
compiled({name:'moe'});
ES6中，只用了变量和字符串实现了字符串模板
var name = 'moe';
var txt = 'hello ${name}';
3.解构赋值
4.箭头函数
5.Set 和 Map
6.异步操作
7.类与对象
8.模块化
第2章 项目构建
- 基础架构
- 任务自动化（gulp）
- 编译工具 babel(ES6 -> ES5) / webpack
- 代码实现：创建一个ES6前端工程、完成目录结构、自动构建、服务器搭建
- Gulp是一个任务自动化工具， 自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程，使开发更加快速高效；
- Gulp可以监听文件的修改动态，然后在文件被改动的时候执行一个或多个任务，并更新浏览器；
- 目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp。然Grunt任务拥有大量的配置，会引用大量你实际上并不需要的对象属性，因为Grunt比Gulp更加频繁地操作文件系统，所以使用数据流的Gulp总是比Grunt快；
- 数据流
- Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中；
webpack? webpack中文文档
- webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、打包、按需加载等。
项目目录构建
1.创建基本的文件夹，如上图所示
2.进入server目录，终端输入express -e .安装Node.js中的express框架
3.终端输入npm install安装npm，可以使用淘宝镜像安装，速度更快
4.进入根目录，终端输入npm init自动创建package.json文件，该文件记录项目所需要的各种模块以及项目的配置信息，有了这个文件后可通过npm install去安装npm依赖包了
5.创建.babelrc文件，是babel编译工具的配置文件
6.创建gulpfile.babel.js文件，由于后面构建的脚本都使用了es6，因此创建的是gulpfile.babel.js而非gulpfile.js，该文件是使用gulp任务自动化工具必须建立的主文件，用于定义任务
创建JS编译任务脚本
参考链接：https://blog.****.net/inthuixiang/article/details/82838969
下面的脚本创建详细见上述链接，另外在进行以下步骤前，请先看下面的坑！！！
1.创建args.js脚本，引入yargs包处理命令行参数，定义一些基本参数
2.创建scripts.js脚本，import引入的文件都要使用npm install 进行安装
3.创建pages.js脚本，处理模板ejs文件
4.创建css.js脚本，处理css文件
5.创建browser.js脚本，实现app/文件自动监听及server/public文件自动更新
6.创建clean.js脚本，在文件更新前清空指定目录server/public和server/views下的文件，避免覆盖
7.创建build.js脚本，将所有的任务都关联起来，处理包之间的顺序问题
8.创建default.js脚本，当在命令行中输入gulp 时，就会去找default.js文件并执行default任务
9.gulpfile.babel.js脚本中引入require-dir包将tasks脚本目录加载进来运行；当在命令行中输入gulp 时，首先找的就是gulpfile.babel.js文件，通过它去加载所有的脚本文件
10.配置.babelrc文件，否则没法使用babel
真的是被gulp坑惨了，gulp4版本和gulp3版本还是有较大改变的~
gulp坑：视频中作者安装的是gulp.3.9.1版本，现在已经是gulp4版本了，后来运行gulp一直提示以下错误~ 最后又重新创建了项目文件????~所以在此提个醒，还是与视频同步装gulp.3.9.1版本把
注意gulp有全局版本和项目/本地版本，要先装全局版本，再装本地版本哦！
直接安装gulp.3.9.1版本：cnpm install [email protected]，gulp -v 查看版本
gulp回退到旧版本：npm install [email protected] -g
我这里是将全局gulp和本地gulp都退回到gulp3.9.1版本，成功解决上述问题，然????????????~ gulp3版本遇到以下问题
来回折腾了好几遍，都primordials这个错误，最终发现是node 12版本与gulp 3 版本的冲突问题，把node 版本降到11.15.0 就解决了 ，心酸，折腾了一天！ 虽然还是有关于babel的问题，但暂时不影响gulp的运行
node降级参考：https://blog.****.net/Fabulous1111/article/details/84983869
强烈建议按视频中各种包的版本去下载安装，否则也会有狠多问题~
1.“express -e .” ，安装express
2.util 文件夹用于放置常见脚本
3.npm init 自动创建package.json文件夹，放置npm依赖包
4.touch .babelrc 创建babelrc配置文件
5.touch gulpfile.babel.js 创建gulp文件
待gulp成功运行后，来试下使用gulp --watch 进行监听
1.终端输入gulp --watch开始监听
2.编写app/views/index.ejs文件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>es6</title>
</head>
<body>
Look Me!
</body>
</html>
3.打开浏览器，输入http://localhost:3000，3000是express的服务器端口，浏览器中显示“Look Me”字样，修改index.ejs内容，手动刷新浏览器再次查看；
4.实现热更新，在server/app.js文件中找到app.use(express.static(path.join(__dirname, 'public')));，
在其后面添加一句app.use(require('connect-livereload')());，
记得安装connect-livereload包，npm install connect-livereload --save-dev
然后在index.ejs中随意修改内容，有没有发现浏览器自动更新啦！！！
好啦，到此测试结束啦，下面要真正进入ES6语法学习环节了
第3章 es6语法
3-1 let.const命令
3-2 解构赋值 试看
3-3 正则扩展
3-4 字符串扩展（上）
3-5 字符串扩展（下）
3-6 数值扩展
3-7 数组扩展
3-8 函数扩展
3-9 对象扩展
3-10 Symbol用法
3-11 set-map数据结构
3-12 map-set与数组和对象的比较
3-13 Proxy和Reflect
3-14 类与对象
3-15 Promise 试看
3-16 Iterator
3-17 Generator
3-18 Decorators
3-19 Module模块化