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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014465934/article/details/85008893

慕课网视频教程

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.csdn.net/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.csdn.net/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在项目中是必不可少的。

yargs

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

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

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

项目结构

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u014465934/article/details/85008893