定制软件开发合同/seochinazcom

定制软件开发合同,seochinazcom,做好网络推广的技巧,云南昆明疫情最新消息今天又封了项目地址 基础配置可查看文档 1、devtool 配置 (找到报错位置)2、优化打包速度3、oneOf 每个文件只被一个loader处理4、 include/exclude 处理某些文件或者排除某些文件5、 cache 缓存 （提升后面几次的打包速度）6、 多进程打包7、减少代码体积 Tree Shak…

项目地址
基础配置可查看文档

    • 1、devtool 配置 (找到报错位置)
    • 2、优化打包速度
    • 3、oneOf 每个文件只被一个loader处理
    • 4、 include/exclude 处理某些文件或者排除某些文件
    • 5、 cache 缓存 （提升后面几次的打包速度）
    • 6、 多进程打包
    • 7、减少代码体积 Tree Shaking
    • 8、压缩图片
    • 9、多入口
    • 10、 多入口想提取公共模块，这个时候就用到了代码分割
    • 11、chunk统一命名
    • 12、 Preload和Prefetch
    • 13、配置缓存，文件发生变化时，只有main 和runtime.js会重新打包，其他文件不变
    • 14、 core-js
    • 15、PWA

总结

我们从 4 个角度对 webpack 和代码进行了优化:

  • 1.提升开发体验
    。使用 sourceMap让开发或上线时代码报错能有更加准确的错误提示。
  • 2.提升 webpack 提升打包构建速度
    。使用 HotmduleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
    。使用 one0f让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。
    。使用 Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快。
    。使用cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。
    。使用 Thead 多进程处理 esint和 babel 任务，速度更快。(需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效
    果)
  • 3.减少代码体积
    。使用 Tree shaking剔除了没有使用的多余代码，让代码体积更小。
    。使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。。使用 image miniizer 对项目中图片进行压缩，体积更小，请求速度更快。(需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。)
  • 4.优化代码运行性能
    。使用 code split 对代码进行分割成多个i5文件，从而便单个文件体积更小，并行加载is速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。
    使用 Preload/Prefetch,对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。使用 Network cache能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。
    。便用 core-js 对js 进行兼容性处理，让我们代码能运行在低版本浏览器。
    。使用PA能让代码离线也能访问，从而提升用户体验。

1、devtool 配置 (找到报错位置)

SourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射的文件的方案。它会生成一个 xx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。
开发模式用

  devtool: 'cheap-module-source-map',
  • 优点:打包编译速度快，只包含行映射
  • 缺点:没有列映射
    生产模式用
devtool: 'source-map',
  • 优点:包含行/列映射
  • 缺点:打包编译速度更慢
    build: slowest rebuild: slowest

2、优化打包速度（HMR）

HMR (HotModuleReplacement)，即热模块替换，是 webpack 的一个功能，它可以在运行时更新模块，而无需完全刷新整个页面。

  devServer: {...hot:true, // 提供HMR功能,只更新某个模块，没有替换整个项目},

在模块中判断

if(module.hot){module.hot.accept('./xxx')
}

实际开发并不需要上述这样，直接配置loader，以vule为例 vue-loader，生产模式不需要

3、oneOf 每个文件只被一个loader处理

未配置时，一个loader解析之后，其他loader还要解析，配置oneOf之后，每个文件一个loader解析之后就不往下解析了

  module: {rules: [// oneOf 不支持 vue-loader ，要单独拿出来{test: /\.vue$/,loader: "vue-loader",},// 每个文件只有一个loader配置处理{oneOf: [{test: /\.(gif|png|jpe?g)$/i,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转成base64，减少请求数量// 缺点：体积会大一点maxSize: 10 * 1024, // 小于10kb},},generator: {// 输出图片的名称filename: "imgs/[name].[contenthash:8][ext]",},},]}],},
  • 报错 [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneof
    解决方案：将vue-loader 移到配置外面，单独拿出来

4、 include/exclude 处理某些文件或者排除某些文件

 module: {rules: [{test: /\.(js|ts|jsx|tsx)$/,include: path.resolve(__dirname, 'src'),// exclude: /node_modules/,// loader:"babel-loader",loader: 'esbuild-loader',generator: {target: 'es2015'}},]}

include和exclude的只写一个即可

 plugins: [new ESLintPlugin({// 配置哪些目录需要检查context: path.resolve(__dirname, './src'),exclude: 'node_modules',// 不写 默认也有}),]

5、 cache 缓存 （提升后面几次的打包速度）

对eslint检查和babel编译进行缓存，提升打包速度，cacheDirectory 是否开启缓存。

       {test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 开启babel缓存cacheCompression: false,// 关闭缓存文件压缩},},},

eslint 开启缓存

    new ESLintPlugin({// 配置哪些目录需要检查context: path.resolve(__dirname, './src'),exclude: 'node_modules',// 不写 默认也有cache: true,// 开启缓存cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),}),

6、 多进程打包

const os = require('os');
const threads = os.cpus().length;
  • 下载 thread-loader
npm install thread-loader --D

在loader配置多进程

  const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
...module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: [{loader: 'thread-loader',options: {workers: threads, // 开启几个子进程去完成}},{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 开启babel缓存cacheCompression: false,// 关闭缓存文件压缩},},] },]}}

在eslint中开启多进程

  new ESLintPlugin({// 配置哪些目录需要检查context: path.resolve(__dirname, './src'),cache: true,// 开启缓存cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),threads,}),

引入压缩的插件

const TerserWebpackPlugin = require("terser-webpack-plugin");

在plugins中配置

   new TerserWebpackPlugin({parallel: threads, // 开启多进程extractComments: false, // 移除注释terserOptions: {compress: {pure_funcs: ['console.log'], // 移除console.log},},}),

在optimization添加压缩配置

  // 用于处理压缩optimization: {...minimizer: [// CssMinimizerPlugin、TerserWebpackPlugin 也可以放在plugins中new CssMinimizerPlugin(),new TerserWebpackPlugin({parallel: threads, // 开启多进程extractComments: false, // 移除注释terserOptions: {compress: {pure_funcs: ['console.log'], // 移除console.log},},}),],},

7、减少代码体积 Tree Shaking

减少babel体积
禁用babel自动对每个文件的runtime注入，@babel/plugin-transform-runtime 优化代码转换的运行时行为，通过复用辅助函数和减少全局污染来提升代码质量

  • 下载
npm i @babel/plugin-transform-runtime --D

在babel中配置

          {test: /\.js$/,exclude: /node_modules/,use: [{loader: 'thread-loader',options: {workers: threads, // 开启几个子进程去完成}},{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 开启babel缓存cacheCompression: false,// 关闭缓存文件压缩plugins: ['@babel/plugin-transform-runtime'],},},]},

8、压缩图片

下载包

npm i image-minimizer-webpack-plugin --D

无损压缩(包下载不下来)

npm install imagemin-gifsicle  imagemin-jpegtran imagemin-optipng imagemin-svgo --D

有损压缩

npm install imagemin-gifsicle imagemin-jpegtran imagemin-pngquant imagemin-svgo --D

包不好下

  optimization: {...minimizer: [...new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [['gifsicle', { interlaced: true }],['jpegtran', { progressive: true }],['optipng', { optimizationLevel: 5 }],['svgo',{plugins: ['preset-default',"prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical"}}]},],]}}})],},

9、多入口

const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports ={// entry:'./src/main.js'，// 只有一个入口文件，单入口entry:{ // 有多个入口文件，多入口app:"./src/app.js"main:"./src/main.js"}output:{path: path.resolve( dirname,"dist"),filename: "[name].js"，// webpack命名方式，[name]以文件名自己命名filename }plugins:[new HtmlWebpackPlugin({template:path.resolve( dirname,"public/index.html")})],mode:"production"
}

10、 多入口想提取公共模块，这个时候就用到了代码分割

  optimization: {minimize: true, // 强制启用压缩// 对代码进行分割splitChunks: {chunks: 'all',// 以下是默认值// minsize:20000，//分割代码最小的大小// minRemainingsize:0，//类似于minsize，最后确保提取的文件大小不能为0// minChunks:1，//至少被引用的次数，满足条件才会代码分割// maxAsyncRequests:3e,/按需加载时并行加载的文件的最大数量// maxInitialRequests:30，//入口js文件最大并行请求数量// enforcesizeThreshold:50000,// 超过50kb一定会单独打包(此时会忽略minRemainingsize、maxAsyncRequests、maxInitialRegquests)//cacheGroups:{// 组，哪些模块要打包到一个组)// defaultVendors:{//组名// test:/[\V/]node_modules[\\/]/，//需要打包到一起的模块// priority:-10，//权重(越大越高)//  reuseExistingchunk:true，//如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，// 而不是生成新的模块// },// default:{ // 其他没有写的配置会使用上面的默认值// {//   minChunks:2,//这里的minChunks权重更大//   priority: -20,//   reuseExistingchunk: true,// }},// runtimeChunk: 'single',minimizer: [new CssMinimizerPlugin(),]},

11、chunk统一命名

  output: {clean: true, // 清理 /dist 文件夹// filename: "js/main.js", // 打包后的文件名称filename: "js/[name].[contenthash:8].js", // 打包后的文件名称// 打包输出的其他文件名称chunkFilename: "js/[name].[contenthash:8].chunk.js",path: path.resolve(__dirname, "../dist"), // 打包后的目录// 图片 等字体通过type: asset处理资源命名方式assetModuleFilename: 'media/[name].[contenthash:8][ext][query]',},

  new MiniCssExtractPlugin({filename: "css/[name].[contenthash:8].css"}),

添加 移除loader中字体、媒体文件的命名规则

  // generator: {//   filename: "fonts/[name].[contenthash:8][ext][query]"// }

12、 Preload和Prefetch(兼容性差)

  • Preload :告诉浏览器立即加载资源。
  • Prefetch :告诉浏览器在空闲时才开始加载资源。
    它们共同点:
    。都只会加载资源，并不执行。
    。都有缓存。
    它们区别:
    Preload 加载优先级高，Prefetch 加载优先级低
    只能加载当前页面需要使用的资源， Prefetch 可以加载当前页面资源，也可以加载下一个页面需要使用的资源。reloa
    总结:
    。当前页面优先级高的资源用 Preload 加载。
    。下一个页面需要使用的资源用Prefetch 加载
    它们的问题:兼容性较差，
    。我们可以去 CanlUseB 网站查询 API 的兼容性问题Preload 相对于 Prefetch 兼容性好一点。

点击查看兼容

13、配置缓存，文件发生变化时，只有main 和runtime.js会重新打包，其他文件不变

runtimeChunk:{name:(entrypoint)=>runtime~${entrypoint.name}.js`
}

14、 core-js

过去我们使用 babel 对js 代码进行了兼容性处理，其中使用@babe/preset-env 智能预设来处理兼容性问题它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法(includes)等，它没办法处理
所以此时我们js 代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。所以我们想要将js 兼容性问题彻底解决
core-js 是专门用来做ES6 以及以上API的 polyfill。
polyfi11 翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。
例如：Promise 就没有被打包

return new Promise(resolve => {resolve("成功");});

解决方案：

  • 通过在代码中按需引入core-js的Promise
  • 在babel.config.js中配置core-js
 module.exports = {presets: ['@babel/preset-env',{useBuiltIns: "usage", //按需加载自动引入corejs: 3,}]
};

15、PWA

开发 Web App 项目，项目一旦处于网络离线情况，就没法访问了。我们希望给项目提供离线体验。
渐进式网络应用程序(progressiveweb application·PWA):是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。
其中最重要的是，在 离线(offline)时应用程序能够继续运行功能。内部通过 Service Workers 技术实现的。

  • 下载
npm install workbox-webpack-plugin --save-dev

npm run build
现在你可以看到，生成了两个额外的文件：service-worker.js 和名称冗长的 precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js。service-worker.js 是 Service Worker 文件，precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 是 service-worker.js 引用的文件，所以它也可以运行。你本地生成的文件可能会有所不同，但是应该会有一个 service-worker.js 文件。

  • 注册 Service Worker
 if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('SW registered: ', registration);}).catch(registrationError => {console.log('SW registration failed: ', registrationError);});});}

启动会发现未成功，这个时候要安装server
npm i server -g
启动
sever dist
[具体可参考]（https://www.webpackjs.com/guides/progressive-web-application/#adding-workbox）

完整配置代码

const chalk = require('chalk');
const path = require("path");
const os = require('os');
const threads = os.cpus().length;const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const { DefinePlugin } = require('webpack');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');// 用来处理获取的样式
function getStyleLoaders(pre) {return [MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {postcssOptions: {// plugins: [["autoprefixer"]],plugins: ['postcss-preset-env'],//能解决大多数兼容性问题},},}, pre].filter(Boolean);
}module.exports = {mode: "production", // 开发模式entry: path.resolve(__dirname, "../src/main.js"), // 入口文件 相对路径// web serverdevtool: 'source-map',output: {clean: true, // 清理 /dist 文件夹// filename: "js/main.js", // 打包后的文件名称filename: "js/[name].[contenthash:8].js", // 打包后的文件名称path: path.resolve(__dirname, "../dist"), // 打包后的目录// 图片 等字体通过type: asset处理资源命名方式assetModuleFilename: 'media/[name].[contenthash:8][ext][query]',},cache: {type: 'filesystem',allowCollectingMemory: true,idleTimeout: 60000,compression: 'gzip',},// 用于处理压缩optimization: {splitChunks: {chunks: 'all',},runtimeChunk: 'single',minimizer: [// CssMinimizerPlugin、TerserWebpackPlugin 也可以放在plugins中new CssMinimizerPlugin(),new TerserWebpackPlugin({parallel: threads, // 开启多进程extractComments: false, // 移除注释terserOptions: {compress: {pure_funcs: ['console.log'], // 移除console.log},},}),new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [['gifsicle', { interlaced: true }],['jpegtran', { progressive: true }],['optipng', { optimizationLevel: 5 }],['svgo',{plugins: ['preset-default',"prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical"}}]},],]}}})],},plugins: [new ESLintPlugin({// 配置哪些目录需要检查context: path.resolve(__dirname, './src'),cache: true,// 开启缓存cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),threads,// 开启多进程打包}),new ProgressBarPlugin({format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`}),new VueLoaderPlugin(),new HtmlWebpackPlugin({// 模版：以public/index.html为模板生成打包后的index.htmltemplate: path.resolve(__dirname, "../public/index.html"),BASE_URL: process.env.BASE_URL || '/'}),new MiniCssExtractPlugin({filename: "css/[name].[contenthash:8].css"}),new DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production'),BASE_URL: '"../"' // 定义全局变量BASE_URL}),// new CssMinimizerPlugin(),// new TerserWebpackPlugin({//   parallel: threads, // 开启多进程//   extractComments: false, // 移除注释//   terserOptions: {//     compress: {//       pure_funcs: ['console.log'], // 移除console.log//     },//   },// }),],// loader 加载器module: {rules: [// oneOf 不支持 vue-loader ，要单独拿出来{test: /\.vue$/,loader: "vue-loader",},// 每个文件只有一个loader配置处理{oneOf: [{test: /\.(gif|png|jpe?g)$/i,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转成base64，减少请求数量// 缺点：体积会大一点maxSize: 10 * 1024, // 小于10kb},},generator: {// 输出图片的名称filename: "imgs/[name].[contenthash:8][ext]",},},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件// 对文件原封不动的输出type: "asset/resource",// generator: {//   filename: "media/[name].[contenthash:8][ext]",// },},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体type: "asset/resource",// generator: {//   filename: "fonts/[name].[contenthash:8][ext]"// }},// 简单场景，不需要复杂转义时// {//   test: /\.(js|ts|jsx|tsx)$/,//   include: path.resolve(__dirname, 'src'),//   // loader:"babel-loader",//   loader: 'esbuild-loader',//   generator: {//     target: 'es2015'//   }// },// 复杂场景用{test: /\.js$/,exclude: /node_modules/,use: [{loader: 'thread-loader',options: {workers: threads, // 开启几个子进程去完成}},{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true, // 开启babel缓存cacheCompression: false,// 关闭缓存文件压缩plugins: ['@babel/plugin-transform-runtime'],},},]},{test: /\.css$/,// MiniCssExtractPlugin.loader 最终会将css提取到单独的文件use: getStyleLoaders(), // 从右向左解析原则// use: ["style-loader", "css-loader"]},{test: /\.less$/,use: getStyleLoaders("less-loader"), // 从右向左解析原则// use: ["style-loader", "css-loader", "less-loader"]},{test: /\.s[ac]ss$/,use: getStyleLoaders("sass-loader")},{test: /\.styl$/,use: getStyleLoaders("stylus-loader")},]}],},// 配置模块如何解析resolve: {alias: {vue$: "vue/dist/vue.runtime.esm.js",    // 末尾添加 $，以表示精准匹配"@": path.resolve(__dirname, "../src"),},extensions: ["*", ".js", ".json", ".vue"],  // 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀}
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/75897.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JavaWeb——事务管理、AOP

JavaWeb——事务管理、AOP

目录 一、事管理 1.开启事务管理日志 2.开启事务管理 3.传播行为 二、AOP 1.通知类型 2.通知顺序 3.切入点表达式 4.连接点 一、事务管理 1.开启事务管理日志 2.开启事务管理 3.传播行为 当一个事务方法被另一个事务方法调用时，这个事物方法应该如何进行事…
阅读更多...
【蓝桥杯每日一题】3.28

【蓝桥杯每日一题】3.28

🏝️专栏： 【蓝桥杯备篇】 🌅主页： f狐o狸x "今天熬的夜，会变成明天奖状的闪光点！" 目录 一、唯一的雪花 题目链接 题目描述 解题思路 解题代码 二、逛画展 题目链接 题目描述 解题思路 解题代…
阅读更多...
进程间通信——信号量

进程间通信——信号量

进程间通信——信号量 目录 一、基本概念 1.1 概念 1.2 基本操作 1.3 相关函数 1.3.1 semget创建/获取 1.3.2 semop操作信号量 1.3.3 semctl初始化/删除 二、代码操作 2.1 不用PV的 2.2 用PV 的 2.2.1 a.c 2.2.2 b.c 2.2.3 sem.h 2.2.4 sem.c 一、基本概念 1.1…
阅读更多...
Linux内核2-TFTP与NFS环境搭建

Linux内核2-TFTP与NFS环境搭建

Uboot：引导程序 初始化硬件设备，初始化c语言环境，为内核加载做准备 zImage:内核文件 rootfs:文件系统，为用户提供一个与硬件设备数据交互的系统 1.TFTP和NFS功能 TFTP:简单文件传输协议网络配置 pc可以下载 2.minicom bootargs…
阅读更多...
Crypto Architecture Kit简介

Crypto Architecture Kit简介

HarmonyOS 5.0.3(15) 版本的配套文档，该版本API能力级别为API 15 Release 文章目录 约束与限制能力范围基本概念与相关Kit的关系 Crypto Architecture Kit屏蔽了第三方密码学算法库实现差异的算法框架，提供加解密、签名验签、消息验证码、哈希、安全随机…
阅读更多...
交流电机类型及其控制技术

交流电机类型及其控制技术

交流电机可分为同步电机和异步电机两大种类，如果电机转子的转速与定子旋转磁场的转速相等，转子与定子旋转磁场在空间同步地旋转，这种电机就称为同步电机。如果电机转子的转速不等于定子旋转磁场的转速，转子与定子旋转磁场在空间旋…
阅读更多...
fluent_UDF学习笔记

fluent_UDF学习笔记

UDF源代码路径 D:\Program Files\ANSYS Inc\v231\fluent\fluent23.1.0\src关于颗粒反弹速度的计算 /* 通过面法向单位向量计算速度的法向向量、切向向量，再通过法向、切向恢复系数重新计算反弹速度*//* Compute normal velocity.将颗粒速度向面法线方向投影&#x…
阅读更多...
第十六届蓝桥杯模拟二（串口通信）

第十六届蓝桥杯模拟二（串口通信）

由硬件框图可以知道我们要配置LED 和按键 一.LED 先配置LED的八个引脚为GPIO_OutPut，锁存器PD2也是，然后都设置为起始高电平，生成代码时还要去解决引脚冲突问题 二.按键 按键配置，由原理图按键所对引脚要GPIO_Input 生成代码，在文件夹中添加code文件夹，code中添加fun.…
阅读更多...
06-ADC

06-ADC

ADC简介 Analog-Digital Converter 模拟-数字转换器 ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量，建立模拟电路到数字电路的桥梁。 12位逐次逼近型ADC，1us转换时间；输入电压范围：0-3.3V，转换结果…
阅读更多...
二层综合实验

二层综合实验

拓扑图 实验要求 1.内网IP地址使用172.16.6.0/16分配 2.sw1和sW2之间互为备份 3.VRRP/STP/VLAN/Eth-trunk均使用 4.所有Pc均通过DHCP获取IP地址 5.ISP只能配置IP地址 6.所有电脑可以正常访问IsP路由器环回 实验思路 这是一个二层综合实验每当拿到一个实验看清楚要求之后都有…
阅读更多...
Java实现pdf中动态插入图片

Java实现pdf中动态插入图片

今天接到一个需求&#xff0c;需要在pdf中的签名处&#xff0c;插入签名照片&#xff0c;但签名位置不固定&#xff0c;话不多说上代码&#xff1a; 1、首先引入itextpdf依赖包&#xff1a; <dependency><groupId>com.itextpdf</groupId><artifactId>…
阅读更多...
基于Spring AI开发本地Jenkins MCP Server服务

基于Spring AI开发本地Jenkins MCP Server服务

前言 首先介绍下MCP是什么&#xff1f; MCP是由开发了 Claude 模型的 Anthropic 公司2024年12月提出并开源的一项开放标准&#xff0c;全称&#xff1a;Model Context Protocol&#xff0c;它是一个开放协议&#xff0c;它使 LLM 应用与外部数据源和工具之间的无缝集成成为可能…
阅读更多...
vcpkg安装指定版本的库

vcpkg安装指定版本的库

一.vcpkg安装 使用git将vcpkg源码克隆到本地制定目录&#xff08;D:\vcpkg&#xff09;&#xff0c;并初始化 git clone https://github.com/microsoft/vcpkg.git cd vcpkg ./bootstrap-vcpkg.sh # Linux/macOS .\bootstrap-vcpkg.bat # Windows 如下图&#xff1a; 二.安…
阅读更多...
WPF ContentPresenter详解2

WPF ContentPresenter详解2

ContentPresenter与ContentControl的区别 ContentControl 和 ContentPresenter 是 WPF 中两个相关的控件&#xff0c;但它们在用途和功能上有一些关键的区别。理解这两者的区别和联系有助于更好地设计和开发用户界面。 1. 类层次结构 ContentControl&#xff1a;位于 WPF 控件…
阅读更多...
【HTML5游戏开发教程】零基础入门合成大西瓜游戏实战 | JS物理引擎+Canvas动画+完整源码详解

【HTML5游戏开发教程】零基础入门合成大西瓜游戏实战 | JS物理引擎+Canvas动画+完整源码详解

《从咖啡杯到财务自由&#xff1a;一个程序员的合成之旅——当代码遇上物理引擎的匠心之作》 &#x1f31f; 这是小游戏开发系列的第四篇送福利文章&#xff0c;感谢一路以来支持和关注这个项目的每一位朋友&#xff01; &#x1f4a1; 文章力求严谨&#xff0c;但难免有疏漏之…
阅读更多...
RTMP推流+EasyDSS云服务+边缘AI分析的无人机监控系统设计

RTMP推流+EasyDSS云服务+边缘AI分析的无人机监控系统设计

在现代科技不断发展的背景下&#xff0c;无人机技术已经广泛应用于各个领域&#xff0c;从航拍摄影到工业巡检&#xff0c;从农业监测到应急救援&#xff0c;无人机以其高效的工作能力&#xff0c;为人们的生活和工作带来了诸多便利与创新&#xff0c;而其视频传输与分析系统更…
阅读更多...
HCIP(VLAN综合实验)

HCIP(VLAN综合实验)

实验拓补图 实验分析 一、实验目的 掌握VLAN的创建和配置方法理解VLAN在局域网中的作用学习如何通过VLAN实现网络隔离和通信 二、实验环境 交换机&#xff08;SW1、SW2、SW3&#xff09;个人电脑&#xff08;PC1、PC2、PC3、PC4、PC5、PC6&#xff09;路由器&#xff08;R1…
阅读更多...
第十二章——位运算

第十二章——位运算

按位的与& 若x的第i位和y的第i位都是1&#xff0c;那么&#xff08;x&y&#xff09;1&#xff0c;否则&#xff08;x&y&#xff09; 0 应用&#xff1a;希望让某一位或某些位为0 。取一个数中的一段。 按位的或| 若x的第i位1或y的第i位1&#xff0c;那么&…
阅读更多...
【Mysql:内置函数】

【Mysql:内置函数】

日期函数&#xff1a; 查看当前日期&#xff1a; select current_date();查看当前时间&#xff1a; select current_time(); 查看当前时间戳&#xff1a; select current_timestamp(); 计算两个日期的差值&#xff1a; select datediff(date1,date2); 当前的日期时间&a…
阅读更多...
71. 我的第一个Linux驱动实验

71. 我的第一个Linux驱动实验

一、字符设备驱动框架 字符设备驱动的编写主要就是驱动对应的open、close、read。。。其实就是 file_operations结构体的成员变量的实现。 其中关于 C 库以及如何通过系统调用“陷入” 到内核空间这个我们不用去管&#xff0c;我们重点关注的是应用程序和具体的驱动&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023