webpack
文章目录
- webpack
- 概念
- 打包的场景
- 为什么要打包
- 在打包之外 - 翻译
- 在打包之外 - 小动作
- 课程重点
- 模块化
- 利用立即执行函数来改变 `作用域`
- 模块化的优点
- 模块化方案的进化史
- AMD(成型比较早,应用不是很广泛)
- COMMONJS
- ES6 MODULE
- webpack 的打包机制
- webpack 的打包过程
- 配置开发环境——npm 与包管理器
- package.json 配置参数的含义
- name
- version
- scripts (npm run xx)
- npm install 的过程
- npm install 命令的额外参数 -s、-d
- webpack 核心特性
- webpack 安装
- 指定入口文件和出口文件
- 处理 css、图片... 等资源
- 文件加载器-loader
- 插件-plugin
- webpack 构建工程
- 实战 demo(创了两个项目,用案例了解 loader 和 plugin 的作用原理)
- 为什么要用 babel
- 让 webpack 支持解析 ES6 语法以及 jsx 文件(react 模版文件)
- 让 webpack 支持解析 html
- webpack-dev-server 跑一个本地服务
- 热更新(不刷新页面的情况下把改动同步下来)
- webpack 性能调优
- webpack 是什么
- 阐述(个人觉得很重要,可以对技术发展有个新认识,比较能说服自己的)
- 扩展
webpack
概念
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图**(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack 可以通过 loader 和 plugin 来扩展打包能力
- 例如 css-loader 来支持打包 css 文件…
- TerserPlugin 来做打包体积优化
打包的场景
为什么要打包
逻辑多、文件多,项目的复杂度提高了
在打包之外 - 翻译
他还能解释高级特性、语言(typescript / ES6 语法),这些代码直接在浏览器里写,可能浏览器无法识别,这时 webpack 就充当了翻译官的角色
在打包之外 - 小动作
提供了一些小插件
webpack 不仅强大,而且灵活(可插拔设计,需要的时候用,不需要的时候也可以移除掉,并没有绑定死)
课程重点
- 理解前端模块化
- 概念
- 不同模块化方案是如何实现的
- 理解 webpack 打包的核心思路
- 打包过程中都做了哪些步骤、做了哪些事、经历了哪些流程(后续遇到 bug 好排查)
- 理解 webpack 中的关键点
- plugin
- loader
入门的误区规避
- 不要执着于 API 和 命令
- API、命令,版本更新很频繁,很多 API 、命令可能下个版本就变更了
- 最主要的是了解他的概念、用来做什么的
模块化
作用域
- 按较早的写法,js 里的变量都是全局变量,会出现覆盖的问题,会导致变量重名、冲突的问题反复存在,会影响到你的预期结果
- 给同名变量不同的命名空间来解决这个问题
命名空间
模块化
利用立即执行函数来改变 作用域
保护对象的属性,不暴露出来,防止被随意篡改(模块作用域)
var SusanModule = (function() {var name = "Susan"var sex = "女孩"return {tell: function() {console.log("我的名字是", name)console.log("我的性别是", sex)}}
})()
较早期的模块实现方式(挂载到了 window 全局(浏览器的 window 对象是全局作用域))
(function(window) {var name = "Susan"var sex = "女孩"function tell() {console.log("我的名字是", name)console.log("我的性别是", sex)}window.SusanModule = { tell }
})(window)
模块化的优点
作用域封装
重用性
解除耦合(提升系统的可维护性,降低维护成本)
模块化方案的进化史
AMD(成型比较早,应用不是很广泛)
- Asynchronous Module Definition(异步模块定义)
- 显式的表达出了每个模块所依赖的其他模块有哪些,而且模块(内部变量?)的定义也不再绑定在全局作用域上,这更进一步地增强了模块的安全性,不必担心他在其他地方被篡改
// 求和模块的定义
define("getSum", ["math"], function (math) {return function (a, b) {console.log("sum:" + math.cum(a, b));}
});
COMMONJS
- 起初是服务端的标准,NODEJS 采用并实现了部分规范(2009)
- 每个文件就是一个模块,并且拥有它自己的一个作用域和上下文
- 模块的依赖通过 require 函数来引入,接口暴露通过 exports 导出
// 通过 require 函数来引入
const math = require("./math");// 通过 exports 将其导出
exports.getSum = function (a, b) {return a + b;
}
(上述两个方案的共同特性是规定模块的依赖必须显示引入,方便维护不同模块时,不必去操心引入顺序的问题)
ES6 MODULE
- 现在比较推荐的标准,语法级别的原生支持
// import 导入
import math from "./math";// export 导出
export function sum(a, b) {return a + b;
}
Gulp、GRUNT:帮助我们实现模块化构建的工具(比较老的工具库了)
- webpack 比他们后出现,更流行
webpack 的打包机制
-
webpack 与立即执行函数之间的关系
-
webpack 打包的核心逻辑
观察打包出来的结果,是一个立即执行函数
打包出来文件的大致结构:
(function(module) {var installedModules = {};function __webpack_require__(moduleId){// SOME CODE}// 。。。return __webpack_require__(0); // entry file})([ /* modules array */])
上述结构中的核心方法
function __webpack_require__(moduleId){// check if module is in cacheif(installedModules[moduleId]){return installedModules[moduleId].exports;}// create a new module (and put into cache)var module = installedModules[moduleId] = {i: moduleId,l: false,exports: {}};// exe the module funcmodules[moduleId].call{module.exports,module,module.exports,__webpack_require__};// flag the module as loadedmodule.l = true;// return the exxports of the modulereturn module.exports;}
webpack 的打包过程
- 从入口文件开始,分析整个应用的依赖树
- 将每个依赖模块包装起来,放在一个数组里面等待调用
- 实现模块加载的方法,并把它放在模块执行的环境中,确保模块间可以相互调用
- 把执行入口文件的逻辑放在一个函数表达式中,并立即执行这个函数
配置开发环境——npm 与包管理器
-
理解包管理器
-
熟悉 npm 核心特性
-
理解 npm
仓库
与依赖
的概念 -
理解 npm
语义化版本
-
掌握使用 npm 自定义工程脚本的方法
推荐将 npm 的仓库源设为国内的 淘宝源
- 在工作中发现很多文章博客都提出,不要使用 cnpm 工具,如果为了下载更快,推荐使用 淘宝源,而不是 cnpm
- 设置为 淘宝源 …
package.json 配置参数的含义
name
仓库名名称(npm install 名称、若要上传 npm,就要保证唯一)
version
语义化版本(npm install 的时候会自动选版本)
^version: 中版本和小版本
^1.0.1->1.x.x
~version: 小版本
~1.0.1->1.0.x
version: 特定版本
1.0.1->1.0.1
scripts (npm run xx)
可以定义一些命令(如启动服务、语法检查、webpack 打包等)
"dev": "webpack-dev-server"
"build": "eslint .... && webpack"
定义好的命令常见用法
- npm run build/dev/serve…
npm install 的过程
- 寻找包版本信息文件(package.json),依照它来进行安装
- 查 package.json 中的依赖,并检查项目中其他的版本信息文件
- 如果发现了新包,就更新版本信息文件
删掉重装有时解决不了问题,是这里面写的版本有问题(而不是依赖顺带安装的)
npm install 命令的额外参数 -s、-d
npm install echarts -s
- 安装 echarts ,并写入到 package.json 的 dependences 里,别人获取到项目时,npm install 就能安装相同的环境依赖,我们迁移代码的时候就可以不传 node_modules 文件夹,npm install 自动安装(npm 5.x 的版本在 npm install xx 的时候,把 -s 作为了默认参数)
- 故推荐使用 npm 5.x 以上的版本(新开发环境开始写代码前,也建议检查一下 npm 版本,可省事一些)
npm install echarts -d
- 安装 echarts,…放到了 devdependences 里,…
webpack 核心特性
- 使用 webpack 构建简单的工程
- 了解 webpack 配置文件
- 掌握 一切皆模块与loaders 的思想
- 理解 webpack 中的关键人物(关键部分)
- 入口文件、出口文件、loaders、plugin…
webpack 安装
npm install webpack-cli -g
全局安装,这样我们就可以直接在命令行里运行 webpack 命令了(一般在项目根目录执行 webpack 进行打包)- 去项目根目录的 src 下找 index.js 作为入口文件,分析依赖关系进行打包,然后生成 dist 文件夹,并将打包好的 main.js 放进去
- webpack 会有一些默认配置,如果我们需要自定义,一般会在项目根目录下新建一个 webpack.config.js 文件,里面写自定义配置(指定入口文件、出口文件、loaders、plugins 、web 服务的端口等)
指定入口文件和出口文件
// webpack.config.js
const path = require("path")module.exports = {entry: "./app.js",output: {path: path.join(__dirname, "dist"),filename: "bundle.js"}
}
webpack-dev-server
(命令行命令(需要安装全局 webpack-dev-server),不安装也可以,直接执行 ./node_modules/.bin/webpack-dev-server
)
- 可以帮我们启动一个 webpack 本地服务,监听项目文件的改动,当我们修改项目文件并保存的时候,它可以为我们动态的,实时的重新打包,并刷新浏览器(并不会在 dist 目录下生产文件(应该是在内存中))
处理 css、图片… 等资源
文件加载器-loader
(有 webpack 的项目中,可以在 js 文件里引入 图片、css、less、scss 等,webpack 会去处理这些依赖 => 需要引入对应的 loader ,并且没有意义)
npm install css-loader style-loader --save-dev
并在 webpack 中配置 loader- loader 的配置顺序和加载顺序是相反的,搞错了可能会报错(每个版本的 webpack 中的配置都会有一些不一样)
- 先写 style-loader 再写css-loader => 先解析 css,然后再用 css-loader 把 css 片段塞进去,所以 css-loader 要放后面
- 什么文件用什么 loader 解析(根据文件类型配置 loader)
- loader 的配置顺序和加载顺序是相反的,搞错了可能会报错(每个版本的 webpack 中的配置都会有一些不一样)
插件-plugin
做资源的处理、压缩(去除代码中不必要的内容,注释、换行…)
npm install uglifyjs-webpack-plugin -save-dev
并在 webpack 中配置 plugin(uglifyjs 是用来压缩代码体积的插件)
webpack 构建工程
- 使用 webpack 构建真实的 react 工程
- 掌握 babel 的用法,理解 babel 原理
- 掌握高频的 laoder 和 plugin 的用法
- 掌握生产级别的 webpack 配置方法
实战 demo(创了两个项目,用案例了解 loader 和 plugin 的作用原理)
并没有记全
新建项目文件,在根目录下 npm init
初始化一个项目(npm init -y
≈ 使用 npm 默认配置项,不需要一路回车设置项目名等)
npm install react react-dom
npm install webpack webpack-cli -g
- 将 webpack 安装到全局(类似?环境变量)
创建 src/App.jsx
…
为什么要用 babel
并不是所有的浏览器都支持 ES6 语法的,必须是版本比较高一些,比较新一些的浏览器才支持这个语法
- 如何把 ES6 的代码转换成版本较低的 JS 语法
- 可以使用 babel 来处理,进行代码的编译,把高版本的 JS 语法编译成低版本的 JS 语法
- 安装
npm install @babel/core @babel/cli -g
(在全局) - 新建一个 babel 项目,测试 babel 转换 JS 的 ES6 语法到 ES5 语法
npm install @babel/preset-env
这个包,可以把 高版本的 JS 语法转换成低版本的- 也支持像 webpack 一样的配置文件配置,可以直接写在 package.json 里(也可以在项目根路径创一个 .babelrc 文件写)
"babel": { "presets": ["@babel/preset-env"] }
- babel 命令在执行的时候如果没有指定规则,会优先查 .babelrc,没有就去看 package.json 里的配置
- 也支持像 webpack 一样的配置文件配置,可以直接写在 package.json 里(也可以在项目根路径创一个 .babelrc 文件写)
babel test.js --presets=@babel/preset-env
webpack 本身只处理ES5版本及以下的JS,ES6语法直接放在 webpack 下打包,肯定会报错的
html 在 webpack 中怎么处理
让 webpack 支持解析 ES6 语法以及 jsx 文件(react 模版文件)
npm install babel-loader
babel 的 loader
npm install @babel/preset-env @babel/preset-react
语法解析规则
安装完后在 webpack 中配置使用
让 webpack 支持解析 html
npm install html-webpack-plugin -d
并在 webpack 中配置
webpack 打包
webpack-dev-server 跑一个本地服务
(可以加 --config 指定配置文件,–open 直接使用浏览器打开…)
- 命令太长了每次打这么多很麻烦,我们也可以在 package.json 中写 scripts 脚本命令,然后用 npm run xx 来代替那些那么长的代码(写个 start/dev/serve /build)
热更新(不刷新页面的情况下把改动同步下来)
- HMR(webpack 已经支持了),在 webpack 配置中配置(入口文件里也要写点代码)
(webpack 5.x 和 html-webpack-plugin 不太兼容,有问题,所以按视频的操作跑不起来,需要指定版本)
webpack 性能调优
- 打包结果优化
- 用户体验
- 构建过程优化
- 开发者打包体验
- Tree-Shaking(比喻:摇树,把没用的树叶摇下来)
- webpack 中的特点,剔除一些无用的代码(DCE)
- 没有调用过的函数,直接就不引入进来
webpack --mode production
打包会自动给我们做代码压缩等操作,优化打包结果,当然我们也可以定制打包结果(压缩插件 uglifyjs => uglify-es => terser…)
- 使用 cache 缓存,可以加快我们的构建速度,一定时间内不会重复的去做压缩
- 移除无用代码、debugger、console、无用代码…
- 有时为了加快打包速度,也会加上 parallel 配置,开启多线程打包
webpack-bundle-analyzer 插件可以用来让我们可视化的看我们的打包结果,根据可视化可以看出哪些文件的体积最大/过大,然后做一个针对性的优化,有没有改动的余地
npm install webpack-bundle-analyzer
并在 webpack 中做配置
加快构建速度
- 先分析影响构建速度的因素有哪些
- 解析
- 减少需要打包的文件:比如 echarts、jquery,因为没有遵循模块化的标准,可能 webpack 解析起来很费时间,所以我们可以配置 webpack 不去解析他们(配置个 noParse …)、exclude 不解析 node_modules 下的文件 或者 include 只打包指定的打包文件
- 增加干活的人:开启多线程来打包,加快效率
- HappyPack 插件 / thread-loader loader,可以让 webpack 支持多个线程同时打包(如果简单的项目,可以不用,用不好可能更慢)
- 如果要使用 thread-loader,需要把它放在所有的 loader 之前(放在 rules 数组中的 use 数组的第一项?(是哪个数组的第一项?rules?use?))
- happypack 的 wiki(github wiki)中有一个列表,列出了它所支持的 loader(往里面加 loader 之前去看一下)
- HappyPack 插件 / thread-loader loader,可以让 webpack 支持多个线程同时打包(如果简单的项目,可以不用,用不好可能更慢)
- 提前干活:使用预编译
- 换 loader,fast-sass-loader 比 sass-loader 快
- 减少工作量:使用缓存(时效性不是很强)
- … 其他一堆的因素及对应的优化思路
- 解析
node 和 webpack 都是单进程的,所以一般优化都是在 线程的程度上
webpack 是什么
- 前端发展的产物
- 模块化打包方案
- 工程化方案
阐述(个人觉得很重要,可以对技术发展有个新认识,比较能说服自己的)
前端技术的蓬勃发展
-
我们想在 js 里面更方便地实现 html ,社区就有了 jsx
-
我们觉得原生的 css 不够好用,社区就给了我们 sass 和 less
-
针对前端模块化开发越来越强的需求,社区有了 AMD、COMMONJS、ES2015等等的方案
-
但这些方案大多并不被浏览器直接的支持,所以说往往伴随着这些新技术而生的还有另外一些让这些新技术应用于浏览器的方案
- 于是我们就用 babel 来转换下一代的 js,转换 jsx…
- 我们用各种各样的工具来转换 sass、less,转换为 css
- 我们发现项目越来越复杂,代码体积越来越大,又开始寻找各种优化、压缩、分割的方案
-
前端工程化的过程,真的是让我们开发者大费精力,人们也是纷纷在寻找前端模块化的过程中才知晓了 webpack,webpack 的流行确实是得益于野性发展的前端,但它的本质是一个前端模块化打包的一个解决方案,更重要的是它又是一个可以融合运用各种前端新技术的平台
扩展
-
学习的参考视频:【2020新课程】Webpack从原理到实战完整版-深入浅出,简单易学,前端工程师必学经典内容!
- 用来了解或者入门 webpack 还是不错的,感觉老师讲的挺好,深度要靠自己去扩展
- 视频中的实战 demo 需要注意 webpack 版本,个人尝试因版本问题未成功,不过了解个原理也挺好,满足了
-
别人写的笔记:webpack学习笔记:发展背景、工作机制、核心配置、性能优化
-
关于webpack项目中报错:Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin’ 的解决办法
-
Webpack 5: The ‘compilation’ argument must be an instance of Compilation #1451
-
【webpack】HtmlWebpackPlugin插件报错,The ‘compilation‘ argument must be an instance of Compilation
-
webpack超详细配置, 使用教程(图文)(2017-05-06 的博客,有点老了,不知道价值怎么样)
相关文章:
webpack
文章目录 webpack概念打包的场景为什么要打包在打包之外 - 翻译在打包之外 - 小动作 课程重点模块化利用立即执行函数来改变 作用域模块化的优点模块化方案的进化史AMD(成型比较早,应用不是很广泛)COMMONJSES6 MODULE webpack 的打包机制webp…...
反复 Failed to connect to github.com port 443 after xxx ms
前提:使用了代理,浏览器能稳定访问github,但git clone一直超时 解决方案: 1. git config --global http.proxy http://127.0.0.1:1080 2. 代理设置端口1080 3. 1080可自定义 感谢来自这篇博客和评论区的提醒:解决…...
ARM裸机-11
1、安装交叉编译工具工具 1.1、windows中装软件的特点 windows中装软件使用安装包,安装包解压后有两种情况:一种是一个安装文件 (.exe/.msi),双击进行安装,下一步直到安装完毕。安装完毕后会在桌面上生成快捷方式,我们平时使用快…...
centos7升级glibc
作者:吴业亮 博客:wuyeliang.blog.csdn.net 安装bison: yum install bison -y安装wget、bzip2、gcc、gcc-c和glibc-headers: yum -y install wget bzip2 gcc gcc-c glibc-headers安装make-4.2.1: wget http://ftp.…...
【OnnxRuntime】在linux下编译并安装C++版本的onnx-runtime
目录 安装C接口的onnx-runtime安装依赖项:下载源文件构建ONNX Runtime安装ONNX Runtime 安装C接口的onnx-runtime 安装依赖项: 安装CMake:可以通过包管理器(如apt、yum等)安装CMake。 安装C编译器:确保系…...
C#基于OpenCv(OpenCvSharp) 的 fftshift, ifftshift 函数的实现
本文实现基于OpenCv(OpenCvSharp) 的 fftshift, ifftshift 函数。 fftshift 函数将信号频谱的零频分量移动到数组中心, 本质是分别对调一三象限数据。 ifftshift完成相反的操作,本质是二四象限的数据块。 OpenCV中没有这两个函数如果使用需要自己实现。 实现代码如下: …...

【SpringBoot】笔记2
文章目录 45、web实验-抽取公共页面46、web实验-遍历数据与页面bug修改47、视图解析-【源码分析】-视图解析器与视图[暂时没看]48、拦截器-登录检查与静态资源放行49、拦截器-【源码分析】-拦截器的执行时机和原理50、文件上传-单文件与多文件上传的使用51、文件上传-【源码流程…...

Spring事务传播机制详细讲解
文章目录 一、事务传播机制1. REQUIRED:2. SUPPORTS:3. MANDATORY:4. REQUIRES_NEW:5. NOT_SUPPORTED:6. NEVER:7. NESTED: 二、事务传播机制分类1. 支持当前事务的传播机制:REQUIRE…...

kubernetes 集群搭建(kubeadm 方式)
目前生产部署 Kubernetes 集群主要有两种方式: (1) kubeadm Kubeadm 是一个 Kubernetes 官方提供的命令行工具,可以用来部署和管理 Kubernetes 集群。它主要用于在新的 Kubernetes 环境中初始化集群、添加或删除节点等操作。 K…...

基于ARM+FPGA的驱控一体机器人控制器设计
目前市场上工业机器人,数控机床等多轴运动控制系统普遍采用运动控制器加 伺服驱动器的分布式控制方式。在这种控制方式中,控制器一方面完成人机交互,另 一方面进行 NC 代码的解释执行,插补运算,继而将计算出来的位…...

docker 安装 字体文件
先说一下我当前的 场景 及 环境,这样同学们可以先评估本篇文章是否有帮助。 环境: dockerphp8.1-fpmwindows 场景: 来了个需求,有一个默认背景图,可以理解为背景图是一个 "相框",相框里面就会放…...
Vue.js与ASP.NET的结合,实现企业级应用的开发和部署
在当今快速发展的互联网技术领域,企业级应用的开发和部署变得越来越重要。Vue.js和ASP.NET是两个在前端和后端开发中广泛使用的技术,将它们结合起来可以为企业级应用的开发和部署带来诸多优势。本文将通过代码示例介绍如何使用Vue.js和ASP.NET进行企业级…...

Uncaught SyntaxError: ‘‘ string literal contains an unescaped line break
今天在修改前端页面的时候,页面报错了,提示了这个信息 Uncaught SyntaxError: string literal contains an unescaped line break 问题指向这行代码,这就是通过JS渲染一个easyui的搜索框,仔细确认之后,发现没有任何问…...

Vue3+Vite+TypeScript常用项目模块详解
目录 1.Vue3ViteTypeScript 概述 1.1 vue3 1.1.1 Vue3 概述 1.1.2 vue3的现状与发展趋势 1.2 Vite 1.2.1 现实问题 1.2 搭建vite项目 1.3 TypeScript 1.3.1 TypeScript 定义 1.3.2 TypeScript 基本数据类型 1.3.3 TypeScript语法简单介绍 2. 项目配置简单概述 2.…...

数字电路(一)
1、例题 1、进行DA数模转换器选型时,一般要选择主要参数有( A)、转换精度和转换速度。 A、分辨率 B、输出电流 C、输出电阻 D、模拟开关 2、下图所示电路的逻辑功能为( B) A、与门 B、或门 C、与非门 D、或非门 分析该…...
Oracle也有回收站
在数据库管理中,数据的删除是一个常见的操作。然而,有时候我们可能会意外地删除了一些重要的数据。幸运的是,Oracle数据库提供了一个类似于回收站的功能,可以帮助我们恢复被删除的数据。本文将介绍Oracle数据库中的回收站功能以及…...

投稿注意!APA格式超全示例详解,原本28天能录用,可能要拖延2个月
为什么同一本期刊有论文28天录用,有论文10个月才录用?结合近期征稿的这本经管类SSCI期刊,小编(Unionpub学术)整理了部分影响录用的几个因素,准备提交此期刊的作者可自查参考下: (参…...

【Python】Web学习笔记_flask(1)——模拟登录
安装flask pip3 install flask 第一部分内容: 1、主页面输出hello world 2、根据不同用户名参数输出用户信息 3、模拟登录 from flask import Flask,url_for,redirectappFlask(__name__)app.route(/) def index():return hello worldapp.route(/user/<uname…...
css单行文本省略号多行文本省略号
设置单行文本省略号的写法 : 先设置宽固定的宽度 :width: 300px; 设置不换行 :white-space:nowrap; 设置省略号:text-overflow: ellipsis; 裁剪多余的内容/溢出的内容:overflow: hidden; width: 200px; white-space:…...

信号槽中的函数重载
信号槽中的函数重载 QT4的方式QT5的方式函数指针重载函数QT5信号函数重载解决方案 总结 QT4的方式 Qt4中声明槽函数必须要使用 slots 关键字, 不能省略。 信号函数: 槽函数: mainwondow: cpp文件: #include "mainwindow.h"…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西,但是如果把三者放在一起,它们之间到底什么关系?又有什么联系呢?我不是很明白!!! 就比如说: 沙箱&#…...

MySQL体系架构解析(三):MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录,这个目录下存放着许多可执行文件。与其他系统的可执行文件类似,这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中,用…...

ubuntu中安装conda的后遗症
缘由: 在编译rk3588的sdk时,遇到编译buildroot失败,提示如下: 提示缺失expect,但是实测相关工具是在的,如下显示: 然后查找借助各个ai工具,重新安装相关的工具,依然无解。 解决&am…...