ES6项目实战-解析彩票项目-项目构建

慕课网视频教程

1.前言

解构赋值、箭头函数、Set和Map、异步操作、类和对象、模块化

基本技能：

1.构建工具：gulp、babel、webpack、npm
2.基础语法
3.实战演练

在我们的生产实际中，后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。Mock.js，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作。

mockjs就是一个模拟数据，生成随机数据，拦截ajax请求。

mockjs：
1.前后端分离
2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据，模拟各种场景。

2.项目构建

基础架构、任务自动化（gulp）、编译工具（Babel、webpack）、代码实现

babel

babel官网正中间一行黄色大字写着“babel is a javascript compiler”，翻译一下就是babel是一个javascript转译器。为什么会有babel存在呢？原因是javascript在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为javascript增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。

gulp

1.易于使用：通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

2.构建快速：利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

3.插件高质：Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

4.易于学习：通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

gulp搭建环境使用过程中出现的问题：

gulp执行启动时，而且安装了babel-core和babel-register，还是会报上面的错。原因是gulp3和gulp4的区别，，解决方法是查看package.json配置文件，把gulp改为3版本，比如3.9.1，然后重新执行npm install。

参考文章：
https://blog.youkuaiyun.com/qq_31975963/article/details/83034450
https://www.cnblogs.com/evaxtt/p/9561091.html
https://www.jianshu.com/p/40b99bed3127

然后执行gulp时候信息第一句说了我们还要安装babel-core和babel-register，我们进行了安装，又出来了下面的提示，意思就是babel-loader8.0.4需要和babel-core7.0.0相匹配，也就是说这个有版本依赖，我们可以在package.json修改，然后npm install重新下载。

参考文章：
https://blog.youkuaiyun.com/strongbill/article/details/82939358

webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack四个核心概念：入口、输出、loader、插件。

参考文章：
https://www.webpackjs.com/concepts/
https://segmentfault.com/a/1190000006178770?utm_source=tag-newest
https://www.cnblogs.com/-walker/p/6056529.html

webpack-stream

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack。

npm

可以参考：http://www.cnblogs.com/itlkNote/p/6830682.html

npm install 安装模块，也就是node_modules这个文件夹。

npm install 命令用来安装模块到node_modules目录。

–save 安装包信息将加入到dependencies（生产阶段的依赖）
–save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它
–save-optional 安装包信息将加入到optionalDependencies（可选阶段的依赖）

模块的依赖都被写入了package.json文件后，他人打开项目的根目录（项目开源、内部团队合作），使用npm install命令可以根据dependencies配置安装所有的依赖包，比如安装express框架之后，执行npm install之后，就会工具package.json里面的依赖进行安装。

npm init 在项目中引导创建一个package.json文件，程序的信息可保持到项目的package.json文件中。之后我们安装包的时候就可以把包的数据保存到package.json中，以便后续的其它的项目开发或者他人合作使用，使用npm install就可以安装package.json中的包了，也说package.json在项目中是必不可少的。

yargs

大概有一种情况你需要让你的程序接收一个参数,通过这个参数我们做一系列的定制化功能.常见的做法是 把一些不同环境不同配置的变量写到 config 配置文件中.当你的环境变化的时候,你手动去修改你的config 中的变量来达到不同环境显示定制化的东西.

现在, yargs 的功能就是帮你实现类似上面这种定制化的参数功能.从此一些简单定制参数可以彻底摆脱 config 配置了.

可以参考文章：http://yijiebuyi.com/blog/a3ea13c5d7a40ac9cb55e2f29d5f4619.html

项目结构