node+es6+npm+babel+webpack

大前端

Node.js代码的运行

创建的文件是 name.js
运行是 node name.js

Node.js

//链接http创建server服务
可以在Node.js API查看模块
所有的javascript代码都可以运行在Node.js中

//导入模块是require就类似于import java.io
const http = require('http')
//1.创建一个httpserver服务
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
//告诉浏览器将，以text/pain去解析hello server这段数据
response.writeHead(200, {'Content-Type': 'text/plain'})
// 发送响应数据 "Hello World"给浏览器解析
response.end('Hello Server')
}).listen(8888)
//2.监听端口8888
//3.启动运行服务 node httpserver.js
//4.在浏览器访问http：//localhost:8888
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/')

//链接mysql
有些模块在Node.js API文档里面找不到。
我们在npm里面找到下载命令。
使用命令下载
npm install mysql

//1.导入mysql依赖包,mysql属于第三方模块，就类似于java.sql一样的道理.安装  npm install mysql
var mysql = require("mysql");
//1.创建一个mysql的Connection对象

//2.配置数据库链接
var connection = mysql.createConnection({
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"*******",
    database:"ahtcm"

});
//3.开辟链接
connection.connect();
//4.执行curd
connection.query("select * from emp",function(error,results,fields){
    //如果查询出错，直接抛出错误
    if(error) throw error;
    //查询成功
    console.log("results=",results);
});
//5.关闭链接
connection.end();

Es6语法

let和const

let是具有局部属性的，以前使用var都是全局的，出了代码块还能使用

const：常量，修饰的不能更改。

模板字符串

在html里
<script>
	var person = {
	    name:"wwy",
	    addr:"合肥"
	}
	let string = "我是"+person.name+",我住在"+person.addr;//以前的字符串拼接
	//es6模板字符串
	let newS听听 = `我是${person.name},我住在${person.addr}`
</script>

函数默认参数与箭头函数

//默认参数
<script>
	function sum(a,b){//当不传实参的话默认给a=undefined;  b=undefined;
	    return a+b;
	}
	
	var result = sum(1,2);
</script>

//箭头函数
<script>
	var sum = (a,b)=>{
	    return a+b;
	}
	//改进
	var sum = (a,b)=>a+b;
	
	//规律
	//1.去掉function
	//2.在括号后面加箭头
	//3.如果仅仅只有一个return可以直接省略花括号。
	var arr = [1,2,3,4,5,6];
	var newarr = arr.map(function(obj){
	    return obj*2;
	});//旧方法给数组中每个元素*2
	var newarr = arr.map((obj)=>obj*2);//箭头函数修改后
</script>

对象初始化简写

//原始
<script>
	var person = {
	    name:"wwy",
	    age:18,
	    addr:"合肥"
	    say:function(){
	        console.log("我好帅！");
	    }
	}
	//es6简写（因为对象是key:value存在）
	//1.如果key和变量的名字一致，可以指定定义一次即可
	//2.如果value是一个函数，可以把‘:function’去掉，只剩下()即可
	var name = "zzz";
	var age = 21;
	var addr = "北京";
	var person = {
	    name,
	    age,
	    addr,
	    say(){
	        console.log("修改后，我还是好帅！");
	    }
	}
</script>

对象简写的应用

<form action="" methond="post">
    用户名<input type="text" id = username name = username/>
    密  码<input type="password" id = password name = "password"/>
    <input type = "button" value = "登录" id = "loginbtn"/>
</form>

<script>
    $("#loginbtn").on("click",function(){
		var account = $("#username").val();
         var pwd = $("#password").val();
        //对象简写
        //var params = {username:account,password:pwd};
        var params = {account,pwd};
        //异步请求
        /*$.ajax({
            type:post,
            url:"xxxx",
            data:params,
            success:function(){
                
            }
        });*/
       $.ajax({
            type:post,
            url:"xxxx",
            data:params,
            success(){
                
            }
        });
    });
</script>

对象结构

<script>
	var name = "zzz";
	var age = 21;
	var addr = "北京";
	var person = {
	    name,
	    age,
	    addr,
	    say(){
	        console.log("修改后，我还是好帅！");
	    }
	}
	
	//通过  .  的方式
	console.log(person.name);
	console.log(person.age);
	console.log(person.addr);
	person.say();
	//通过  []  的方式
	console.log(person["name"]);
	console.log(person["age"]);
	console.log(person["addr"]);
	person["say"]();
	//es6对象结构 - 其实就是快速获取属性和方法的方式一种形式
	var {name,age,say} = person;
	//还原代码
	var name = person.name;
	var age = person.age;
	var say = person.say();
</script>

传播操作符【…】

<script>
	var name = "wangwenyong";
	var age = 18;
	var addr = "杭州";
	var person = {
	    name,
	    age,
	    addr,
	    say(){
	        consol.log("真帅！");
	    }
	}
	
	//结构另一个对象出来
	var {name,age,...person2} = person;
	console.log(name);
	console.log(age);
	console.log(person2);//除了name和age其它都有。
</script>

数组 map和reduce方法使用（了解）

//map

<script>
	//要求arr数组每个元素*2
	let arr = [1,2,3,4,5,6];
	//传统方式
	let newarr = [];
	for(let i=0;i<arr.lenth;i++){
	    newarr.push(arr[i]*2);
	}
	//使用map
	var newarr2 = arr.map(function(ele){
	    return ele*2;
	});
	//修改
	var newarr3 = arr.map(ele=>ele*2);
	
	//真实案例
	var users = [{name:"张三",age:10},{name:"李四",age:11},{name:"王五",age:12}];
	var newusers = user.map(ele=>{
	   ele.age = ele.age+1;
	    return ele;
	});
</script>

//reduce

<script>
	var arr = [1,2,3,4,5,6,7,8,9];
	//a=1 , b=2
	//a=3 , b=3
	//a=6 , b=4 ........
	var result = arr.reduce(function(a,b){
	   return a+b; 
	});
</script>
//result就是arr数组的和

Npm包管理器

npm: node package manager ,node包管理器，类似于maven

作用：1.快速构建node.js工程 （-npm init -y） 产生：package.json文件，记录一些工程信息，

​ 2.快速安装和依赖第三方模块。比如npm install mysql redis rabbitmq 等等。工具是下载到文件夹node_modules

​ 并且在package.json文件的“dependencies”里面标注。
3.一个别人的新的工程导入库，我们可以在含有package.json目录里面输入npm install就可以根据package.json文件一次性将所需要库导入。

{
  "name": "testpackage",
  "version": "1.0.0",
  "description": "测试构建一个node项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ahtcm"
  ],
  "author": "wwy",
  "license": "ISC"
}

修改镜像地址（使用阿里云仓库，使得下载更快）

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list

下载各种版本的模块

npm install 模块名称@版本号

卸载模块

npm uninstall 模块名称

Babel

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。Bable就是将ES6代码转化为ES5代码

Babel的安装与检查版本

#babel安装
npm install -g babel-cli
#查看babel版本
babel --version

详细步骤

1.建立文件夹

2.npm init -y

3.创建src，并且创建一个code.js文件

4.在根目录创建一个 .babelrc的文件。里面写入想要转换的版本

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

5.在根目录安装转换器

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

6.装好后就可以转换了。（在根目录）

babel src -d dist

自定义脚本配置，一键转化

7.改写package.json

{
    "script":{
        "dev":"babel src -d dist"
    }
}
注意：如果这里面还有语句记得要加,隔离开来。不然会报错（package.json must be actual JSON, not just JavaScript.）

8.转码的时候，执行下面的命令(在根目录)

npm run dev

模块化管理

CommonJS模块化规范

ES6模块化规范

ConmmonJS规范

封装四则运算工具类（ArithmeticUtil.js）

//java中叫工具类
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 di = function(a,b){
    return a/b;
}
//导出给别人使用就好了
module.exports = {
    sum,
    sub,
    mul,
    di
}

使用工具类

//导入四则运算
const m = require('./ArithmeticUtil.js')

//想要在外面使用，必须保证方法已经被导出
console.log(m.sum(1,2));
console.log(m.sub(1,2));
console.log(m.mul(1,2));
console.log(m.di(1,2));

ES6规范

使用export导出模块（UserAPI.js）

export function getList(){
    //在真实业务中，异步数据获取数据
    console.log("获取数据列表");
}
export function save(){
    //在真实业务中，异步获取数据
    console.log("保存数据");
}

使用import导出模块

import {getList,save} from './UserAPI.js'
getList();
save();//默认不支持 es6 语法的 import。（ Cannot use import statement outside a module ）

改进

UserAPI.js

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

使用

import user from './UserAPI.js'
user.getList();
user.save();

Webpack打包编译

Webpack：前端资源加载 / 打包工具。

安装以及查看版本

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

详细步骤

1:创建nodejs项目  npm init -y
2:创建src目录
3：在src存放俩个需要合并的util.js(工具类)和common.js(用户管理类)
4：准备一个入口文件 main.js,其实就是把模块集中进行引入
5：在根目录下定义个webpack.config.js文件配置打包的规则
6：执行webpack查看效果

webpack合并js

src

//util.js
//相加函数
exports.add = (a,b) => a+b;

//common.js
//输出
exports.info = function(str){
    //往控制台输出
    console.log(str);
    //往浏览器输出
    document.write(str);
}

//main.js
//导入util
const util = require("./util");
//导入common
const common = require("./common");

common.info("100+200="+util.add(100,200));

在根目录创建文件：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/bundule.js文件中
        filename:"bundle.js"
    }
}

webpack对css打包

webpack本身只能处理javascript，如果需要处理其他文件就需要使用loader进行转换。所以必须安装style-loader和css-loader

css-loader：是将css装载到javascript

style-loader：是让javascript认识css

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

修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [
            {
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

在src文件夹创建style.css

body{
    background:pink;
}

修改main.js,在第一行引入style.css

require('./style.css');

运行编译命令

webpack -w 可以运行后一直监听

npm run dev  写好了脚本