内容:es6模块化和webpack 日期:xx-xx-xx
一、es6模块化
1.1 使用es6模块化步骤:
(1) 使用export暴露数据
(2) 使用import引入模块
(3) 在html中引入js文件,注意为script的属性设置 type="module"
1.2 export
1.2.1 暴露
语法1:
export var 变量1=值1; export var 变量2=值2; ...
语法2:
let 变量1 = 值1; let 变量2 = 值2; ... export {变量1,变量2,,}
描述:暴露多个数据,注意变量的名称和暴露的名称一致
1.2.2 引入
语法:
import { 变量 } 文件 import { 变量 as 新变量名 } 文件
描述:加载模块
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 群聊
2.5 点对点通信
三、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
-
需要安装less 和 less-loader 来解析less代码, 和加载less文件
npm i less@3 less-loader@7 -D
-
在webpack.config.js中 配置加载器, 解析.less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', "less-loader"] }
-
但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码
{ test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ['css-loader', "less-loader"] }) }
-
观察打包后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 静态资源处理
-
需要下载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功能
-
下载jquery模块,
npm i jquery
-
在main.js中引入jquery,
import $ from 'jquery'
3.4.8 热更新
-
webpack-dev-server会实时监听文件变化, 自动打包到内存中, 而不是生成硬盘上的dist目录
-
webpack-dev-server 它还会启动一个本地的服务器, 来支持你访问打包后的html网页
-
下载webpack-dev-server -g
-
npm i webpack-dev-server -g
-
webpack-dev-server --version
-
-
在项目下运行 命令: webpack-dev-server 可启动热更新服务器, 会根据目录下的webpack.config.js,只是在内存中运行起来了。
-
注意: 如果修改了配置(webpack.config.js)文件, 还是需要重启终端, 如果是src下的代码, 会自动打包
-
注意: 默认需要打包输出的文件名必须为 index.html文件
-
默认在端口号:8080上启动我们热更新服务器, 项目都在这个服务器上打开访问
-
当开发完毕还需要使用webpack命令进行打包到dist目录 。
webpack.config.js配置:
devServer: { // 在这里可以对webpack-dev-server进行一些配置 port: 9090, //修改端口号,默认为8080 open: true, // 自动调用默认浏览器打开 }