es6模块化，websoket（附简易聊天室源码）以及webpack的详细使用

一、es6模块化

1.1 使用es6模块化步骤：

(1) 使用export暴露数据

(2) 使用import引入模块

(3) 在html中引入js文件，注意为script的属性设置 type="module"

1.2 export

1.2.1 暴露

单个暴露语法1：

export let 变量1=值1;  
export var 变量2=值2; 
export function(){}
...

批量暴露语法2：

let 变量1 = 值1;
let 变量2 = 值2;
function 方法名(){}
...
​
export {变量1,变量2,方法名,,}

描述：暴露多个数据，注意变量的名称和暴露的名称一致

1.2.2 引入

语法：

import { 变量 }  from 文件  
import { 变量 as  新变量名 } from 文件

描述：加载模块

1.3 export default

1.3.1 暴露

默认暴露语法：

export default 内容

描述：只暴露一个数据

注意：默认暴露在同一个文件中能使用一次

1.3.2 引入

语法：

import 变量 from "文件路径"

二、websocket

2.1 websocket介绍【重点】

websocket是HTML5新增的协议，使用websocket协议可以使客户端与服务器进行双向通信，也就是除了客户端可以发送消息给服务器外，服务器也可以主动推送消息给客户端。

在websocket之前可以使用ajax+定时器来实现聊天室的这种类似功能。

2.2 socket.io模块

使用步骤：

(1)下载socket.io

npm install socket.io@2

(2)使用express搭建服务器并配置socket.io

(3)配置客户端

(4)访问服务器建立连接

(5)业务代码

2.3 常用方法

2.3.1 webSocket

语法：

let webSocket = require('socket.io')
webSocket(server)

描述：返回socket.io对象，参数server为app.listen返回的server对象

2.3.2 io

语法：

io( websocket服务器地址 )

描述：客户端与服务器端建立连接

2.3.3 on：接收消息

语法1：

io.on( 'connect',callback )

描述1：语法1为当用户连接服务器则触发connect事件，注意：前端需要 io( websocket服务器地址 )

语法2：

websocketObj.on( event,callback )

描述2：语法2为客户端兼听服务器端发送过来的消息，也可以是服务器端兼听客户端发过来的消息

2.3.4 emit：发送消息

语法1：

websocketObj.emit( 事件,消息对象 )

描述1：触发事件并发送消息

语法2：

io.sockets.emit(事件,消息对象)

描述2：触发所有客户端兼听的事件并发送消息

2.3.5 join：加入房间

语法：

webSocketObj.join(房间id,事件回调)

描述：加入房间

2.3.6 to：将消息发送到指定的房间中

语法：

io.to( 房间号 ).emit( 事件,消息对象 )

描述：触发对象房间号的用户事件，并发送消息

2.4 群聊

服务端的代码：

const express = require('express');
const path = require('path');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
//监听事件：是否有新的websocket连接
io.on('connection', (socket) => {
    //接收客户端发送的消息：
    socket.on('chat', d => {
        //console.log(d, 999);
        //服务器将接收到的消息推送给所有客户端：io.emit()
        io.emit('rechat', d);
    });
});
server.listen(3000);
//处理用户登录聊天室
app.get('/login', (req, res) => {
    let { usr = '' } = req.query;
    if (usr == '') {
        res.send(``);
        return;
    }
    res.cookie('UNAME', usr); //将用户名保存到cookie中
    res.send(``);
});


//开放静态资源
app.use(express.static(path.join(__dirname, 'www')))

客户端的代码如下：

2.5 分区(分房间)通信

服务端的代码如下：

const express = require('express');
const path = require('path');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', (socket) => {
    // console.log( socket.handshake.query );
    let roomid = socket.handshake.query.roomid //接收房间号
    //2. 当前连接上的用户加入某一个房间
    socket.join(roomid, () => {
        // console.log('加入房间成功：' + roomid)
        socket.emit('event1', '加入成功')
    })
    socket.on('front_message1', (message) => {
        // console.log(message, 8888);
        io.to(roomid).emit('server_message1', message) //点对点
    })
})
server.listen(3000);
//托管静态资源
app.use(express.static(path.join(__dirname, 'www')));

客户端代码如下：

    
    
    
    


    
    加入房间
    
    发送消息
    
    
    

三、webpack

3.1 webpack概念

Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按进行打包成线上环境所需的前端资源。同时webpack依赖node环境 。webpack对一些模块的版本要求非常严格

注意：webpack是前端开发者需要的一个工具。

开发环境：

生产环境：

3.1.1为什么学习webpack

3.2 准备工作

webpack官网 webpack 中文文档 | webpack 中文网

(1)安装node

(2)安装webpack和webpack-cli , npm i webpack@4 webpack-cli@3 -g

(3)检查webpack是否安装成功 , webpack --version

3.3 webpack核心介绍

键名	概念	解释
context	入口起点	基础目录，绝对路径，用于从配置中解析入口起点(entry point)
entry	入口 (必须)	配置打包入口文件的名字
output	出口 (必须)	打包后输出到哪里, 和输出的文件名
module	加载器配置	在rules对应数组中, 定义对象规则
plugins	插件配置	配置插件功能（插件有着webpack不具备的某些功能，比如：压缩html文件）

3.3.1 webpack.config.js 语法格式

module.exports = {
    context:入口起点,
    entry:入口,
    output:{
        path:出口目录,
        filename:文件名,
    },
    module: { 
        rules: [ 
            加载器规则 
        ]
    },
    plugins:[
        插件
    ]
}

3.4 webpack使用

3.4.1 初识webpack进行打包js

3.4.2 css处理

loader的认识

步骤：

css-loader 3版本 style-loader 2版本

npm i css-loader@3 style-loader@2 -D

devDependencies：

dependencies：

module: {
	rules: [ 
		{ 
			test: /\.css$/, 
			use: [ 'style-loader', 'css-loader' ]
		}
	]
}

3.4.3 分离css

extract-text-webpack-plugin@next 插件

安装下载

npm i extract-text-webpack-plugin@next -D

加载器修改配置

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
rules: [ // 加载器的使用规则
	{
		test: /\.css$/,
		use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
			fallback: "style-loader", 
        	use: "css-loader"  // loader被用于将资源转换成一个CSS单独文件
        })
	}
]

插件配置

new ExtractTextPlugin("style.css"), // 输出的文件名

报错说明：

Error: Cannot find module 'webpack/lib/Chunk'

解决方案：在项目目录下下载webpack@4

3.4.4 打包less

1. 需要安装less 和 less-loader 来解析less代码, 和加载less文件

   npm i less@3 less-loader@7 -D

2. 在webpack.config.js中 配置加载器, 解析.less文件

   { 
   	test: /\.less$/, 
   	use: ['style-loader', 'css-loader', "less-loader"]
   }

3. 但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码

   { 
   	test: /\.less$/, 
   	use: ExtractTextPlugin.extract({ 
   		fallback: "style-loader", 
   		use: ['css-loader', "less-loader"]
   	})
   }

4. 观察打包后style.css中多了less文件里的样式代码

3.4.5 生成html

html-webpack-plugin插件。

下载

npm i html-webpack-plugin@4 -D

注意：插件需要显示的引入到webpack.config.js中

plugins属性

plugins:[
        new HtmlWebpackPlugin({ // 插件配置对象
            filename: "index.html", // 产出文件名(在dist目录查看)
            template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
            favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
            minify: {                             //对html文件进行压缩，
                    collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
                    minifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                    minifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）
                    removeAttributeQuotes: true,      //是否移除属性的引号 默认false
                    removeComments: true,             //是否移除注释 默认false
                    removeCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认false
             }
        }) // 数组元素是插件的new对象
    ]

如果报错说明

Cannot find module "webpack/lib/node/NodeTeplatePlugins"

在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本

npm i webpack@4 -D

3.4.6 静态资源处理

1. 需要下载2个加载器模块

   • url-loader、file-loader

下载：

npm i url-loader@4 file-loader@6 -D

注意: webpack认为, 图片也是一个模块, 所以才需要loader来解析图片)

2.webpack.config.js加载器配置:

在module中加上此配置。

 {
     test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
     use: 'url-loader'
 }

// 如果处理字体图标需要引入这个
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader'
}

3.4.7 jquery使用

在webpack打包的项目中, 使用jQuery功能

1. 下载jquery模块,

   npm i jquery

2. 在main.js中引入jquery,

   import $ from 'jquery'

3.4.8 热更新

1. webpack-dev-server会实时监听文件变化, 自动打包到内存中, 而不是生成硬盘上的dist目录

2. webpack-dev-server 它还会启动一个本地的服务器, 来支持你访问打包后的html网页

   • 下载webpack-dev-server -g

   • npm i webpack-dev-server -g

   • webpack-dev-server --version

3. 在项目下运行 命令: webpack-dev-server 可启动热更新服务器, 会根据目录下的webpack.config.js,只是在内存中运行起来了。

4. 注意: 如果修改了配置(webpack.config.js)文件, 还是需要重启终端, 如果是src下的代码, 会自动打包

5. 注意: 默认需要打包输出的文件名必须为 index.html文件

6. 默认在端口号:8080上启动我们热更新服务器, 项目都在这个服务器上打开访问

7. 当开发完毕还需要使用webpack命令进行打包到dist目录 。

webpack.config.js配置：

devServer: { // 在这里可以对webpack-dev-server进行一些配置
        port: 9090, //修改端口号，默认为8080
        open: true, // 自动调用默认浏览器打开
}