大前端进阶

我们知道，前端的基础无非就是：HTML+CSS+JS(jquery)+UI框架+...
从现在开始，我们要学习进阶的前端技术，内容包括VSCode的使用、Node.js、ES6语法、NPM、Babel、模块化和Webpack。

VSCode的使用

VSCode是一个前端的代码编辑器，非常受前端开发者的青睐。我们先来学习一下它的安装和使用方法。
1、从官网上下载VSCode，下载地址： https://code.visualstudio.com/
2、启动安装程序，一直点下一步即可，安装完成后会发现是英文界面。
3、安装中文插件，在如下图所示位置搜索第一个插件即可。

搜索安装中文插件
4、安装完插件重启软件界面即可显示中文。
5、还有以下插件需要进行安装：ESLint、Live Server、Node.js Modules Intellisense、Vetur、VueHelper
要下载的插件

Node.js

什么是Node.js？

Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript 成为与Php、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
也就是说，以前编写JavaScript代码需要从浏览器执行，它是放在HTML中的。Node.js就是可以在服务器端运行的JavaScript代码，它基于Coogle 的V8引擎，可以脱离浏览器执行JavaScript代码，其性能较好。

安装Python

安装Node.js之前我们需要先安装以下Python，建议安装Python2版本的，Python3可能会出现一些兼容性问题，这里安装的是Python2.7版本。安装完成后会自动把Python安装目录栏添加到环境变量中，可以在DOS窗口中输入python -v命令查看Python版本，有显示Python安装和版本信息表示安装成功。

安装Node.js

进入官网，下载安装包，一直点下一步即可。下载地址：https://nodejs.org/zh-cn/download/

下载Node.js
如下图所示，Node.js自动帮我们配置了环境变量。
环境变量
安装完毕后，可以输入如下来确认Node.js和npm环境是否安装成功了。

 #查看Node.js版本
node -v 

#查看npm版本
npm -v 

简单使用一下npm，例如我们可以输入如下命令来下载插件，以Vue为例。

npm install vue

简单使用一下Node.js

在VSCode中，主要可以分为文件列表和代码编辑区两个区域。

VSCode界面
1、点击文件列表区域“代码”右侧第二个图标，创建文件夹nodejs。
2、点击文件列表区域“代码”右侧第一个图标，在nodejs文件夹下创建01-控制台程序.js文件。简单编写以下代码：

console.log("hello,node.js")

3、点击文件，右键选择在终端中打开，底部弹出终端界面。
4、在终端中输入如下命令运行js程序。

node js文件名     

Node.js服务器端开发（了解）

1、创建02-server-app.js，编写如下代码：

const http = require('http') 
http.createServer(function (request, response) {
  //设置请求头的内容类型
  response.writeHead(200, { 'Content-Type': 'text/plain' })   
  //输出“hello,node server”
  response.end('hello,node server') 
}).listen(8080) //监听8080端口
console.log("Server running at http://localhost:8080")

2、在终端中输入命令node 02-server-app.js运行程序，打开浏览器访问http://localhost:8080，在网页中输出了"hello,node server"。

ES6语法详解

什么是ES6？

ES6是ECMAScript6的简称，是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
在IDEA中默认配置ECMAScript5版本，我们如果要编写ES6的语法，需要进行配置。

IDEA配置支持ES6语法

接下来我们通过和ES5语法的对比来学习ES6语法。

let声明变量

ES5使用var声明变量，ES6使用let声明变量。它们的区别请看如下示例代码。

//var 声明的变量没有作用域
//let声明的变量有作用域
// {
//     var a=1
//     let b=2
// }
// console.log(a)//1
// console.log(b)//b is not defined

//var可以声明多次
//let只能声明一次
// var m=1;
// var m=2;
// let n=3;
// let n=4;// Identifier 'n' has already been declared
// console.log(m)
// console.log(n)

//var会提升变量的作用域
//let不会提升变量的作用域
console.log(x) //undefined
var x='apple'

console.log(y) // Cannot access 'y' before initialization
let y='orange'

总结：

• var声明的变量没有作用域，let声明的变量有作用域。
• var可以声明多次，let只能声明一次。
• var会提升变量的作用域，let不会提升变量的作用域。

常量

ES5常量并不是真正的常量，只是一种约定，实际上开发人员还是能改变常量的值，ES6常量被声明之后就不允许被改变了，一旦声明就必须初始化，否则会报"Missing initializer in const declaration"错误。示例代码如下：

//一旦声明常量就不能被修改
const PI ='3.1415926'
PI = 0 //Assignment to constant variable.

//一旦声明就必须初始化，否则就会报错
const MY_APP // Missing initializer in const declaration

解构赋值

ES5将一个对象的属性赋值给其他变量必须一个一个取，ES6可以直接取出对象中的所有值赋值给其他变量。示例代码如下：

//传统的
// let a=1,b=2, c=3
// console.log(a,b,c)

// //es6
// let [x,y,z]=[1,2,3]
// console.log(x,y,z)

//对象定义
let user={name:'wunian',age:10}
//传统的
let name1=user.name
let age1=user.age
console.log(name1,age1)
//es6 取出对象中所有的值
let {name,age}=user //解构的变量名必须和对象属性同名
console.log(name,age)

模板字符串

ES6支持在字符串中引号需要改为``，可以直接在字符串中使用变量，不需要像ES5那样拼接字符串。示例代码如下：

let name='hello'
let age=3
//传统的
let info='name:'+name+" age:"+age//拼接字符串

//字符串引号要改为``
let infoes6=`name:${name} age:${age}` //模板字符串，真正的前端开发

console.log(info)
console.log(infoes6)

对象声明简写

一个对象中的属性如果和值的参数名相同，可以省略属性，直接传入参数名。示例代码如下：

const age=3
const name='wunian'

//传统的
const person1={age:age,name:name}
console.log(person1)

//es6
const person2={name,age}
console.log(person2)

定义方法简写

ES5我们在对象中定义方法的格式为：方法名:function()，ES6可以把function省略。示例代码如下：

const p={
    //方法
    sayHi:function(){
        console.log('hello')
    }
}
p.sayHi();

//es6
const p2={
    sayHi(){
        console.log("hello es6")
    }
}
p2.sayHi()

对象扩展运算符

ES5将一个对象赋值给另一个变量，实际上是引用赋值，引用指向的地址和原对象是相同的，因此现对象的值一旦发生改变，会影响原对象的值，类似于Java中的引用传递。ES6可以实现对象的完全拷贝，一旦拷贝现对象就和原对象没任何关系了，因此它是一种深拷贝。示例代码如下：

let person={name:'wunian',age:20}
let someoneOld=person //引用赋值

//对象拷贝 ... 深度拷贝
let someone={...person}
someoneOld.name='jishiyu'
someone.name='jishiyu neo'

console.log(person) //jishiyu
console.log(someoneOld)//'jishiyu'
console.log(someone) //jishiyu neo

函数的默认参数

ES6可以对函数中的形参设置默认值。示例代码如下：

function showInfo(name,age=18){
    console.log(name+','+age)
}

showInfo('wunian',20) //wunian,20
showInfo('wunian') //wunian,18
showInfo('wunian',undefined) //wunian,18
showInfo('wunian',null)  //wunian,null

箭头函数

ES6箭头函数类似于Java中的lambda表达式，是函数的一种简化形式，一般格式为：参数=>函数体。示例代码如下：

let arr=['100','534','37','412','3000']
let arr1=arr.sort();
console.log(arr1)
//需要使用排序的函数
let arr2=arr.sort((a,b) => a-b)
console.log(arr2)
// let arr2=arr.sort(function(a,b){
//     return a-b
// })

//()=>{}
var f1=function (a,b){
    let result =a+b
    return result
}

var f2= (a,b) =>{
    let result =a+b
    return result
}
//最终简化版本
var f3= (a,b) => a+b

console.log(f1(2,3))
console.log(f2(2,3))
console.log(f3(2,3))

在许多前端框架的底层代码中，可以看到大量这种ES6语法的代码，尤其是对接后端接口的API。

NPM包管理

只要安装了Node.js，系统就会自动安装npm环境。

C:\Users\Administrator>npm -v 
6.13.4

什么是npm？

npm的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。好比Java中的maven，所有东西只要导入依赖即可，npm也是如此，npm install命令类似于Linux的yum安装。

测试使用

1、创建一个npm目录。
2、测试初始化项目，理解npm是如何管理前端依赖的。package.json文件和pom文件一样，用来管理我们的项目版本依赖。
项目初始化：

npm init  #初始化，需要设置一些参数
npm init -y # 快速初始化，自动设置默认参数，

package.json

修改npm镜像

npm默认镜像地址在国外，下载缓慢，我们可以把它修改成淘宝的镜像，那样下载速度会比较快。

 #查看npm的配置信息
npm config list
#配置所有依赖通过淘宝镜像下载，速度较快
npm config set registry https://registry.npm.taobao.org/

下载依赖包

1、npm install xxx 安装指定依赖，默认安装最新版本。
2、`npm install xxx@x.x.x 安装指定依赖并指定版本。
3、package.json管理了所有的依赖版本控制。
4、npm install --save-dev(或者 -D) xxx 安装指定依赖并且只在开发的时候使用。

devDependencies

5、npm install -g xxx 全局环境下安装指定依赖，依赖安装位置一般在C:\User\Administrator\AppData\Roaming\npm\node_modules目录下，在VSCode终端中可能会因为权限问题安装失败，可以去DOS窗口下运行该命令进行安装。

全局安装
全局安装路径
6、更新和卸载指定依赖包：

npm update xxx# 更新包
npm uninstall xxx# 卸载包

Babel

什么是Babel？

很多ES6高级语法浏览器是不支持的，Node.js也不一定能够运行，这时就需要使用转码器了。Babel是一个使用非常广泛的转码器，它可以将ES6语法代码转换为ES5语法代码，实现了语法的自动转换。

安装Babel

1、使用npm安装babel-cli工具。

npm install -g babel-cli #安装babel-cli

2、安装完毕后查看babel版本进行测试。

babel --version # 查看babel版本
6.26.0 (babel-core 6.26.3)

测试使用

1、创建babel目录，再在该目录下创建src目录（以后我们的js代码都应该放在src目录下），在src目录下编写js源代码。
2、编写.babelrc配置文件，注意这里的"es2015"指的就是ES6语法。

{
    "presets":[
        "es2015"    
    ],
    "plugins":[]
}

3、安装babel依赖。

npm install -D babel-preset-es2015

4、转码输出测试。将src目录下的example.js转码输出到dist1目录下的dist.js中。

babel .\src\example.js --out-file .\dist1\dist.js

babel转码前后代码对比

自定义脚本

我们可以在package.json文件中配置一些自定义脚本，以后只需要在终端中执行npm run xxx命令即可执行指定的脚本。例如将我们的babel转码命令配置成自定义脚本，配置代码如下：

"scripts": {
   "build": "babel .\\src\\example.js --out-file .\\dist\\dist.js"
 }

使用npm run build可以执行该脚本。
这里可以编写多个脚本，这样以后执行一些操作就不需要每次都输入那么长的命令了。
诸如npm run test、npm run start这种命令本质上就是一段自定义脚本，以后看到类似的启动方式，只要去找它的scripts脚本就好了。

模块化

随着互联网的发展，许多网站也一步步的互联网化了，这使得项目中的js代码也越来越多了，变得十分复杂。
我们都知道Java中可以在一个类中使用import关键字导入其他类进行调用，这样很好的实现了模块化开发。那么js是否也可以进行模块化开发呢？于是js也开始慢慢向模块化开发方向发展，后来产生了两种模块化规范：CommonJS规范和ES6模块化规范

CommonJS规范

CommonJS模块的特点如下：

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序和其在代码中出现的顺序一致。

如下代码,在导出四则运算.js文件中定义了一些四则运算的函数，我们使用CommonJS规范来将其导出。

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
}

在同一目录下创建引入测试.js文件，编写导入测试代码如下：

const m=require('./导出四则运算')
console.log(m)
//测试方法，正常输出
const r1=m.sum(1,1)
const r2=m.sub(1,2)

console.log(r1)
console.log(r2)

ES6模块化规范

ES6在语言标准上实现了模块功能，设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系（CommonJS只能在运行时确定），以及输入输出变量。ES6的模块并不是对象，而是通过export显示指定输出的代码，再通过import命令导入。
第一种写法
如下代码，在userApi.js文件中使用ES6模块化规范导出两个方法。

export function getList(){
    console.log('获取用户列表')
}

export function save(){
    console.log('保存用户信息')
}

在userComponent.js文件中编写导入测试代码如下：

//import node不支持，需要使用babel进行转码后运行
import {getList,save} from './userApi'

getList();
save();

第二种写法
如下代码，在userApi2.js文件中使用ES6模块化规范导出两个方法。

export default{
    getList(){
        console.log("获取数据列表")
    },
    save(){
        console.log("保存数据列表")
    }
}

在userComponent2.js文件中编写导入测试代码如下：

import user from './userApi2'

user.getList()
user.save()

注意：Node.js不支持ES6模块化语法，因此需要使用babel进行转码再运行，上述两种写法都是如此。

webpack

什么是webpack？

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
简单来说就是一个前端资源打包工具，它可以把js、less、css、png等文件通通打成一个或多个js文件。这样做的好处是可以让我们的代码不那么繁琐，实现代码的复用。

webpack安装

1、使用npm安装webpack-cli工具。

npm install -g webpack webpack-cli

2、安装完毕后查看webpack版本进行测试。

webpack -v

测试使用

1、创建webpack目录并初始化项目npm init
2、在webpack目录下创建src目录，编写js代码。
3、webpack打包。

webpack --mode=development

webpack打包

4、如果要打包css文件，需要先安装css-loader。除js以外的其他类型文件都需要安装相应的loader，并且需要配置对应的打包规则，详细配置规则可以查阅官网。

npm install --save-dev style-loader css-loader

然后在webpack.config.js文件中配置css打包映射规则。

const path=require('path')  //Node.js的内置模块

module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'./dist'), //输出路径
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/, //打包规则映射到css结尾的文件上
                use:['style-loader','css-loader']
            }
        ]
    }
}

什么是loader？

loader用于对模块的源代码进行转换。loader可以使你在import或"加载"模块时预处理文件。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或将内联图像转换为data URL。loader甚至允许你直接在JavaScript模块中import CSS文件。