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

矫情吗；* 2022-04-04 04:21 279阅读 0赞

慕课网视频教程

**1.前言**

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

基本技能：

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

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

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

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

**2.项目构建**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

**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搭建环境使用过程中出现的问题：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

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

参考文章：  
[https://blog.csdn.net/qq\_31975963/article/details/83034450][https_blog.csdn.net_qq_31975963_article_details_83034450]  
[https://www.cnblogs.com/evaxtt/p/9561091.html][https_www.cnblogs.com_evaxtt_p_9561091.html]  
[https://www.jianshu.com/p/40b99bed3127][https_www.jianshu.com_p_40b99bed3127]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

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

参考文章：  
[https://blog.csdn.net/strongbill/article/details/82939358][https_blog.csdn.net_strongbill_article_details_82939358]

**webpack**

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

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

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

参考文章：  
[https://www.webpackjs.com/concepts/][https_www.webpackjs.com_concepts]  
[https://segmentfault.com/a/1190000006178770?utm\_source=tag-newest][https_segmentfault.com_a_1190000006178770_utm_source_tag-newest]  
[https://www.cnblogs.com/-walker/p/6056529.html][https_www.cnblogs.com_-walker_p_6056529.html]

**webpack-stream**

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

**npm**

可以参考：[http://www.cnblogs.com/itlkNote/p/6830682.html][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][http_yijiebuyi.com_blog_a3ea13c5d7a40ac9cb55e2f29d5f4619.html]

**项目结构**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220404/991b305005b947b8a12ef6a03213cce0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220404/63fbcd3850d24a69919e5c0fe711d986.png
[https_blog.csdn.net_qq_31975963_article_details_83034450]: https://blog.csdn.net/qq_31975963/article/details/83034450
[https_www.cnblogs.com_evaxtt_p_9561091.html]: https://www.cnblogs.com/evaxtt/p/9561091.html
[https_www.jianshu.com_p_40b99bed3127]: https://www.jianshu.com/p/40b99bed3127
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220404/43c19b02be134257940249d0679ede50.png
[https_blog.csdn.net_strongbill_article_details_82939358]: https://blog.csdn.net/strongbill/article/details/82939358
[https_www.webpackjs.com_concepts]: https://www.webpackjs.com/concepts/
[https_segmentfault.com_a_1190000006178770_utm_source_tag-newest]: https://segmentfault.com/a/1190000006178770?utm_source=tag-newest
[https_www.cnblogs.com_-walker_p_6056529.html]: https://www.cnblogs.com/-walker/p/6056529.html
[http_www.cnblogs.com_itlkNote_p_6830682.html]: http://www.cnblogs.com/itlkNote/p/6830682.html
[http_yijiebuyi.com_blog_a3ea13c5d7a40ac9cb55e2f29d5f4619.html]: http://yijiebuyi.com/blog/a3ea13c5d7a40ac9cb55e2f29d5f4619.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220404/80311d7e6fad433ba831cd4ca7dc3db8.png