当前位置： 首页 > news >正文

记录--webpack和vite原理

news 文章来源：https://blog.csdn.net/qq_40716795/article/details/132353779 2024/10/8 18:40:20

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前言

每次用vite创建项目秒建好，前几天用vue-cli创建了一个项目，足足等了我一分钟，那为什么用 vite 比 webpack 要快呢，这篇文章带你梳理清楚它们的原理及不同之处！文章有一点长，看完绝对有收获！

正文

一、webpack基本使用

webpack 的出现主要是解决浏览器里的 javascript 没有一个很好的方式去引入其它的文件这个问题的。 话说肯定有小伙伴不记得 webpack 打包是咋使用的(清楚的话可以跳过这一小节)，那么我以一个小 demo 来实现一下：

1. 搭建基本目录结构

  • 我们在vue项目中初始化后全局安装 webpack 和 webpack-cli ：

yarn add webpack webpack-cli -g

  • 创建vue所需的目录文件，以及webpack配置文件。

目录结构如下：

2. webpack.config.js配置文件编写

不清楚webpack配置项的朋友可以进官方文档瞅一眼：webpack 中文文档

看完之后，我们知道webpack主要包含的几个概念就开始编写配置文件了！

(1)打包main.js

代码如下：

const path = require('path')
module.exports = {mode: 'development',  //设置开发模式entry: path.resolve(__dirname, './src/main.js'),   //打包入口output: {   //打包到哪里去path: path.resolve(__dirname, 'dist'),filename: 'js/[name].js',  //默认文件名main.js}
}

为了方便我们运行，我们去package.json中配置命令，只需yarn dev就能运行了：

"dev": "webpack server --progress --config ./webpack.config.js"

运行后我们发现根目录多出了一个dist文件夹，我们进到main.js中查看发现打包成功了！

(2)打包index.html

问题❓：我们知道vue项目中是有一个index.html文件的，我们如果要打包这个html文件咋办呢？
我们就需要借助plugin插件去扩展webpack的能力，去装它：

yarn add html-webpack-plugin -D

引入并使用它：

const HtmlWebpackPlugin = require('html-webpack-plugin')plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'index.html'),    //需要被打包的htmlfilename: 'index.html',  //文件打包名title: '手动搭建vue' //html传进去的变量}),]

index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><%= htmlWebpackPlugin.options.title%></title>
</head>
<body><div id="app"></div>
</body>
</html>

好啦，我们再次运行打包命令，发现dist目录下多出index.html文件，打包成功！

(3)打包vue文件

首先，我们需要去安装vue的源码:

yarn add vue

新建一个App.vue：

<template><div>vue项目测试</div>
</template><script setup>
</script><style lang="css" scoped>
</style>

main.js中写入：

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.mount('#app')

我们再去打包，发现报错了，根据提示，我们可以推断webpack是不能处理且不能编译.vue后缀的文件的，这就需要引入loader及vue编译插件了！装它！

yarn add vue-loader@next
yarn add vue-template-compiler -D

继续在配置文件中引入并使用：

const { VueLoaderPlugin } = require('vue-loader')module: {rules: [{test: /\.vue$/,  //.vue后缀的文件use: ['vue-loader']  //启用vue-loader}]},plugins: [new VueLoaderPlugin()]

再次打包，打包成功！我们可以测试一下，用live server运行打包后的index.html看看，会发现写在vue中的文字在页面成功展示！

(4)打包css

那么我们如果要在vue中写css样式呢？显然webpack是识别不了的，还得loader来帮忙：

yarn add css-loader style-loader -D

配置文件中加入新的一条css规则:

module: {rules: [{test: /\.css$/,  //.css后缀的文件use: ['style-loader', 'css-loader']}]}
去vue文件中把字体样式改为 红色后，打包并测试一下，成功！：

(5)配置babel

为了防止 webpack 识别不了高版本的 js 代码，我们去装 babel ：

yarn add @babel/core @babel/cdpreset-env babel-loader -D

webpack.config.js 配置文件添加新的一条 js 规则：

module: {rules: [{test: /\.js$/,  //.js后缀的文件exclude: /node_modules/, //不包含node_modulesuse: ['babel-loader']}]}
babel.config.js 配置文件代码如下： 
module.exports={presets:[['@babel/preset-env',{'targets':{'browsers':['last 2 versions']}}]]
}

3. webpack热重载

热重载它是webpack的一个超级nice的插件，让你不用每次都去执行打包命令，装它：

yarn add webpack-dev-server -D

之后，我们去webpack.config.js中配置：

devServer: { static:{directory: path.resolve(__dirname, './dist')},port:8080,  //端口hot: true, //自动打包host:'localhost', open:true //自动跳到浏览器}

此时还需要将package.json中的命令改改：

"dev": "webpack server --progress --config ./webpack.config.js"

我们使用yarn dev再次运行，熟悉的一幕来了！自动跳转到浏览器且将vue文件的内容展示在页面上，修改vue内容也会自动打包！

好了！到这里，基本的打包流程你已经get清楚了，下面我们来研究研究它的打包原理吧！

二、webpack打包原理

实现一个webpack的思路主要有三步：

  • 读取入口文件内容(使用 fs )
  • 分析入口文件，递归的方式去读取模块所依赖的文件并且生成AST语法树
    1. 安装 @babel/parser 转AST树)
  • 根据AST语法树，生成浏览器可以运行的代码(遍历AST树)
    1. 安装 @babel/traverse 做依赖收集
    2. 安装 @babel/core 和 @babel/preset-env 让es6转es5

我们去新建一个目录，结构如下(其中 add.js 和 minus.js 定义了两个值相加减的函数并将其抛出，index.js中引入这两个函数并打印结果，代码就不附上了，比较简单)：

 bundle.js 是我们用来打造 webpack 的文件，代码如下：

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')const getModuleInfo = (file) => {//1 读文件const body = fs.readFileSync(file, 'utf8');  //读到路径下的文件内容//2 分析文件转AST树const ast = parser.parse(body, {   //body为需要解析的代码sourceType: 'module' //以es6的模块化语法解析})// console.log(ast.program.body);  //[{},{},{}...]//3 依赖收集 const deps = {}traverse(ast, { //遍历astImportDeclaration({ node }) {  //把import类型的对象找出来const dirname = path.dirname(file)  //拿到index.js所在文件夹路径const abspath = './' + path.posix.join(dirname, node.source.value) //add.js文件的绝对路径deps[node.source.value] = abspath //key:'./add.js'  value:'xxx/add.js'}})//4.把ast->codeconst { code } = babel.transformFromAst(ast, null, {presets: ['@babel/preset-env']})console.log(code);const moduleInfo = { file, deps, code }return moduleInfo
}//5. 递归获取所有依赖
const parseModules = (file) => {const entry = getModuleInfo(file)const temp = [entry]const depsGraph = {}for (let i = 0; i < temp.length; i++) {const deps = temp[i].deps //{ './add.js': './src/add.js', './minus.js': './src/minus.js' }if (deps) {for (const key in deps) {if (deps.hasOwnProperty(key)) {temp.push(getModuleInfo(deps[key]))}}}}temp.forEach(moduleInfo => {depsGraph[moduleInfo.file] = {deps: moduleInfo.deps,code: moduleInfo.code}})// console.log(temp);return depsGraph
}//打包
const bundle = (file) => {const depsGraph = JSON.stringify(parseModules(file));//手写一个require 借助evalreturn `(function(grash) {function require(file) {function absRequire(relPath) {return require(grash[file].deps[relPath])}var exports = {};(function(require, code) {eval(code)})(absRequire, grash[file].code)return exports}require('${file}')})(${depsGraph})`}const result=bundle('./src/index.js')
fs.mkdirSync('./dist')
fs.writeFileSync('./dist/bundle.js', result)

我们使用node去运行这个文件，去到 html 页面上，发现控制台能输出加减法对应的结果，说明打包成功！

但是，webpack有一个缺点，如果在这个文件中需要改动一点点再保存，webpack的热重载又会重新自动打包一次，这对于大型项目是极不友好的，这时间估计等的花都要谢了。那么vite出现了！

三、vite打包原理

我们知道，当声明一个 script 标签类型为 module 时，浏览器会对其内部的 import 引用发起 HTTP 请求获取模块内容。那么，vite 会劫持这些请求并进行相应处理。因为浏览器只会对用到的模块发送http请求，所以vite不用对项目中所有文件都打包，而是按需加载，大大减少了AST树的生成和代码转换，降低服务启动的时间和项目复杂度的耦合，提升了开发者的体验。

1. 需要解决的问题

那么，要打包一个vue项目，它的入口文件是main.js，浏览器会遇到三个问题：

import { createApp } from 'vue' //浏览器无法识别vue路径
import App from './App.vue' //浏览器无法解析.vue文件
import './index.css' //index.css不是一个合法的js文件，因为import只能引入js文件const app = createApp(App)
app.mount('#app')

知道怎么解决这几个问题，我们就能打造一个vite了！

2. 打造vite

我们使用 koa 去搭建一个本地服务让其可以运行，新建一个 server.js 文件用来打造 vite ，代码如下：

//用node启一个服务
const Koa = require('koa');
const app = new Koa()
const fs = require('fs')
const path = require('path')
const compilerDom = require('@vue/compiler-dom')  //引入vue源码  能识别template中的代码
const compilerSfc = require('@vue/compiler-sfc')  // 能识别script中的代码function rewriteImport(content) {return content.replace(/ from ['|"]([^'"]+)['|"]/g, (s0, s1) => {//若以 ./  ../  / 开头的相对路径console.log(s0, s1);if (s1[0] !== '.' && s1[0] !== '/') {   //'vuereturn ` from '/@modules/${s1}'`   //去http://localhost:5173/@modules/vue} else {return s0}})
}app.use((ctx) => {const { request: { url, query } } = ctxif (url === '/') {//读index.htmlctx.type = 'text/html'  //设置类型let content = fs.readFileSync('./index.html', 'utf8')  //读文件// console.log(content);ctx.body = content//content输出给前端}else if (url.endsWith('.js')) {  //js文件  /src/main.jsconst p = path.resolve(__dirname, url.slice(1))  //   src/main.js  拿到文件的绝对路径ctx.type = 'application/javascript'const content = fs.readFileSync(p, 'utf8')ctx.body = rewriteImport(content)}else if (url.startsWith('/@modules')) { //  '/@modules/vue'const prefix = path.resolve(__dirname, 'node_modules', url.replace('/@modules/', ''))  // 'vue'const module = require(prefix + '/package.json').module //读取package.json中的module字段   拿到vue的模块源码地址const p = path.resolve(prefix, module)  // 拿到vue的模块源码的终极地址const ret = fs.readFileSync(p, 'utf8')  //读取文件ctx.type = 'application/javascript'ctx.body = rewriteImport(ret)  //递归 防止vue源码又用到了其它模块}else if (url.indexOf('.vue') > -1) {const p = path.resolve(__dirname, url.split('?')[0].slice(1)) // src/App.vueconst { descriptor } = compilerSfc.parse(fs.readFileSync(p, 'utf8'))console.log(descriptor);if (!query.type) { // 返回.vue文件的js部分ctx.type = 'application/javascript'ctx.body = `${rewriteImport(descriptor.script.content.replace('export default ', 'const __script = '))}import { render as __render } from "${url}?type=template"__script.render = __renderexport default __script`} else if (query.type === 'template') { // 返回.vue文件的html部分const template = descriptor.templateconst render = compilerDom.compile(template.content, {mode: 'module'}).codectx.type = 'application/javascript'ctx.body = rewriteImport(render)}}else if (url.endsWith('.css')) {const p = path.resolve(__dirname, url.slice(1))const file = fs.readFileSync(p, 'utf8')const content = `const css="${file.replace(/\n/g, '')}"let link=document.createElement('style')link.setAttribute('type','text/css')document.head.appendChild(link)link.innerHTML = cssexport default css`ctx.type = "application/javascript"ctx.body = content}
})app.listen(5173, () => {console.log('listening on port 5173');
})

3. vite热更新

那么，vite 的热更新怎么实现呢？

我们可以使用chokidar库来监听某个文件夹的变更，只要监听到有文件变更，就用websocket通知浏览器重新发一个请求，浏览器就会在代码每次变更之后立刻重新请求这份资源。

(1) 安装chokidar库：

yarn add chokidar -D

(2) 之后去新建一个文件夹chokidar，在其中新建 handleHMRUpdate.js 用于实现监听：

const chokidar = require('chokidar');export function watch() {const watcher = chokidar.watch('../src', {ignored: ['**/node_modules/**', '**/.git/**'],  //不监听哪些文件ignorePermissionErrors: true,disableGlobbing: true})return watcher
}export function handleHMRupdate(opts) {   //创建websocket连接 客户端不给服务端发请求，服务端可以通过websocket来发数据const { file, ws } = optsconst shortFile = getShortName(file, appRoot)const timestamp = Date.now()let updates;if (shortFile.endsWith('.css')) {  //css文件的热更新updates = [{type: 'js-update',timestamp,path: `${shortFile}`,acceptPath: `${shortFile}`}]}ws.send({type: 'update',updates})
}

本文转载于:

https://juejin.cn/post/7267791228872671247

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

相关文章：

记录--webpack和vite原理

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 每次用vite创建项目秒建好&#xff0c;前几天用vue-cli创建了一个项目&#xff0c;足足等了我一分钟&#xff0c;那为什么用 vite 比 webpack 要快呢&#xff0c;这篇文章带你梳理清楚它们的原理…...

编程日记 2023/8/19 21:47:05

Windows系统中使用bat脚本启动git bash 并运行指定命令 - 懒人一键git更新

目标 双击"autoGitPull.bat"&#xff0c;自动打开git bash&#xff0c;并cd到项目&#xff0c;逐个git pull&#xff0c;保留git bash窗口展示进度。 脚本 start "" "D:\Program Files\Git\git-bash.exe" -c "echo autoGitPull &&…...

编程日记 2023/8/19 21:46:03

elementui form组件出现英文提示

今天让解决一个bug&#xff0c;是表单组件提示词会出现英文。 问题情景如下&#xff1a; 有时会出现中文&#xff0c;有时会出现英文。 解决方法&#xff1a; 经查看&#xff0c;代码采用的是elementui的form组件&#xff0c;在el-form-item中使用了required属性&#xff0c;同…...

编程日记 2023/8/19 21:45:00

使用windows Api简单验证ISO9660文件格式，以及装载和卸载镜像文件

使用IIsoImageManager接口简单验证ISO镜像文件正确性，使用AttachVirtualDisk装载ISO镜像文件，和使用DetachVirtualDisk卸载,（只支持windows 8及以上系统） 导读 IIsoImageManager 验证ISO文件正确性AttachVirtualDisk 装载镜像文件DetachVirtualDisk 卸载镜像文件其他相关函…...

编程日记 2023/8/19 21:43:58

iPhone 15受益：骁龙8 Gen 3可能缺席部分安卓旗舰机

明年一批领先的安卓手机的性能可能与今年的机型非常相似。硅成本的上涨可能是原因。 你可以想象&#xff0c;2024年许多最好的手机都会在Snapdragon 8 Gen 3上运行&#xff0c;这是高通公司针对移动设备的顶级芯片系统的更新&#xff0c;尚未宣布。然而&#xff0c;来自中国的…...

编程日记 2023/8/19 21:42:55

理解持续测试，才算理解DevOps

软件产品的成功与否&#xff0c;在很大程度上取决于对市场需求的及时把控&#xff0c;采用DevOps可以加快产品交付速度&#xff0c;改善用户体验&#xff0c;从而有助于保持领先于竞争对手的优势。 作为敏捷开发方法论的一种扩展&#xff0c;DevOps强调开发、测试和运维不同团…...

编程日记 2023/8/19 21:41:53

使用OpenCV与深度学习从视频和图像中精准识别人脸: Python实践指南

第一部分: 引言与背景 人脸识别已经成为了当代技术领域中最热门和广泛应用的话题之一。从智能手机的解锁功能到机场的安全检查&#xff0c;人脸识别技术无处不在。在这篇文章中&#xff0c;我们将使用Python中的OpenCV库和深度学习模型&#xff0c;深入探讨如何从视频和图像中…...

编程日记 2023/8/19 21:40:52

面试之快速学习C++11-完美转发，nullptr, shared_ptr,unique_ptr,weak_ptr,shared_from_this

完美转发及其实现 函数模版可以将自己的参数完美地转发给内部调用的其他函数。所谓完美&#xff0c;即不仅能准确地转发参数的值&#xff0c;还能保证被转发参数的左右值属性不变引用折叠&#xff1a;如果任一引用为左值引用&#xff0c;则结果为左值引用&#xff0c;否则为右…...

编程日记 2023/8/19 21:39:50

android resoure资源图片颜色值错乱

最近androidstudio开发&#xff0c;添加一些颜色值或者drawable资源文件时&#xff0c;运行app,颜色值或者图片对应不上&#xff0c;暂时找不到原因&#xff0c;望告知。 暂时解决方法&#xff1a;...

编程日记 2023/8/19 21:38:49

leetcode第 357/358 场周赛

2817. 限制条件下元素之间的最小绝对差 可能别人有更好的解法&#xff0c;我这写法是不断往线段树中插入数值&#xff0c;每次先插入nums[i-x]&#xff0c;然后搜索&#xff08;1到i)中的最大值和(i到max)中的最小值去更新ans。 class Solution { public:struct node{int mx,…...

编程日记 2023/8/19 21:37:48

Jmeter 分布式性能测试避坑指南

在做后端服务器性能测试中&#xff0c;我们会经常听到分布式。那你&#xff0c;是否了解分布式呢&#xff1f;今天&#xff0c;我们就来给大家讲讲&#xff0c;在企业实战中&#xff0c;如何使用分布式进行性能测试&#xff0c;实战过程中&#xff0c;又有哪些地方要特别注意&a…...

编程日记 2023/8/19 21:36:47

基于SpringCloud的会议室预约系统Java基于微服务的会议室报修系统【源码+lw】

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、微信小程序、Python、Android、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&#x1f495…...

编程日记 2023/8/19 21:35:46

idea设置忽略大小写

1.点击file 2.点击settings 3.点击Editor选项 4.点击general选项 5.点击code completion 6.点击左上角match case...

编程日记 2023/8/19 21:34:45

re学习（35）攻防世界-no-strings-attached(动调)

参考文章&#xff1a;re学习笔记&#xff08;28&#xff09;攻防世界-re-no-strings-attached_Forgo7ten的博客-CSDN博客 攻防世界逆向入门题之no-strings-attached_攻防世界 no-strings-attached_沐一 林的博客-CSDN博客 本人题解&#xff1a; 扔入Exepeinfo中查壳和其他信息…...

编程日记 2023/8/19 21:33:43

STM32 F103C8T6学习笔记8：0.96寸单色OLED显示屏显示字符

使用STM32F103 C8T6 驱动0.96寸单色OLED显示屏: OLED显示屏的驱动&#xff0c;在设计开发中OLED显示屏十分常见&#xff0c;因此今日学习一下。一篇文章从程序到显示都讲通。 文章提供源码、原理解释、测试工程下载&#xff0c;测试效果图展示。 目录 OLED驱动原理—IIC通信…...

编程日记 2023/8/19 21:32:41

vscode的配置和使用

1.侧边栏调整大小 放大&#xff1a;View -> Appearance -> Zoom in&#xff08;快捷键Ctrl &#xff09; 缩小&#xff1a;View -> Appearance -> Zoom out&#xff08;快捷键Ctrl -&#xff09; 侧边栏字体调整到合适大小后&#xff0c;可以按下一步调整代码区…...

编程日记 2023/8/19 21:31:40

SpringBoot统⼀功能处理

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 本章是讲Spring Boot 统⼀功能处理模块&#xff0c;也是 AOP 的实战环节&…...

编程日记 2023/8/19 21:30:39

LeetCode 每日一题 2023/8/14-2023/8/20

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 8/14 617. 合并二叉树8/15 833. 字符串中的查找与替换8/16 2682. 找出转圈游戏输家8/17 1444. 切披萨的方案数8/18 1388. 3n 块披萨8/19 2235. 两整数相加8/20 8/14 617. 合…...

编程日记 2023/8/19 21:29:35

进入微服务阶段后的学习方法

微服务SpringCloud学习的特点 陌生&#xff0c;多&#xff0c;复杂。 技术陌生&#xff0c;技术栈多&#xff0c;实现复杂。 学习方式 对于每一个组件&#xff1a; 1.知道是什么、有什么用 2.知道操作步骤&#xff08;跟着讲义操作即可&#xff09;&#xff0c;包括&#…...

编程日记 2023/8/19 21:28:35

C/C++中const关键字详解

为什么使用const&#xff1f;采用符号常量写出的代码更容易维护&#xff1b;指针常常是边读边移动&#xff0c;而不是边写边移动&#xff1b;许多函数参数是只读不写的。const最常见用途是作为数组的界和switch分情况标号(也可以用枚举符代替)&#xff0c;分类如下&#xff1a;…...

编程日记 2023/8/19 21:27:34

【2023新教程】树莓派4B开机启动-树莓派第一次启动-树莓派不使用显示器启动-树莓派从购买到启动一步一步完全版！

背景 闲来无事&#xff0c;在咸鱼上买了一个树莓派4B。买来配件都十分齐全&#xff0c;于是就想着启动来测试一下。下面是树莓派无显示器第一次启动的全过程&#xff0c;包含安装系统。 网上的教程大多需要额外使用显示器、鼠标、键盘之类的外设。然而&#xff0c;树莓派本身就…...

编程日记 2023/8/19 21:26:31

LA@2@1@线性方程组和简单矩阵方程有解判定定理

文章目录 矩阵方程有解判定定理线性方程组有解判定特化:齐次线性方程组有解判定推广:矩阵方程 A X B AXB AXB有解判定证明推论 矩阵方程有解判定定理 线性方程组有解判定 线性方程组 A x b A\bold{x}\bold{b} Axb有解的充分必要条件是它的系数矩阵A和增广矩阵 ( A , b ) (A,…...

编程日记 2023/8/19 21:25:22

如何使用ChatGPT创作一个小说式的虚构的世界

世界构建也许是小说写作中最重要的一环&#xff0c;但也可能非常耗时。让ChatGPT加快这一过程吧。 写小说最棒的一点就是有机会从零开始创造一个新世界。你可以创造超凡脱俗的景观&#xff0c;赋予人物魔法。神话故事可以存在于你小说中的现实世界&#xff0c;而传统可以帮助你…...

编程日记 2023/8/19 21:24:21

用于量子通信和互联网的光量子芯片

近年来&#xff0c;新兴的光量子芯片在量子通信和量子互联网领域取得了重大进展。光量子芯片芯片具有可扩展、稳定和低成本等特点&#xff0c;为微型化应用开辟了新的可能性。 7月14日&#xff0c;一篇发表在《light: science & applications》的文章概述了用于量子通信的光…...

编程日记 2023/8/19 21:23:20

11. Vuepress2.x 关闭夜间模式

修改 docs/.vuepress/config.ts 配置文件 设置 themeConfig.darkMode属性详见 官网 module.exports {host: localhost, // ipport: 8099, //端口号title: 我的技术站, // 设置网站标题description: 描述&#xff1a;我的技术站,base: /, //默认路径head: [// 设置 favor.ico&a…...

编程日记 2023/8/19 21:22:18

netty实现websocket通信

调用注意&#xff1a; 1、端口一定要是可以访问的。 2、依赖必须注意和其他版本冲突&#xff0c;比如redis的springboot starter包&#xff0c;会与5.0版本冲突。 <netty.version>4.1.74.Final</netty.version> <dependency><groupId>io…...

编程日记 2023/8/19 21:21:17

两个list如何根据一个list中的属性去过滤掉另一个list中不包含这部分的属性，用流实现

你可以使用Java 8的流来实现这个功能。假设你有两个包含对象的List&#xff0c;每个对象有一个属性&#xff0c;你想根据一个List中的属性值来过滤掉另一个List中不包含这个属性值的对象。下面是一种使用流的方式来实现这个功能 import java.util.ArrayList; import java.util…...

编程日记 2023/8/19 21:20:15

Blender 混合现实3D模型制作指南【XR】

本教程分步展示如何&#xff1a; 减少 3D 模型的多边形数量&#xff0c;使其满足 Microsoft Dynamics 365 Guides 和使用 Microsoft Power Apps 创建的应用程序中包含的混合现实组件的特定性能目标的性能需求。将 3D 模型的多种材质&#xff08;颜色&#xff09;组合成可应用于…...

编程日记 2023/8/19 21:19:13

kubeasz在线安装K8S集群单master集群（kubeasz安装之二）

一、介绍 Kubeasz 是一个基于 Ansible 自动化工具&#xff0c;用于快速部署和管理 Kubernetes 集群的工具。它支持快速部署高可用的 Kubernetes 集群&#xff0c;支持容器化部署&#xff0c;可以方便地扩展集群规模&#xff0c;支持多租户&#xff0c;提供了强大的监控和日志分…...

编程日记 2023/8/19 21:18:12

『C语言』数据在内存中的存储规则

前言 小羊近期已经将C语言初阶学习内容与铁汁们分享完成&#xff0c;接下来小羊会继续追更C语言进阶相关知识&#xff0c;小伙伴们坐好板凳&#xff0c;拿起笔开始上课啦~ 一、数据类型的介绍 我们目前已经学了基本的内置类型&#xff1a; char //字符数据类型 short …...

编程日记 2023/8/19 21:17:11

基于ssm+vue的新能源汽车在线租赁管理系统源码和论文PPT

基于ssmvue的新能源汽车在线租赁管理系统源码和论文PPT010 开发环境&#xff1a; 开发工具&#xff1a;idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具&#xff1a;navcat,小海豚等 开发技术&#xff1a;java ssm tomcat8.5 摘 要 随着科学技术的飞速发展&#xff0…...

编程日记 2023/8/19 21:16:10

深入解析IDS/IPS与SSL/TLS和网络安全

目录 防火墙 IDS IPS DMZ VPN VPS SSL/TLS 动态IP 静态IP 防火墙 防火墙是一种网络安全设备&#xff0c;用于监控和控制网络流量&#xff0c;保护网络免受未经授权的访问、恶意攻击和威胁。防火墙可以基于规则进行数据包过滤&#xff0c;允许或阻止特定类型的流量通过…...

编程日记 2023/8/19 21:15:09

在Visual Studio上，使用OpenCV实现人脸识别

1. 环境与说明 本文介绍了如何在Visual Studio上&#xff0c;使用OpenCV来实现人脸识别的功能 环境说明 : 操作系统 : windows 10 64位Visual Studio版本 : Visual Studio Community 2022 (社区版)OpenCV版本 : OpenCV-4.8.0 (2023年7月最新版) 实现效果如图所示&#xff0…...

编程日记 2023/8/19 21:14:06

搭建openGauss 5.0 一主一从复制集群

openGauss是一款支持SQL2003标准语法&#xff0c;支持主备部署的高可用关系型国产数据库。 多种存储模式支持复合业务场景&#xff0c;新引入提供原地更新存储引擎。NUMA化数据结构支持高性能。Paxos一致性日志复制协议&#xff0c;主备模式&#xff0c;CRC校验支持高可用。支…...

编程日记 2023/8/19 21:13:01

Docker碎碎念

docker和虚拟机的区别 虚拟机&#xff08;VM&#xff09;是通过在物理硬件上运行一个完整的操作系统来实现的。 每个虚拟机都有自己的内核、设备驱动程序和用户空间&#xff0c;它们是相互独立且完全隔离的。 虚拟机可以在不同的物理服务器之间迁移&#xff0c;因为它们是以整…...

编程日记 2023/8/19 21:11:59

【C++】extern

目录 1. 变量声明和定义的关系 2. 默认状态下&#xff0c;const对象仅在文件内有效 3. 链接指示&#xff1a;extern "C" 3.1 声明一个非C的函数 3.2 链接指示与头文件 3.3 指向extern "C"函数的指针 3.4 链接指示对整个声明都有效 3.5 导出C函数到…...

编程日记 2023/8/19 21:10:58

2023全网Mysql 合集（25w字）附课程 从安装到高级，实战

mysql学习 1.安装mysql 安装教程 2.mysql的详细学习教程 mysql的详细教程 3.mysql 的高级优化 MySQL高级篇&#xff08;SQL优化、索引优化、锁机制、主从复制&#xff09; 4.MySQL 面试 MySQL数据库面试题总结 二.mysql实战 一、创建数据表并插入数据 1、学生表 Stud…...

编程日记 2023/8/19 21:09:57

张俊林：由ChatGPT反思大语言模型（LLM）的技术精要

转自&#xff1a;https://mp.weixin.qq.com/s/eMrv15yOO0oYQ-o-wiuSyw 导读&#xff1a;ChatGPT出现后惊喜或惊醒了很多人。惊喜是因为没想到大型语言模型&#xff08;LLM,Large Language Model&#xff09;效果能好成这样&#xff1b;惊醒是顿悟到我们对LLM的认知及发展理念&a…...

编程日记 2023/8/19 21:08:55

单机编排docker compose

Docker之旅(8)-单机编排docker compose 当在宿主机启动较多的容器时候&#xff0c;如果都是手动操作会觉得比较麻烦而且容易出错&#xff0c; 并且每个容器之间也会有先后启动的顺序依赖等。这个时候推荐使用 docker 单机 编排工具 docker-compose&#xff0c;docker-compose …...

编程日记 2023/8/19 21:07:54

C++ 面向对象三大特性——多态

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;C 继承 ☂️<3>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<4>前言&#xff1a;面向对象三大特性的&#xff0c;封装&#xff0c;继承&#xff0c;多态&#xff…...

编程日记 2023/8/19 21:06:52

相同数字的积木游戏

题目描述 题目描述 小华和小薇一起通过玩积木游戏学习数学。 他们有很多积木&#xff0c;每个积木块上都有一个数字&#xff0c;积木块上的数字可能相同。 小华随机拿一些积木挨着排成一排&#xff0c;请小薇找到这排积木中数字相同目所处位置最远的2块积木块&#xff0c;计算…...

编程日记 2023/8/19 21:05:51

安防监控视频云存储EasyCVR平台H.265转码功能更新：新增分辨率配置

安防视频集中存储EasyCVR视频监控综合管理平台可以根据不同的场景需求&#xff0c;让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上&#xff0c;视频云存储平台EasyCVR可实现视频实时直播、云端录像、视频云存储、视频存储…...

编程日记 2023/8/19 21:04:50

图数据库_Neo4j学习cypher语言_常用函数_关系函数_字符串函数_聚合函数_数据库备份_数据库恢复---Neo4j图数据库工作笔记0008

然后再来看一些常用函数,和字符串函数,这里举个例子,然后其他的 类似 可以看到substring字符串截取函数 可以看到截取成功 聚合函数 这里用了一个count(n) 统计函数,可以看到效果 关系函数,我们用过就是id(r) 可以取出对应的r的id来这样.....

编程日记 2023/8/19 21:03:48

LeetCode150道面试经典题-- 加一(简单)

1.题目 给定一个由 整数 组成的 非空 数组所表示的非负整数&#xff0c;在该数的基础上加一。 最高位数字存放在数组的首位&#xff0c; 数组中每个元素只存储单个数字。 你可以假设除了整数 0 之外&#xff0c;这个整数不会以零开头。 2.示例 示例 1&#xff1a; 输入&am…...

编程日记 2023/8/19 21:02:46

Centos7 配置Docker镜像加速器

docker实战(一):centos7 yum安装docker docker实战(二):基础命令篇 docker实战(三):docker网络模式(超详细) docker实战(四):docker架构原理 docker实战(五):docker镜像及仓库配置 docker实战(六):docker 网络及数据卷设置 docker实战(七):docker 性质及版本选择 认知升…...

编程日记 2023/8/19 21:01:42

微信小程序中pdf的上传、下载及excel导出

微信小程序中pdf的上传、下载及excel导出 pdf上传上传1&#xff1a;上传2&#xff1a; pdf下载导出excel pdf上传 上传两种方法&#xff1a; 上传1&#xff1a; 1.用vant weapp组件&#xff1a; //pdf上传--vant weapp组件 <view class"content"><van-u…...

编程日记 2023/8/19 21:00:41

Python_11 类的方法

一、查缺补漏 1. 实例方法必须用类实例化对象()来调用&#xff0c;用类来调用时会执行&#xff0c;但是self中不是实例化类地址而是传的字符串 二、类中的方法 1. 实例方法 1. 定义在类里面的普通方法(函数) 2. 第一个参数必须是类实例&#xff0c;在方法调用的时候会自动…...

编程日记 2023/8/19 20:59:40

CentOS系统环境搭建（一）——Centos7更新

Centos7更新 更新 yum&#xff08;包括centos内核&#xff09; yum update执行后&#xff0c;系统将更新到centos 7.9。 从这一篇文章开始开始&#xff0c;我将开始在centos系统环境搭建&#x1f517;https://blog.csdn.net/weixin_43982359/category_12411496.html中开始对C…...

编程日记 2023/8/19 20:58:37

Mariadb高可用MHA

目录 前言 一、概述 &#xff08;一&#xff09;、概念 &#xff08;二&#xff09;、组成 &#xff08;三&#xff09;、特点 &#xff08;四&#xff09;、工作原理 二、案例 &#xff08;一&#xff09;、构建MHA 1.所有节点ssh免密登录 2、MySQL主从复制 &#x…...

编程日记 2023/8/19 20:57:36

SASS 学习笔记 II

SASS 学习笔记 II 上篇笔记&#xff0c;SASS 学习笔记 中包含&#xff1a; 配置 变量 嵌套 这里加一个扩展&#xff0c;嵌套中有一个 & 的用法&#xff0c;使用 & 可以指代当前 block 中的 selector&#xff0c;后面可以追加其他的选择器。如当前的 scope 是 form&a…...

编程日记 2023/8/19 20:56:33