大前端进阶（Nodejs、ES6、npm、Babel、模块化、Webpack）

随着前端技术的不断迭代更新，前端已经不仅仅是之前的js、css、jquery就能满足需求的了，前端的开发也逐渐向后端开发的模式迈进，这其中就引入了很多新的技术，作为一个java开发虽然不用深入研究，但是对这些前端中比较重要的几个知识点还是很有必要学习一下的。

一、前端开发工具VS Code

前端的开发工具很多，例如WebStorm、HBuilder、Sublime等。VScode是微软开发的一款代码编辑器，它的优势在于是一款轻量级编辑器，安装包小，启动速度快。最大的优势在于VScode有着丰富的插件系统。

下载安装：VScode官网下载链接 ，点击下载对应的操作系统版本，下载后安装要求安装即可，和普通软件安装一样很简单。

启动VScode，安装汉化插件，安装后重启VScode即可

为方便后续开发，最好再安装以下插件：

二、Nodejs

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

简单的说 Node.js 就是运行在服务端的 JavaScript。

如果第一次看node上面的介绍难免会有点懵，简单来说，js是一门前端的语言，本身它只能在前端运行，后台服务端是需要后端语言例如java、python、php这些语言来提供服务的，也就是说前端是依赖于后端的。而nodejs的出现就是为了解决这个问题，nodejs就是使js语言去做服务端语言，让js可以来调用mysql、redis、mybatis等，从而使前端js语言可以完成前后台的一切操作，而脱离对后端语言的依赖。不过在实际开发中，完全使用nodejs来做后端的基本很少很少，用到nodejs的地方一般都是前端开发来模拟后台接口调用的时候，简单写个响应。我们需要记住的是nodejs，是将js运行在服务端的一门技术，可以用来模拟后端响应即可。

nodejs为什么可以将js运行在服务端？
因为nodejs是基于Chrome V8引擎的，可以理解为nodejs内部集成了一个谷歌浏览器内核，使得js可以脱离浏览器运行。

如上图，首先看左侧，我们知道java文件之所以能运行在我们的windows电脑上，是因为我们安装了JDK，而JDK内部有JVM（java虚拟机），我们编写一个java文件，操作系统本身是不懂这个文件的，也不会解析，JVM的作用就是将我们编写的java文件解析给操作系统，使我们的操作系统可以完成相应的java文件对应的操作。

由此类比右侧，Nodejs和JDK类似，我们平时写一个js文件，操作系统也是不懂这个js文件的，需要一个类似jvm一样的东西去解析js文件然后给操作系统识别，这就是node中的Chrome V8引擎，也就是说node中内置了谷歌浏览器的引擎，所以使得nodejs可以使js直接运行在服务端。

（这里有的人会想，平时编写的js不是能在浏览器上正常运行吗，注意那是浏览器去解析你的js文件，是浏览器内部有解析js文件的引擎，操作系统本身是不懂js文件的）

Nodejs安装：nodejs官网 下载对应版本的nodejs

点上面两个哪个都可以，要下载符合当前操作系统的版本。下载后一步一步安装即可，没什么复杂的东西。

下载完毕，命令窗口输入 node -v 查看nodjs版本，node默认集成npm

Nodejs入门：

编写一个helloworld.js文件，内容 console.log(“Hello World !”)；

命令窗口使用node运行该js文件：
node helloworld.js // 这就和java中的运行某java文件 java helloworld 命令类似（不过java运行的时候要先把文件用javac命令编译成class文件）

输出hello world ! ,由此可以，nodejs就是脱离浏览器环境运行的一个js程序，因为它本身就是基于V8引擎的。

Node 模拟后端响应：

1. 新建httpserver.js

// 用http，所以要先导包，这里的导包是require ，类似于java中的 import com...
const http = require('http');

// 1. 创建一个httpserver服务
http.createServer(function(request,response){

    response.writeHead(200,{'Content-type':'text/html'});// 输出格式，以html的格式输出。text/plain 是以文本的格式输出
    response.end("<h1>hello httpServer !</h1>");// 输出内容

}).listen(9527);// 端口号 9527

console.log("服务http:localhost:9527 启动成功！")

2. 运行该js
   
3. 浏览器访问9527端口
   

访问成功！这个案例其实就更能体现出 “Node.js 就是运行在服务端的 JavaScript” 这句话的含义了。

node还能操作mysql，redis，rabbitmq等，只要导入相应的包即可。这里就不做演示了。

如果想开发更复杂的基于Node.js的应用程序后台，需要进一步学习Node.js的Web开发相关框架 express，art-template、koa等

三、ES6

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

简单理解：ECMAScript是由ECMA组织参与制定的一个标准化语法规范，而JavaScript是ECMAScript的实现和扩展。

ES是js的一种规范标准，下面是它的发展历程：

由上图可以看到ES6已于2015年6月发布，到现在的话基本很多浏览器都已经支持ES6了，小程序或uniapp上是完全支持es6的所以可以放心使用。

下面是ES6中常用到的几种新的语法规范：

1. let和const命令
2. 模板字符串
3. 函数默认参数
4. 箭头函数
5. 对象初始化简写
6. 对象解构
7. 传播操作符【…】
8. 数组map和reduce方法使用

		//1. let const  替换 var，es6之前所有变量都是var修饰，es6可以用let修饰变量，const修饰常量
       var a = 1;
   
       let b = 2;
       const c = Math.PI; // const修饰后的常量不能再被重新赋值或修改，不然会报错
   
       // 2. 模板字符串
   
       let username="张三";
       let age = 15;
       
       let str="我是"+username+",今年"+age+"岁了"; //以前的字符串拼接
       console.log(str);
   
       let strNew = `我是${username},
       今年${age}岁了`; // ES6 ,使用``来代替以前的""，且变量可以直接使用${}引用，还可直接换行
       console.log(strNew);


       // 3. 函数默认参数，就是可以给函数形参一个默认值，调用改方法时，不传参数那用的就是默认值
       function sum(a=100,b=100){
           return a+b;
       }

       console.log(sum(10,20));  // 30
       console.log(sum()); // 200  不给参数，用的就是默认值
       console.log(sum(50)); // 150  ,给一个那默认就是第一个 a=50 ，b 不给值，默认就还是100

       // 4. 箭头函数  就是对函数的缩写，和java中的lambda很像

       var add = function(a,b){ // 以前的普通写法
           return a+b;
       }
       console.log(add(1,1));

       // 采用箭头函数替换

       var add2 = (a,b)=>a+b;

       console.log(add2(10,20));

       // 箭头函数的具体简化规则就是：
       // 1. function 省略，在参数后面加上  =>  该符号
       // 2. 若方法体中没有逻辑体，只有返回值一行代码，大括号{}也可以省略
       // 3. 若只有一个形参，那小括号()也可以省略

       var add3 = a=>a+1;  // 比如这个就是最简模式，只有一个形参a ，方法体是返回a+1的值
       console.log(add3(5));  

       // 5. 对象初始化简写
       function person(name,age){

           //return {name:name,age:age}
           return {name,age}; // 代替上面那种，默认key和value的形参值一样
       }
       console.log(person("张三",15)); // 输出： {name:"张三",age:15}

       // 一般来说，此功能在ajax传递参数时可以用到
       function login(){
           var username="李四";
           var age = 16;

           $.ajax({
               type:"post",
               url:"******",
               // data:{username:username,age:age}  原本的传参要这样写，声明key-value
               data:{username,age}, // ES6可以采用对象简写，默认key就是username
               success(){

               }
           });
       }

       // 6. 对象解构 ： 就是快速获取对象的属性的方式

       // 首先定义一个对象
       var person={
           name:"王五",
           old:20,

           say:function(){
               console.log(`我是${this.name},我今年${this.old}岁了。`)
           }
       }

       // 传统的获取person属性的方法
       var name1 = person.name;
       var age1 = person.old;
       person.say();

       // ES6 获取person属性的方法
       let {name,old} = person;  // 注意这个{}里必须和person的key一样，这样的话默认就是定义了两个变量，变量名就是person的key
       console.log({name,old});



       // 7. 传播操作符 【...】  把一个对象的属性传到另一个对象中
       var person01={
           name:"小明",
           age:21
       }

       var person02={...person01};  // 把person01的属性key-value传给person02

       console.log(person02);
       console.log(person01);

       var person03={    //也可以传给03后，再给03增加一些其他属性
           ...person02,
           gender:1,
           tel:13566667777
       }

       console.log(person03);

       // 对象解构 和 传播操作符  联用

       // 获取person03中的name和age属性，并给两个属性起别名，剩下的属性赋值给person04
       var {name:name001,age:age001,...person04} = person03; 
       console.log(name001);
       console.log(age001);
       console.log(person04); // {"gender": 1,"tel": 13566667777}

       // 传播操作符的用法很多，比如可以用在分页获取结果集上
       function selectAllUsers(){
           $.get("url",function(res){

               // 比如res返回的结果集是一个分页数据，pager
               res ={
                   pages:11,
                   pageSize:10,
                   pageNo:1,
                   firstFlag:true,
                   lastFlag:false,
                   total:123,
                   data:[{},{},{},{}], // data 是我们需要的数据
               }

               // 我们想把data的数据提取出来，剩下的分页数据赋值给另一个对象（也就是将data和其他数据分离）

               var {data:userList,...pager} = res;

               // 如上，使用传播操作符，就可以很简单的把data赋值给userList对象，剩下的属性赋值给pager对象

           })
       }

       // 8. ES6 新增对数组操作的方法， map 和 reduce 

       // map方法，就是遍历原数组，并返回一个新数组
       
       let arr=["-1","2","3","9","-7"]; 
       
       let arrNew = arr.map(function(value){

           return parseInt(value) * 2; // 将原数组转为int类型，并乘以2，结果返回到一个新数组arrNew中

       })// 如果使用之前的方法，就要先定义一个新数组，再遍历原数组，将原数组的值操作后添加到新数组中


       // 用箭头函数简化上面的方法
       let arrNew02 = arr.map(value=>parseInt(value) * 2);

       console.log(arr);
       console.log(arrNew);
       console.log(arrNew02);

       // reduce  也是对数组进行处理操作的，其中有两个形参（a,b） 
       // 第一个参数a 是上一次reduce方法处理后的结果
       // 第二个参数b 是数组中要处理的下一个元素

       let arr2 = [1,2,3,4,5,6,7,8,9,10];

       // 计算数组元素之和，就可以用这个方法
       var result = arr2.reduce(function(a,b){
           return a+b;
       })

       // 箭头函数简化
       var result2 = arr2.reduce((a,b)=>a+b);

       console.log(result);
       console.log(result2);
   

四、NPM 包管理器

NPM全称 Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven 。作用就是 1. 快速构建骨架工程 2. 方便导入下载第三方包

在安装nodejs时，npm也一起就安装了

由于npm下载包的仓库在国外，下载慢，所以这里使用淘宝镜像下载cnpm（淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。）

npm config set registry https://registry.npm.taobao.org   #配置仓库地址改为淘宝镜像仓库地址，这样以后用npm 下载的都是从淘宝镜像仓库中下载
npm config list  #查看npm所有配置信息

以下是npm中尝使用的命令：

1. 初始化项目，新建一个文件夹并打开
   npm init 初始化项目，就是把该文件夹初始化为一个node工程项目，可以指定 name，version等等一些内容
   npm init -y 如果不想指定，这条命令可以所有属性都设置为默认的

初始化项目后，会生成一个 package.json 的文件，这个文件就类似于maven项目中的pom文件

{
  "name": "vstestcode",
  "version": "1.0.1",
  "description": "这是一个node工程",
  "main": "helloworld.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hhl",
  "license": "ISC"
}

2. 安装第三方依赖包

npm install mysql redis jquery vue@2.6.14  #安装依赖包，@可以指定版本，不指定的话默认下载最新的
npm install -g mysql #全局安装mysql 

安装后会生成一个node_modules文件夹，里面是所有的依赖包

且package.json中会生成安装的依赖包的版本信息

看这个dependencies是不是很像maven中的pom文件呢

安装相应的包后，在js里就可以导包了
const mysql = require(‘mysql’);
const redis = require(‘redis’);

npm其他命令：

npm update 包名 #更新包（更新到最新版本）
npm update -g 包名 #全局更新
npm uninstall 包名 #卸载包
npm uninstall -g 包名 #全局卸载

探究：package.json

1. 在发布项目或者拷贝项目的时候，node_moudles其实是没意义的。因为它仅仅在开发和打包的时候使用
2. 如果托管代码其实没必要，为什么。因为你package.json文件中已经记录了这些模块坐标。我们可以直接使用npm install 去重新安装和生成node-modules 。所有的nodejs项目下载以后第一个要执行的命令都是npm install的原因也就是如此。
3. 这也就是为什么官方不提供node-modules的原因。因为你可以直接用npm install 去下载

package.json文件的作用其实和pom文件类似，我们导入一个maven项目，idea会自动根据pom文件里的坐标下载相应的jar包。nodejs项目也类似，根据package.json中记录的dependencies信息，只不过需要输入npm install 这个命令来安装项目所依赖的包而已，其实都是一个道理。

五、Babel

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。或者说有些浏览器并不是完全支持ES6的新语法的。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

安装Babel

npm install -g babel-cli   #安装Babel
babel --version #查看babel信息

Babel在项目中如何使用：

1. 新建文件夹并在vscode中打开，在终端输入初始化项目命令

npm init -y #初始化node项目

2. 创建文件src/es6_01demo.js ,在js文件中输入ES6语法

let name1 = "张三";
const age = 25;
let arr = [1,2,3,4,5];
let newArr = arr.map(i=>i*2);

console.log(name1);
console.log(age);
console.log(arr);
console.log(newArr);

3. 在项目的根目录下创建Babel的配置文件.babelrc，该文件用来设置转码规则和插件，presets字段设定转码规则，将es2015规则加入 .babelrc
   
4. 安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

5. 输入相应命令，进行转码

babel src/es6_01.js -o dist/es6_01.js # 单个文件转码， -o 后面是转码后文件输出的位置
babel src -d dist # 整个文件夹转码

6. 查看转码后的js文件内容，可以看到ES6的语法已经都被转成ES5了
   

也可以通过自定义脚本的方式来进行转码：

1. 在package.json中输入转码命令
   
2. 转码的时候在终端直接输入以下命令即可转码

npm run build

六、模块化

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

什么是模块化？

简单来说，就是代码可复用，比如java项目中我们编写的Utils类，这些类是一些公共的类，我们不管什么时候需要用的时候，直接把对应的包导进来，然后根据类名或者对象就可以直接调用里面的方法。也就是说Utils类可以当做一个模块，那里用到哪里就引入这个模块，引入了就能用。

然而js语言却不是一个模块化编程语言，我们想复用一些别人写好的js代码，只能说复制然后粘贴到我们写的js文件中，来达到应用的目的。而且还有个很大的问题，就是在一个页面中引入多个js文件，难免会出现全局变量重名的问题，这样在运行时就会出现很多错误。所以说js模块化编程已经成为一个迫切的需求。

再说的简单些，js模块化编程，其实就是让js语言支持类似java中的导包这个概念。

以下介绍两种js模块化规范：

CommonJS模块化化规范：
这是一个用于服务端模块化编程，比如nodejs就采用此规范，也就是说node项目中可以使用此规范来进行JS模块化开发。具体操作如下：

1. 新建SumUtils.js文件

const sum = function(a,b){
    return a+b;
}

const sub = (a,b)=>a-b;

const mul = (a,b)=>a*b;

const di = (a,b)=>a/b;

// 使用commonJS规范导出该js中的方法
module.exports = {
    sum:sum,
    sub:sub,
    mul:mul,
    di:di   // 这里其实可以用es6的对象简写
}

2. 新建TestCommon.js文件，并根据commonjs规范导入sumutils.js，并测试

// 据commonjs规范导入sumutils.js
const sumUtils = require('./SumUtils');

// 测试
console.log(sumUtils.sum(1,2));
console.log(sumUtils.sub(1,2));
console.log(sumUtils.mul(1,2));
console.log(sumUtils.di(1,2));

3. 使用node命令运行该js，可以看到结果正常输出，说明导入测试成功！
   

ES6模块化规范：
在支持ES6语法的浏览器上都可以使用，若不支持ES6，可以通过Babel转为ES5语法使用

1. 新建userAPI.js文件

export default { // 使用ES6规范导出方法
    getList(){
        console.log("查询用户列表！");
    },
    saveUser(){
        console.log("保存用户信息！");
    }
}

2. 新建userIndex.js文件，并导入userAPI.js

// ES6 导包
import userAPI from "./userAPI";

// 测试
userAPI.getList();
userAPI.saveUser();

3. 测试，成功！（由于nodejs不支持ES6模块化语法，所以这里需要先要将ES6转为ES5的语法再运行）
   

七、Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

由上图可以看到，webpack其实就是一个打包工具，可以把多个js、css、png等文件打包成一个文件。这样的好处不仅可以缩减代码体积，而且还相当于对js等文件进行了加密处理更安全。

下面进行webpack的具体操作：

1. 安装webpack

npm install -g webpack webpack-cli # 全局安装webpack
webpack -v # 查看webpack版本号

2. 创建两个普通的js文件

utils.js

const add = function (a, b) {
    return a + b;
};

module.exports = { // 使用commonjs规范导出
    add
}

common.js

const info = function (str) {
    document.write(str);
}

module.exports = {// 使用commonjs规范导出
    info
}

3. 创建main.js ，此js将作为入口函数

// 在入口函数文件里，导入所有要打包的js
const common = require('./common');
const utils = require('./utils');

common.info('Hello webpack!' + utils.add(100, 500));

4. 项目根目录下创建webpack配置文件：webpack.config.js

const path = require('path');

module.exports = {
    // 配置入口函数的位置
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'./dist'), // 输出位置 _dirname：当前文件所在路径，这个是个固定参数
        filename: 'bundle.js' // 输出文件
    }
}

5. 命令行执行编译命令

webpack --mode=development 
webpack -w  # 此命令也能编译，不过类似于java中的热部署，修改文件后会立刻生效到打包后的文件中

6. 查看打包后的文件
   
7. 在页面中引入此打包后的js，并查看效果
   
   出现此效果，则表示打包成功！

上面是js打包的案例，下面看CSS如何打包：
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

1. 首先要先安装style-loader和 css-loader（Loader 可以理解为是模块和资源的转换器，要打包什么就安装对应的什么Loader）

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

2. 编写一个css文件

body{
    background-color:plum;
}

3. 在main.js中引入改css文件
   
4. webpack配置文件中增加如下配置
   
5. 重新打包编译，然后测试即可

除js以外的文件例如css、img等文件，都需要引入对应的Loader进行转换。