大前端进阶
课程目标
1、前端开发和前端开发工具
2、Nodejs安装和快速入门
3、Es6的新语法糖
4、Npm包管理器
5、Babel的安装作用
6、模块化管理
7、Webpack打包和编译
8、如何快速构建一个nodejs项目vue-admin-element
9、如何快速构建一个nodejs项目antd
01、概述和前端工具vscode安装
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 [2]
移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。 [1]
当下国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。
1.1、下载安装VScode
下载地址：https://code.visualstudio.com/
1：双击打开vscode安装包
2: 指定安装目录
不创建桌面图标，（个人喜好）
直接点击【下一步】
点击【安装】
安装完毕
1.1.1、中文界面配置
1、首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code
2、右下角弹出是否重启vs，点击“yes”
汉化成功
3、有些机器重启后如果界面没有变化，则 点击 左边栏Manage -> Command Paletet…【Ctrl+Shift+p】
4、在搜索框中输入“configure display language”，回车
5、选择’zh-cn’
6、重启vs
1.1.2、插件安装
为方便后续开发，建议安装如下插件
1.1.3、设置字体大小
头部文件-> 首选项->设置-> 搜索 “fonts” -> Font size
1.1.4、开启完整的Emmet语法支持
设置中搜索 Emmet：启用如下选项，必要时重启vs
1.1.5、视图
查看—> 外观—> 向左移动侧边栏
02、Nodejs
2.1、Nodejs介绍与安装
目标： 了解nodejs、并且在本地安装好这个软件
官网： http://nodejs.cn/
介绍：
Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
下载对应你系统的Node.js版本:
下载地址：https://nodejs.org/zh-cn/download
帮助文档：https://nodejs.org/zh-cn/docs
关于Nodejs：https://nodejs.org/zh-cn/about
安装默认安装即可，安装完成之后，查看是否安装成功：
node -v
小结
Nodejs是一门计算机语言，运行在系统中的v8（jvm）引擎中。文件后缀是
js运行的命令是：node
2.2.1、快速入门-Hello World
1、创建文件夹 nodejs
2、创建 helloworld.js
类似于java中的
System.out.println("")
console.log('Hello World!!!')
运行：node helloworld.js
结果：hello world!!!
3、打开命令行终端：Ctrl + Shift + y
浏览器的内核包括两部分核心：
- DOM渲染引擎；
- java script 解析器（js引擎）
- js运行在浏览器内核中的js引擎内部
小结
Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎
2.2.2、Node - 实现请求响应
1、创建httpserver.js;
// 导入模块是require 就类似于import java.io
const http = require('http');
// 1: 创建一个http服务
http.createServer(function (require, response) {
// 浏览器怎么认识hello server!!!
response.writeHead(200,{'Content-type':'text/plain'}) //这句话的含义是：告诉浏览器将
// 以text/plain去解析hello server 这段数据。
// 给浏览器输出内容
response.end('<strong>hello server!!!</strong>');
}).listen(8888);
console.log('你启动的服务是：http://localhost:8888已启动成功！！');
// 2: 创建一端口8888
// 3: 启动运行服务 node httpserver.js
// 4: 在浏览器访问http://localhost:8888
2、运行服务器程序；
node httpserver.js
3、服务器启动成功后，在浏览器输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
4、停止服务：ctrl + c
2.2.3、Node-操作MYSQL数据库
参考：https://www.npmjs.com/package/mysql
1：安装mysql依赖
npm install mysql
2：定义db.js进行操作
// 1: 导入mysql依赖包， mysql属于第三方的模块就类似于 java.sql一样的道理
var mysql = require('mysql')
// 1: 创建一个mysql的Connection对象
// 2: 配置数据连接信息
var connection = mysql.createConnection({
host:"http://localhost",
port:"3306",
user:"root",
password:"123456",
database:"school",
})
// 3: 开辟链接
connection.connect();
// 4: 执行crud
connection.query('select * from student',function(error,results,fields){
// 如果查询出错，直接抛出
if(error)throw error;
// 查询成功
console.log("results = ",results);
});
// 5: 关闭连接
// 最后一步：运行node db.js 查看效果
3、创建数据库school和表student的步骤省略
4、运行db.js
node db.js
PS E:\VSCodeProject\nodejs> node .\db.js
results = [
RowDataPacket {
studentno: 1000,
loginpwd: '123456',
studentname: '张伟',
sex: 0,
gradeid: 2,
phone: '13800001234',
address: '北京朝阳',
borndate: 1979-12-31T16:00:00.000Z,
email: 'text123@qq.com',
identitycard: '123456198001011234'
},
RowDataPacket {
studentno: 1001,
loginpwd: '123456',
studentname: '赵强',
sex: 1,
gradeid: 3,
phone: '13800002222',
address: '广东深圳',
borndate: 1989-12-31T16:00:00.000Z,
email: 'text111@qq.com',
identitycard: '123456199001011233'
}
]
03、Es6
3.1、ES6的概述
ECMAScript的快速发展：
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：
[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。
[类型]– 布尔型、数字、字符串、对象等。
[原型和继承]
内建对象和函数的
[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。
ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。
ECMAScript标准的历史版本分别是1、2、3、5。
那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。
ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话
ECMAScript是一门充满活力的语言，并在不断进化中。
未来版本的规范中将持续进行重要的技术改进
2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。
ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
小结：
ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。
3.2、ES6的语法：let和const命令
变量和常量的严格区分。
核心代码：
新建01-let和const的定义.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 传统定义变量和常量的方式 统一使用var
var name = "广东学相伴";
var link = "https://www.kuangstudy.com";
var PI = Math.PI;
console.log(name);
console.log(link);
console.log(PI);
// ES6定义的方式
let name2 = "广东学相伴太棒了";
let link2 = "http://www.kuangstudy.com";
// 定义常量
const PI2 = Math.PI;
console.log(name2);
console.log(link2);
console.log(PI2);
</script>
</body>
</html>
新建02-let-const和var的区别.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let和const解决
// 1: var的变量穿透的问题
// 2: 常量修改的问题
for(let i=0;i<5;i++){
console.log(i)
}
// 这里就造成变量穿透 编译
//console.log(i)
const PI = Math.PI;
PI = 100; // 编译会报错
console.log(PI);
// 在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中，可以大胆的去使用let和const
// 但是如果你是web开发。建议大家还是使用var. 因为在一些低版本的浏览器let和const
</script>
</body>
</html>
小结
let : 可变变量
const 是常量
var：最原始。
3.3、ES6的语法：模板字符串
以前： 我们都是使用 ‘’ 或者 “” 来把字符串套起来
现在： `` 【反引号】
核心代码：
新建03-模板字符串.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 字符串会牵涉到动态部分
var person = {
name: "飞哥",
address: "广东学相伴",
link: "https://www.kuangstudy.com"
}
let address = "传统-我是" + person.name + "，正在" + person.address + "讲课，讲课的内容会上传到官网：" + person.link + "平台上";
console.log(address);
// es6的语法 模板字符串语法
let address2 = `ES6-我是${person.name}，
正在${person.address}讲课，讲课的内容会上传到官网：${person.link}
平台上`;
console.log(address2);
</script>
</body>
</html>
3.4、ES6的语法：函数默认参数与箭头函数
函数默认参数
在方法的参数后面加上一个默认值即可
核心代码
新建04-函数默认参数.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 函数默认参数
function sum(a = 100, b = 100) {
return a + b;
}
// 执行方法，会用默认值填充，打印出来200
var result = sum();
console.log("result = " + result);
// 覆盖默认值打印 结果是400
var result2 = sum(200, 200);
console.log("result2 = " + result2);
</script>
</body>
</html>
箭头函数
箭头函数简化函数的定义，可以让我们不用使用function关键字
核心代码
新建05-箭头函数.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 箭头函数 - 重点（在未来的项目开发中：比如小程序，uniapp，一些常见的脚手架大量使用）
var sum = function sum(a, b) {
return a + b;
}
// 箭头函数 - 改进1
var sum = (a, b) => {
return a + b;
}
// 箭头函数 - 改进2
var sum = (a, b) => a + b;
// 通过上面的例子你找到什么规律
// 1: 去掉function
// 2: 在)括号后面加箭头
// 3: 如果逻辑代码仅有return可以直接省去。（如果有逻辑体，你就不能省略），比如
// 4: 如果参数只有一个，可以把括号也省去（如果有多个参数就不能省去），比如
var sum2 = function sum(a, b) {
var num = a + b;
return num;
}
var arr = [1, 2, 3, 4, 5, 6];
// var newarr = arr.map(function (obj) {
// return obj * 2;
// })
//改变
var newarr = arr.map(obj=>obj * 2)
console.log(newarr);
</script>
</body>
</html>
3.5、ES6的语法：对象初始化简写
核心代码
新建06-对象简写.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let info = {
title: "广东学相伴",
link: "https://www.kuangstudy.com",
go:function() {
console.log("我骑着小蓝车来公司上班");
}
}
// es6简写
// 因为对象是key:value存在
// 1: 如果key和变量的名字一致，可以只定义一次即可
// 2: 如果value是一个函数，可以把 `:function` 去掉，只剩下()即可
var title = "广东学相伴";
var link = "https://www.kuangstudy.com";
let info2 = {
title,
link,
go() {
console.log("我骑着小蓝车来公司上班");
}
}
console.log(info2);
console.log(info2.title);
console.log(info2.link);
console.log(info2.go());
</script>
</body>
</html>
新建06-对象简写的案例.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<p>账号：<input type="text" id="account"></p>
<p>密码：<input type="text" id="password"></p>
<p><input type="button" value="登录" id="loginbtn"></p>
</form>
<script>
// document.getElementById("loginbtn").onclick = function(){}
$("#loginbtn").on("click",function() {
var account = $("#account").val();
var password = $("#password").val();
// 对象简写的应用场景
var params = {account,password}
// 执行异步请求
$.ajax({
type: "post",
url: "http://localhost:8080",
data:params,
success(){
}
})
})
</script>
</body>
</html>
3.6、ES6的语法：对象解构
es6对象解构-其实就是快速获取对象属性和对象方法的一种方式
核心代码
新建07-对象解构.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 对象是key:value存在，获取对象属性和方法的方式有两种
// 1: 通过.
// 2: 通过[]
var title = "广东学相伴";
var link = "https://www.kuangstudy.com";
let info2 = {
title,
link,
go() {
console.log("我骑着小蓝车来公司上班");
}
}
// 通过.的方式
console.log(info2.title);
console.log(info2.link);
console.log(info2.go());
// 通过[]的方式
console.log(info2["title"]);
console.log(info2["link"]);
console.log(info2["go"]());
// es6对象解构-其实就是快速获取对象属性和对象方法的一种方式
var { title, link, go } = info2;
// 还原代码
// var title = info2.title;
// var link = info2.link;
console.log(title, link);
go();
</script>
</body>
</html>
3.7、ES6的语法：传播操作符【…】
把一个对象的属性传播到另外一个对象中
新建08-对象传播操作符.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 对象传播操作符...
var person = {
name: "学相伴",
address: "广东",
link: "https://www.kuangstudy.com",
phone: 1234567,
go() {
console.log("开始上班了");
}
};
// 解构出来
var { name, address, ...person2 } = person;
console.log(name);
console.log(address);
console.log(person2);
</script>
</body>
</html>
案例分析：
新建09-对象操作符的案例分析.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// java ---后台
// 数据格式: var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
// 异步请求
// $.post("/user/serach",function(){
//var res = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
var {users,...userPage2} = userPage;
//})
</script>
</body>
</html>
3.8、ES6的语法：数组map和reduce方法使用(了解)
map()
方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。
新建10-数组map.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 要对arr数组每个元素*2
let arr = [1,2,3,4,5,6,7];
// 传统的方式
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr.push(arr[i]*2);
}
console.log(newarr);
// map --自带的循环，并且会把处理的值回填对应的位置
var newarr2 = arr.map(ele=> ele * 2)
console.log(newarr2);
// map处理对象的数据
var users = [{age:10,name:"小学"},{age:12,name:"小相"},{age:15,name:"小伴"}];
var newusers = users.map(ele=> {
ele.age =ele.age + 1;
return ele;
})
console.log(newusers);
</script>
</body>
</html>
reduce()
reduce(function(),初始值（可选）) ：
接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
// a = 1 , b = 2 3
// a = 3 , b = 3 6
// a = 6 , b = 4 10
// ...
// a = 45 , b = 10 55
var result = arr.reduce(function(a,b) {
return a+b;
})
console.log("result = ",result);
</script>
</body>
</html>
04、NPM包管理器
4.1、简介
官方网站：https://www.npmjs.com/
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
4.2、使用npm管理项目
1、创建文件夹npm
2、项目初始化
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
#如果想直接生成 package.json 文件，那么可以使用命令npm init -y
4.3、修改npm镜像
1、修改npm镜像
NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/
淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
2、设置镜像地址
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
4.4、npm install
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目
4.5、其他命令
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
4.6、小结
1: npm : node package manager ,node包管理器，类似于maven
作用：
1: 快速构建nodejs工程
- npm init / npm init -y
- 得到一个package.json 这个文件里的内容如下：
{
"name": "npmpro", // 工程名
"version": "1.0.1", // 版本
"description": "我是一个node工程", // 描述
"main": "index.js", // 入口
"scripts": { // 运行脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "edgar", // 开发者
"license": "ISC" // 授权协议
}
类似于：pom.xml 文件作用 管理依赖。
2: 快速安装和依赖第三方模块。
2-1: 快速安装依赖第三方模块？
npm install xxxx 或者 npm i xxx模块名
2-2: 安装模块放在什么地方？
安装的模块放入到我们项目的node_modules文件夹中
2-3: 安装模块如何使用呢？
-require
// 导入模块redis
const redis = require("redis");
// 导入模块mysql
const mysql = require("mysql");
2-4: 模块和package.json有何关系？
"dependencies": {
"jquery": "^3.6.0",
"mysql": "^2.18.1",
"redis": "^3.1.2",
"vue": "^2.6.14"
}
通过npm install xxx 会记录在package.json这个文件中
就类似于maven中的pom.xml一个含义，记录作用：复用。
1: package.json记录的依赖模块
2: 通过npm install 可以直接把package.json所依赖的模块全部自动下载下来
这样就可以避免重复下载模块。很方便去集成第三方模块。
3: 为什么不直接点去拷贝：node_modules呢。当然可以，
为什么不拷贝，因为，下载模块的依赖过大文件过多，混乱文件很多，一般几万到几十万的文件
2-5: 如果安装模块很慢怎么办？
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install xxx
2-6: 如何运行？
node xxxx.js 运行过程.js可以省去的 终止的命令行：CTRL+C 多次执行
2-7: 如何下载多个？
npm install jquery vue redis mysql
cnpm install jquery vue redis mysql
2-8: 下载指定的版本号
npm install xxx@版本号
具体的版本号：查看官方网址 https://www.npmjs.com/package/redis
3: 如何卸载模块呢？
npm uninstall vue jquery
05、Babel
5.1、简介
ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。
5.2、安装
安装命令行转码工具
Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：
npm install -g babel-cli
#查看是否安装成功
babel --version
5.3、Babel的使用
1、创建babel文件夹
2、初始化项目
npm init -y
3、创建文件 src/example.js ，下面是一段ES6代码：
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
4、配置 .babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
{
"presets": [],
"plugins": []
}
presets字段设定转码规则，将es2015规则加入 .babelrc：
{
"presets": ["es2015"],
"plugins": []
}
5、安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
6、转码
# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2
5.4、自定义脚本
1、改写package.json
{
// ...
"scripts": {
// ...
"build": "babel src -d dist"
},
}
2、转码的时候，执行下面的命令
npm run build
06、模块化
6.1、简介
随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。
模块化规范
- CommonJS模块化规范
- ES6模块化规范
6.2、CommonJS规范
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
1、创建“module”文件夹
2、创建 module/commonjs/四则运算.js
// 工具类
const sum = function (a, b) {
return a + b;
}
const sub = function (a, b) {
return a - b;
}
const mul = function (a, b) {
return a * b;
}
const div = function (a, b) {
return a / b;
}
// 导出给别人使用就好了
// module.exports = {
// sum:sum,
// sub:sub,
// mul:mul,
// div:div
// }
// 简写
module.exports = {
sum,
sub,
mul,
div
}
3、创建 module/commonjs/导入测试.js
// require
const m = require("./四则运算");
// 必须要导出才能使用
console.log(m.sum(1, 2));
console.log(m.sub(1, 2));
console.log(m.mul(1, 2));
console.log(m.div(1, 2));
//common js 模块化开发！
5、运行程序
node .\导入测试.js
6、输出结果
3
-1
2
0.5
CommonJS使用 exports 和require 来导出、导入模块。
6.3、ES6模块化规范
ES6使用 export 和 import 来导出、导入模块。
1、创建"es6"文件夹
2、创建 src/userApi.js 文件，导出模块
export function getList(){
// 在真实业务中，异步获取数据
console.log("获取数据列表");
}
export function save(){
// 在真实业务中，异步获取数据
console.log("保存数据");
}
3、创建 src\userTest.js文件，导入模块
import { getList,save } from "./userApi";
getList();
save();
// node默认不支持 es6 语法的 import
注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
4、初始化项目
npm init -y
5、配置 .babelrc
{
"presets": ["es2015"],
"plugins": []
}
6、安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
7、定义运行脚本，package.json中增加”build”
{
// ...
"scripts": {
"build": "babel src -d dist"
}
}
8、执行命令转码
npm run build
9、运行程序
node dist/userTest.js
10、输出结果
获取数据列表
保存数据
6.4、ES6模块化写法2
1、创建 src/userApi2.js ，导出模块
// 前端开发中，经常看到这样的代码
export default{
getList(){
// 在真实业务中，异步获取数据
console.log("获取数据列表");
},
save(){
// 在真实业务中，异步获取数据
console.log("保存数据");
}
}
2、创建 src/userTest2.js，导入模块
import user from "./userApi2";
user.getList();
user.save();
// node 默认不支持 es6 语法的 import
3、执行命令转码
npm run build
4、运行程序
node dist/userTest2.js
5、输出结果
获取数据列表
保存数据
07、Webpack
7.1、什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
7.2、Webpack安装
1、全局安装
npm install -g webpack webpack-cli
2、安装后查看版本号
webpack -v
7.3、初始化项目
1、创建webpack文件夹
npm init -y
2、创建src文件夹
3、src下创建common.js
// 输出
exports.info = function (str) {
// 往控制台输出
console.log(str);
// 往浏览器输出
document.write(str);
}
4、src下创建util.js
// 相加函数
exports.add = (a, b) => a + b;
5、src下创建main.js
// 导入util
const util = require("./util");
// 导入common
const common = require("./common");
common.info("Hello World ,"+util.add(100,100));
7.4、JS打包
1、webpack目录下创建配置文件webpack.config.js
// 导入path模块 nodejs内置模块
const path = require("path");
// 定义JS打包的规则
module.exports = {
// 1: 入口函数 从哪里开始编译打包
entry: "./src/main.js",
// 2: 编译成功以后把内容输出到哪里去
output: {
// 2.1: 定义输出的指定的目录 __dirname当前项目根目录，产生一个dist文件夹
path: path.resolve(__dirname, "./dist"),
// 2.2: 合并的js内容存储在dist/bundle.js文件中
filename: "bundle.js"
}
}
以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
2、命令行执行编译命令
webpack
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩
也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
//...,
"dev": "webpack"
}
运行npm命令执行打包
npm run dev
3、webpack目录下创建index.html ， 引用bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
4、浏览器中查看index.html
7.5、Css打包
1、安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件
- css-loader 是将 css 装载到 javascript
- style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader
2、修改webpack.config.js
// 导入path模块 nodejs内置模块
const path = require("path");
// 定义JS打包的规则
module.exports = {
// 1: 入口函数 从哪里开始编译打包
entry: "./src/main.js",
// 2: 编译成功以后把内容输出到哪里去
output: {
// 2.1: 定义输出的指定的目录 __dirname当前项目根目录，产生一个dist文件夹
path: path.resolve(__dirname, "./dist"),
// 2.2: 合并的js内容存储在dist/bundle.js文件中
filename: "bundle.js"
},
module: {
rules: [{
test: /\.css$/,// 把项目中所有的.css结尾的文件进行打包
use: ["style-loader", "css-loader"]
}]
}
}
3、在src文件夹创建style.css
body {
background-color: yellow;
}
4、修改main.js，在第一行引入style.css
require('./style.css');
5、运行编译命令
// 一次性打包
webpack
或
// 实时监听
webpack -w
6、浏览器中查看index.html ， 看看背景是不是变成黄色啦？
把这些知识都学习完毕了，那我们之后学习 Vue 就轻松啦！这些都是现在前端工程师的基础！
7.6 、小结
1: 创建一个nodejs项目 npm init -y
2: 创建一个src目录
3: 在src存放两个需要合并的util.js和common.js
4: 准备一个入口文件 main.js，其实就是模块集中进行引入
//JS打包
5: 在根目录下定义个webpack.config.js文件配置打包的规则
6: 执行webpack查看效果
08、Vue-element-admin
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
官网地址：https://panjiachen.github.io/vue-element-admin-site/zh/
运行工程和编译工程
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
启动完成后会自动打开浏览器访问 http://localhost:9527
注意如果老是安装失败：
# npm install卡在一个地方很久或者报ssl错误怎么办？
git config --global http.sslVerify false
git config --global url."https://".insteadOf git://
# 请删除 node-modules 然后执行npm install
小结
nodejs项目几要素
- package.json (npm init \ npmt init -y)
- node_modules (npm install -g jquery/npm install jquery)
- 运行是使用：查看官网提供 几乎所有的nodejs都启动和打包都是如下：
- npm run dev （开发运行）
- npm run build (打包)
浙公网安备 33010602011771号