Vite: Esbuild的使用与其插件开发

概述

  • 作为 Vite 的双引擎之一，Esbuild 在很多关键的构建阶段(如 依赖预编译 、 TS 语法转译 、 代码压缩 ) 让 Vite 获得了相当优异的性能，是 Vite 高性能的得力助手
  • 无论是在 Vite 的配置项还是源码实现中，都包含了不少 Esbuild 本身的基本概念和高阶用法

高性能的Esbuild

  • Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以比传统工具快 10~100 倍。获得这样超高的构建性能，主要原因可以概括为 4 点

1 ）使用 Golang 开发

  • 构建逻辑代码直接被编译为原生机器码，而不用像 JS 一样先代码解析为字节码，然后转换为机器码，大大节省了程序运行时间。

2 ） 多核并行

  • 内部打包算法充分利用多核 CPU 优势，所有的步骤尽可能并行，这也是
    得益于 Go 当中多线程共享内存的优势。

3 ）从零造轮子

  • 几乎没有使用任何第三方库，所有逻辑自己编写，大到 AST 解析，小
    到字符串的操作，保证极致的代码性能

4 ）高效的内存利用

  • Esbuild 中从头到尾尽可能地复用一份 AST 节点数据，而不用像 JS 打包工具中频繁地解析和传递 AST 数据（如 string -> TS -> JS -> string)，造成内存的大量浪费

使用

  • 执行 pnpm init -y 新建一个项目, 然后通过如下的命令完成 Esbuild 的安装:
    • $ pnpm i esbuild
  • 使用 Esbuild 有 2 种方式，分别是 命令行调用和代码调用

1 ）命令行调用

  • 命令行方式调用也是最简单的使用方式。我们先来写一些示例代码，新建 src/index.jsx 文件，内容如下

    // src/index.jsx
import Server from "react-dom/server";let Greet = () => <h1>Hello, juejin!</h1>;
console.log(Server.renderToString(<Greet />));

  • 注意安装一下所需的依赖，在终端执行如下的命令:

    • $ pnpm install react react-dom

  • 接着到 package.json 中添加 build 脚本:

    "scripts": {"build": "./node_modules/.bin/esbuild src/index.jsx --bundle --outfile=dist/out.js"
},

  • 现在，你可以在终端执行 $ pnpm run build，可以发现如下的日志信息

  • 说明我们已经成功通过命令行完成了 Esbuild 打包！但命令行的使用方式不够灵活，只能传入一些简单的命令行参数，稍微复杂的场景就不适用了，所以一般情况下我们还是会用代码调用的方式

2 ) 代码调用

  • Esbuild 对外暴露了一系列的 API，主要包括两类: Build API 和 Transform API ，我们可以在 Nodejs 代码中通过调用这些 API 来使用 Esbuild 的各种功能

项目打包——Build API

  • Build API 主要用来进行项目打包，包括 build 、 buildSync 和 serve 三个方法。
    首先我们来试着在 Node.js 中使用 build 方法。你可以在项目根目录新建 build.js 文
    件，内容如下:
const { build, buildSync, serve } = require("esbuild");
async function runBuild() {// 异步方法，返回一个 Promiseconst result = await build({// ---- 如下是一些常见的配置 --- // 当前项目根目录absWorkingDir: process.cwd(),// 入口文件列表，为一个数组entryPoints: ["./src/index.jsx"],// 打包产物目录outdir: "dist",// 是否需要打包，一般设为 truebundle: true,// 模块格式，包括`esm`、`commonjs`和`iife`format: "esm",// 需要排除打包的依赖列表external: [],// 是否开启自动拆包splitting: true,// 是否生成 SourceMap 文件sourcemap: true,// 是否生成打包的元信息文件metafile: true,// 是否进行代码压缩minify: false,// 是否开启 watch 模式，在 watch 模式下代码变动则会触发重新打包watch: false,// 是否将产物写入磁盘write: true,// Esbuild 内置了一系列的 loader，包括 base64、binary、css、dataurl、file、js(x)、ts(x)、text// 针对一些特殊的文件，调用不同的 loader 进行加载loader: {'.png': 'base64',}});console.log(result);
}
runBuild();
  • 随后，你在命令行执行 node build.js ，就能在控制台发现如下日志信息:

  • 以上就是 Esbuild 打包的元信息，这对我们编写插件扩展 Esbuild 能力非常有用。

  • 接着，我们再观察一下 dist 目录，发现打包产物和相应的 SourceMap 文件也已经成功写入磁盘:

  • 其实 buildSync 方法的使用几乎相同，如下代码所示:

    function runBuild() {// 同步方法const result = buildSync({// 省略一系列的配置});console.log(result);
}
runBuild();

  • 但我并不推荐大家使用 buildSync 这种同步的 API，它们会导致两方面不良后果。一方面容易使 Esbuild 在当前线程阻塞，丧失 并发任务处理 的优势。另一方面，Esbuild 所有插件中都不能使用任何异步操作，这给 插件开发 增加了限制

  • 因此更推荐使用 build 这个异步 API，它可以很好地避免上述问题。在项目打包方面，除了 build 和 buildSync ，Esbuild 还提供了另外一个比较强大的 API
    —— serve 。这个 API 有 3 个特点

    • 开启 serve 模式后，将在指定的端口和目录上搭建一个静态文件服务 ，这个服务器用原生 Go 语言实现，性能比 Nodejs 更高
    • 类似 webpack-dev-server，所有的产物文件都默认不会写到磁盘，而是放在内存中，通过请求服务来访问
    • 每次请求到来时，都会进行重新构建( rebuild )，永远返回新的产物

  • 值得注意的是，触发 rebuild 的条件并不是代码改动，而是新的请求到来

  • 现在，举一个例子

    // build.js
const { build, buildSync, serve } = require("esbuild");
function runBuild() {serve({port: 8000,// 静态资源目录servedir: './dist'}, {absWorkingDir: process.cwd(),entryPoints: ["./src/index.jsx"],bundle: true,format: "esm",splitting: true,sourcemap: true,ignoreAnnotations: true,metafile: true,}).then((server) => {console.log("HTTP Server starts at port", server.port);});
}
runBuild();

  • 我们在浏览器访问 localhost:8000 可以看到 Esbuild 服务器返回的编译产物如下所示：

  • 后续每次在浏览器请求都会触发 Esbuild 重新构建，而每次重新构建都是一个增量构建的过程，耗时也会比首次构建少很多(一般能减少 70% 左右)。
  • Serve API 只适合在开发阶段使用，不适用于生产环境。

单文件转译——Transform API

  • 除了项目的打包功能之后，Esbuild 还专门提供了单文件编译的能力，即 Transform API ，与 Build API 类似，它也包含了同步和异步的两个方法，分别是 transformSync 和 transform 。下面，我们具体使用下这些方法。

  • 首先，在项目根目录新建 transform.js ，内容如下:

    // transform.js
const { transform, transformSync } = require("esbuild");
async function runTransform() {// 第一个参数是代码字符串，第二个参数为编译配置const content = await transform("const isNull = (str: string): boolean => str.length > 0;",{sourcemap: true,loader: "tsx",});console.log(content);
}
runTransform();

  • transformSync 的用法类似，换成同步的调用方式即可

    function runTransform {const content = await transformSync(/* 参数和 transform 相同 */)console.log(content);
}

  • 不过由于同步的 API 会使 Esbuild 丧失 并发任务处理 的优势（ Build API 的部分已经分析过），我同样也不推荐大家使用 transformSync 。出于性能考虑，Vite 的底层实现也是采用 transform 这个异步的 API 进行 TS 及 JSX 的单文件转译的

Esbuild 插件开发

  • 在使用 Esbuild 的时候难免会遇到一些需要加上自定义插件的场景，并且 Vite 依赖预编译的实现中大量应用了 Esbuild 插件的逻辑。因此，插件开发是 Esbuild 中非常重要的内容，接下来，我们就一起来完成 Esbuild 的插件开发，带你掌握若干个关键的钩子使用。

1 ) 基本概念

  • 插件开发其实就是基于原有的体系结构中进行 扩展 和 自定义 。 Esbuild 插件也不例外，通过 Esbuild 插件我们可以扩展 Esbuild 原有的路径解析、模块加载等方面的能力，并在Esbuild 的构建过程中执行一系列自定义的逻辑。

  • Esbuild 插件结构被设计为一个对象，里面有 name 和 setup 两个属性， name 是插件的名称， setup 是一个函数，其中入参是一个 build 对象，这个对象上挂载了一些钩子可供我们自定义一些钩子函数逻辑。

2 ) 插件示例

  • 以下是一个简单的 Esbuild 插件示例:
    const envPlugin = {name: 'env',setup(build) {build.onResolve({ filter: /^env$/ }, args => ({path: args.path,namespace: 'env-ns',}))build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({contents: JSON.stringify(process.env),loader: 'json',}))},
}require('esbuild').build({entryPoints: ['src/index.jsx'],bundle: true,outfile: 'out.js',// 应用插件plugins: [envPlugin],
}).catch(() => process.exit(1))

2 ) 使用插件后效果如下:

// 应用了 env 插件后，构建时将会被替换成 process.env 对象
import { PATH } from 'env'
console.log(`PATH is ${PATH}`)
  • 那么， build 对象上的各种钩子函数是如何使用的呢？

3 ) 钩子函数的使用

3.1 onResolve 钩子 和 onLoad 钩子

  • 在 Esbuild 插件中， onResolve 和 onload 是两个非常重要的钩子，分别控制路径解析和模块内容加载的过程

  • 首先，我们来说说上面插件示例中的两个钩子该如何使用

    build.onResolve({ filter: /^env$/ }, args => ({path: args.path,namespace: 'env-ns',
}));
build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({contents: JSON.stringify(process.env),loader: 'json',
}));

  • 可以发现这两个钩子函数中都需要传入两个参数: Options 和 Callback

  • 先说说 Options 。它是一个对象，对于 onResolve 和 onload 都一样，包含 filter 和 namespace 两个属性，类型定义如下:

    interface Options {filter: RegExp;namespace?: string;
}
    • filter 为必传参数，是一个正则表达式，它决定了要过滤出的特征文件。
    • 📢 注意: 插件中的 filter 正则是使用 Go 原生正则实现的，为了不使性能过于劣化，规则应该尽可能严格。同时它本身和 JS 的正则也有所区别，不支持前瞻(?
      <=)、后顾(?=)和反向引用(\1)这三种规则。

  • namespace 为选填参数，一般在 onResolve 钩子中的回调参数返回 namespace 属性作为标识，我们可以在 onLoad 钩子中通过 namespace 将模块过滤出来。如上述插件示例就在 onLoad 钩子通过 env-ns 这个 namespace 标识过滤出了要处理的 env 模块。

  • 除了 Options 参数，还有一个回调参数 Callback ，它的类型根据不同的钩子会有所不同。相比于 Options，Callback 函数入参和返回值的结构复杂得多，涉及很多属性。不过，我们也不需要看懂每个属性的细节，先了解一遍即可

  • 在 onResolve 钩子中函数参数和返回值梳理如下:

    build.onResolve({ filter: /^env$/ }, (args: onResolveArgs): onResolveResult => {// 模块路径console.log(args.path)// 父模块路径console.log(args.importer)// namespace 标识console.log(args.namespace)// 基准路径console.log(args.resolveDir)// 导入方式，如 import、requireconsole.log(args.kind)// 额外绑定的插件数据console.log(args.pluginData)return {// 错误信息errors: [],// 是否需要 externalexternal: false;// namespace 标识namespace: 'env-ns';// 模块路径path: args.path,// 额外绑定的插件数据pluginData: null,// 插件名称pluginName: 'xxx',// 设置为 false，如果模块没有被用到，模块代码将会在产物中会删除。否则不会这么做sideEffects: false,// 添加一些路径后缀，如`?xxx`suffix: '?xxx',// 警告信息warnings: [],// 仅仅在 Esbuild 开启 watch 模式下生效// 告诉 Esbuild 需要额外监听哪些文件/目录的变化watchDirs: [],watchFiles: []}
}

  • 在 onLoad 钩子中函数参数和返回值梳理如下

    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, (args: OnLoadArgs): OnLoadResult => {// 模块路径console.log(args.path);// namespace 标识console.log(args.namespace);// 后缀信息console.log(args.suffix);// 额外的插件数据console.log(args.pluginData);return {// 模块具体内容contents: '省略内容',// 错误信息errors: [],// 指定 loader，如`js`、`ts`、`jsx`、`tsx`、`json`等等loader: 'json',// 额外的插件数据pluginData: null,// 插件名称pluginName: 'xxx',// 基准路径resolveDir: './dir',// 警告信息warnings: [],// 同上watchDirs: [],watchFiles: []}
});

3.2 其他钩子

  • 在 build 对象中，除了 onResolve 和 onLoad ，还有 onStart 和 onEnd 两个钩子用来在构
    建开启和结束时执行一些自定义的逻辑，使用上比较简单，如下面的例子所示:
const examplePlugin = {name: 'example',setup(build) {build.onStart(() => {console.log('build started')});build.onEnd((buildResult) => {if (buildResult.errors.length) {return;}// 构建元信息// 获取元信息后做一些自定义的事情，比如生成 HTMLconsole.log(buildResult.metafile)})},
}

  • 在使用这些钩子的时候，有 2 点需要注意。

    • onStart 的执行时机是在每次 build 的时候，包括触发 watch 或者 serve 模式下的
      重新构建。
    • onEnd 钩子中如果要拿到 metafile ，必须将 Esbuild 的构建配置中 metafile 属性
      设为 true 。

  • 接下来我们进入插件实战，通过编写一些特定功能的插件来熟悉 Esbuild 插件的开发流程
    和技巧。

CDN 依赖拉取插件

  • Esbuild 原生不支持通过 HTTP 从 CDN 服务上拉取对应的第三方依赖资源，如下代码所示:
    // src/index.jsx
// react-dom 的内容全部从 CDN 拉取
// 这段代码目前是无法运行的
import { render } from "https://cdn.skypack.dev/react-dom";
import React from 'https://cdn.skypack.dev/react'
let Greet = () => <h1>Hello, juejin!</h1>;
render(<Greet />, document.getElementById("root"));
  • 示例代码中我们用到了 Skypack 这个提供 npm 第三方包 ESM 产物的 CDN 服务 ，我们
    可以通过 url 访问第三方包的资源，如下图所示:

  • 现在我们需要通过 Esbuild 插件来识别这样的 url 路径，然后从网络获取模块内容并让
    Esbuild 进行加载，甚至不再需要 npm install 安装依赖了，这看上去是不是很酷呢？

  • 顺便提一句，ESM CDN 作为面向未来的前端基础设施，对 Vite 的影响也至关重
    大，可以极大提升 Vite 在生产环境下的构建性能。

  • 我们先从最简单的版本开始写起:

    // http-import-plugin.js
module.exports = () => ({name: "esbuild:http",setup(build) {let https = require("https");let http = require("http");// 1. 拦截 CDN 请求build.onResolve({filter: /^https?:\/\//}, (args) => ({path: args.path,namespace: "http-url",}));// 2. 通过 fetch 请求加载 CDN 资源build.onLoad({filter: /.*/,namespace: "http-url"}, async (args) => {let contents = await new Promise((resolve, reject) => {function fetch(url) {console.log(`Downloading: ${url}`);let lib = url.startsWith("https") ? https : http;let req = lib.get(url, (res) => {if ([301, 302, 307].includes(res.statusCode)) {// 重定向fetch(new URL(res.headers.location, url).toString());req.abort();} else if (res.statusCode === 200) {// 响应成功let chunks = [];res.on("data", (chunk) => chunks.push(chunk));res.on("end", () => resolve(Buffer.concat(chunks)));} else {reject(new Error(`GET ${url} failed: status ${res.statusCode}`));}}).on("error", reject);}fetch(args.path);});return {contents};});},
});

  • 然后我们新建 build.js 文件，内容如下:

    const { build } = require("esbuild");
const httpImport = require("./http-import-plugin");
async function runBuild() {build({absWorkingDir: process.cwd(),entryPoints: ["./src/index.jsx"],outdir: "dist",bundle: true,format: "esm",splitting: true,sourcemap: true,metafile: true,plugins: [httpImport()],}).then(() => {console.log("🚀 Build Finished!");});
}
runBuild();

  • 通过 node build.js 执行打包脚本，发现插件不能 work，抛出了这样一个错误:

  • 这是为什么呢？你可以回过头观察一下第三方包的响应内容:

    export * from '/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/optimized/r
export {default} from '/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/opt

  • 进一步查看还有更多的模块内容:

  • 因此我们可以得出一个结论：除了要解析 react-dom 这种直接依赖的路径，还要解析它
    依赖的路径，也就是间接依赖的路径。那如何来实现这个效果呢？我们不妨加入这样一段 onResolve 钩子逻辑:

    // 拦截间接依赖的路径，并重写路径
// tip: 间接依赖同样会被自动带上 `http-url`的 namespace
build.onResolve({ filter: /.*/, namespace: "http-url" }, (args) => ({// 重写路径path: new URL(args.path, args.importer).toString(),namespace: "http-url",
}));

  • 加了这段逻辑后，Esbuild 路径解析的流程如下:

  • 现在我们再次执行 node build.js ，发现依赖已经成功下载并打包了。

实现 HTML 构建插件

  • Esbuild 作为一个前端打包工具，本身并不具备 HTML 的构建能力。也就是说，当它把
    js/css 产物打包出来的时候，并不意味着前端的项目可以直接运行了，我们还需要一份对
    应的入口 HTML 文件。而这份 HTML 文件当然可以手写一个，但手写显得比较麻烦，尤
    其是产物名称带哈希值的时候，每次打包完都要替换路径。那么，我们能不能通过
    Esbuild 插件的方式来自动化地生成 HTML 呢？

  • 刚才我们说了，在 Esbuild 插件的 onEnd 钩子中可以拿到 metafile 对象的信息。那么，这个对象究竟什么样呢？

    {  "inputs": { /* 省略内容 */ },  "output": {  "dist/index.js": {  "imports": [],  "exports": [],  "entryPoint": "src/index.jsx",  "inputs": {  "http-url:https://cdn.skypack.dev/-/object-assign@v4.1.1-LbCnB3r2y2yFmhmiCfPn/dist=es": true, // 假设使用布尔值来表示引入  "http-url:https://cdn.skypack.dev/-/react@v17.0.1-yH0aYV1FOvoIPeKBbHxg/dist=es2019,mode=imports-auto": true, // 添加了可能的mode参数  "http-url:https://cdn.skypack.dev/-/scheduler@v0.20.2-PAU9F1YosUNPKr7V4s0j/dist=es2015": true, // 假设是es2015而不是es201（可能是个打字错误）  "http-url:https://cdn.skypack.dev/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports-auto": true, // 添加了可能的mode参数  // 注意：以下条目格式可能不正确，通常我们不会在这里使用对象，除非有特定的原因  // "http-url:https://cdn.skypack.dev/react-dom": { "bytesInOutput": 0 }, // 这可能不是有效的输入表示  "src/index.jsx": { "bytesInOutput": 178 }  },  "bytes": 205284  },  "dist/index.js.map": { /* 省略内容 */ }  }  
}

  • 从 outputs 属性中我们可以看到产物的路径，这意味着我们可以在插件中拿到所有 js 和
    css 产物，然后自己组装、生成一个 HTML，实现自动化生成 HTML 的效果

  • 我们接着来实现一下这个插件的逻辑，首先新建 html-plugin.js ，内容如下:

    const fs = require("fs/promises");
const path = require("path");
const {createScript,createLink,generateHTML
} = require('./util');module.exports = () => {return {name: "esbuild:html",setup(build) {build.onEnd(async (buildResult) => {if (buildResult.errors.length) {return;}const {metafile} = buildResult;// 1. 拿到 metafile 后获取所有的 js 和 css 产物路径const scripts = [];const links = [];if (metafile) {const {outputs} = metafile;const assets = Object.keys(outputs);assets.forEach((asset) => {if (asset.endsWith(".js")) {scripts.push(createScript(asset));} else if (asset.endsWith(".css")) {links.push(createLink(asset));}});}// 2. 拼接 HTML 内容const templateContent = generateHTML(scripts, links);// 3. HTML 写入磁盘const templatePath = path.join(process.cwd(), "index.html");await fs.writeFile(templatePath, templateContent);});},
};// util.js
// 一些工具函数的实现
const createScript = (src) => `<script type="module" src="${src}"></script>`;
const createLink = (src) => `<link rel="stylesheet" href="${src}"></link>`;
const generateHTML = (scripts, links) => `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Esbuild App</title>
${links.join("\n")}
</head>
<body>
<div id="root"></div>
${scripts.join("\n")}
</body>
</html>
`;module.exports = {createLink,createScript,generateHTML
};

  • 现在我们在 build.js 中引入 html 插件

    const html = require("./html-plugin");
// esbuild 配置
plugins: [// 省略其它插件html()
],

  • 然后执行 node build.js 对项目进行打包，你就可以看到 index.html 已经成功输出到根
    目录。接着，我们通过 serve 起一个本地静态文件服务器:

    // 1. 全局安装 serve
npm i -g serve
// 2. 在项目根目录执行
serve .

  • 可以看到如下的界面:

  • 再访问 localhost:3000 ，会默认访问到 index.html 的内容：
  • 这样一来，应用的内容就成功显示了，也说明 HTML 插件正常生效了。当然，如果要做
    一个足够通用的 HTML 插件，还需要考虑诸多的因素，比如 自定义 HTML 内容 、 自定义
    公共前缀(publicPath) 、 自定义 script 标签类型 以及 多入口打包 等等，大家感兴趣的话
    可以自行扩展。可以参考这个插件: esbuild-plugin-html

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

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

相关文章

你知道大数据信用分低需要如何改善吗？

你知道大数据信用分低需要如何改善吗？

在当今社会&#xff0c;大数据信用分已经成为个人信用评估的重要指标之一。然而&#xff0c;有时候我们会发现自己的大数据信用分较低&#xff0c;这可能会对我们的信用状况产生负面影响。那么&#xff0c;如何改善自己的大数据信用分呢?本文将从信用分低的原因进行分析&#…
阅读更多...
【Micro-ROS学习】

【Micro-ROS学习】

Micro-ROS 是专为 ROS 2 设计的&#xff0c;它允许在微控制器&#xff08;microcontrollers&#xff09;上实现ROS 2的功能。Micro-ROS 从 ROS 2 架构优化而来&#xff0c;目的是让那些资源有限的嵌入式设备也能够接入ROS 2生态系统&#xff0c;享受ROS 2带来的标准化通信、模块…
阅读更多...
java简易计算器（多种方法）

java简易计算器（多种方法）

parseDouble() 方法属于 java.lang.Double 类。它接收一个字符串参数&#xff0c;其中包含要转换的数字表示。如果字符串表示一个有效的 double&#xff0c;它将返回一个 double 值。 应用场景 parseDouble() 方法在以下场景中非常有用&#xff1a; 从用户输入中获取数字&a…
阅读更多...
国内AI行业对GPU算力的需求有多大？

国内AI行业对GPU算力的需求有多大？

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;算力作为支撑其持续进步的核心动力&#xff0c;在国内的重要性日益凸显&#xff0c;无论是海外还是国内&#xff0c;AI算力行业都呈现出蓬勃发展的态势&#xff0c;而国内对于AI算力的需求更是呈现出爆发式的…
阅读更多...
离散傅里叶变化

离散傅里叶变化

傅里叶变换 对傅里叶变换了解不是很清楚的朋友推荐一下这个帖子&#xff0c;讲得很详细 傅里叶变换 源码 先看源码链接 #include "opencv2/core.hpp" #include "opencv2/imgproc.hpp" #include "opencv2/imgcodecs.hpp" #include "open…
阅读更多...
从零开始了解GPT-4o模型：它是如何工作的？

从零开始了解GPT-4o模型：它是如何工作的？

人工智能&#xff08;AI&#xff09;技术正以惊人的速度发展&#xff0c;其中最引人注目的是OpenAI发布的GPT-4o模型。作为GPT系列的新成员&#xff0c;GPT-4o在多模态输入处理和响应速度上取得了重大进展。本文将深入探讨GPT-4o的工作原理&#xff0c;帮助您全面了解这一尖端A…
阅读更多...
MySQL实训

MySQL实训

项目名称与项目简介 股票交易系统是一个综合性的金融服务平台&#xff0c;它提供了股票买卖、交易查询、用户管理、股票信息管理以及资金账户管理等功能。系统旨在为用户提供一个安全、高效、便捷的股票交易环境&#xff0c;让用户能够实时掌握市场动态&#xff0c;做出合理的…
阅读更多...
模拟物理弧线轨道运动（模拟飞盘，子弹运动）

模拟物理弧线轨道运动（模拟飞盘，子弹运动）

模拟物理弧线运动&#xff08;模拟飞盘&#xff09; 介绍实现代码总结 介绍 模拟弧线的运动&#xff0c;并且对象始终朝向运动的方向&#xff0c;模拟飞盘子弹的运动轨迹。这里我是没有加重力这么一个概念的&#xff0c;当然了重力其实比较简单可以参考我之前写的模拟抛物线运动…
阅读更多...
ubuntu 挂载新硬盘 记录

ubuntu 挂载新硬盘 记录

Ref 安全自动挂载硬盘&#xff0c; https://berylbot.com/archives/mount-disks-ubuntu 挂载新硬盘, https://berylbot.com/archives/mount-disks-ubuntu 1. 检查新硬盘是否被系统识别 lsblk -f 查看所有硬盘的UUID, 其中 mount point 为空则表示尚未挂载的硬盘。 列出所有可用…
阅读更多...
ET9中ETTask传递新的Context原理

ET9中ETTask传递新的Context原理

ET9中ETTask传递新的Context原理 前言 每一个异步函数都会创建两个对象&#xff0c; 第1个是当前异步函数返回值&#xff08;ETTASK&#xff09;对应的ETAsyncTaskMethodBuilder&#xff0c;通过这个类的静态方法Create创建返回&#xff0c;这个builder类中会有一个Task对象&…
阅读更多...
idea 自动生成序列化数字

idea 自动生成序列化数字

目标&#xff1a;当类继承Serializable后自动生成序列化Uid 网上查了很多说勾选class without ‘serialVersionUID’ 但是我勾选没用 最后发现&#xff0c;我勾选的是Serialization issues里面的配置&#xff0c;要勾选的是JVM languages下的 如下图所示&#xff0c;记录一下…
阅读更多...
技术干货｜SimLab 电子产品热流体仿真

技术干货｜SimLab 电子产品热流体仿真

电子产品热仿真特点有哪些&#xff1f; 结构复杂&#xff0c;电子设备包含几十~上千个元器件 体积小&#xff0c;功率密度高、关注热敏感元器件 多种冷却方式&#xff0c;自然冷却、风扇冷却、液冷、热管等 多维度&#xff0c;芯片级&#xff0c;板级&#xff0c;系统级 单…
阅读更多...
昇思25天学习打卡营第03天|张量Tensor

昇思25天学习打卡营第03天|张量Tensor

何为张量&#xff1f; 张量&#xff08;Tensor&#xff09;是一个可用来表示在一些矢量、标量和其他张量之间的线性关系的多线性函数&#xff0c;这些线性关系的基本例子有内积、外积、线性映射以及笛卡儿积。其坐标在 &#x1d45b;维空间内&#xff0c;有  &#x1d45b;&a…
阅读更多...
ppt模版免费下载网站大全

ppt模版免费下载网站大全

PPT是我们传达信息、分享知识、展示项目和进行商务沟通的重要工具。一个设计精美、布局合理的PPT不仅能吸引观众的注意力&#xff0c;还能有效提升演讲者的专业形象。PPT模版可以帮助我们高效制作出精美的PPT&#xff0c;下面小编就来和大家分享一些免费无需注册登录就可以直接…
阅读更多...
Mysql进阶-索引-使用规则-索引失效情况二（or连接的条件、数据分布影响）

Mysql进阶-索引-使用规则-索引失效情况二（or连接的条件、数据分布影响）

文章目录 1、or连接的条件1.1、展示 tb_user 索引1.2、查询 id10 or age231.3、执行计划 id10 or age231.4、给 age 创建 索引1.4、执行计划 phone17799990004 or age23 2、数据分布影响2.1、查询 tb_user2.2、查询 phone >177999900202.3、执行计划 phone >177999900202…
阅读更多...
Python学习打卡：day17

Python学习打卡：day17

day17 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 目录 day17121、Python 操作 MySQL 基础使用pymysql创建到 MySQL 的数据库链接执行 SQL 语句执行非查询性质的SQL语句执行查询性质的SQL语句 122、Pyth…
阅读更多...
幻兽帕鲁Palworld樱花版本服务器一键开服联机

幻兽帕鲁Palworld樱花版本服务器一键开服联机

1、登录服务器&#xff08;百度莱卡云&#xff09; 1.1、第一次购买服务器会安装游戏端&#xff0c;大约5分钟左右&#xff0c;如果长时间处于安装状态请联系客服 2、在启动中调整游戏参数 2.1、重启服务器&#xff0c;等待running出现&#xff0c;或者运行时间变为灰色&#x…
阅读更多...
Linux0.12内核源码解读(5)-head.s

Linux0.12内核源码解读(5)-head.s

大家好&#xff0c;我是呼噜噜&#xff0c;好久没有更新old linux了&#xff0c;本文接着上一篇文章图解CPU的实模式与保护模式&#xff0c;继续向着操作系统内核的世界前进&#xff0c;一起来看看heads.s as86 与GNU as 首先我们得了解一个事实&#xff0c;在Linux0.12内核源…
阅读更多...
2024年6月27日 (周四) 叶子游戏新闻

2024年6月27日 (周四) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 喜马拉雅下载工具: 字面意思 Steam国产“类8番”游戏《永恒逃脱&#xff1a;暗影城堡》…
阅读更多...
【JD-GUI】MacOS 中使用Java反编译工具JD-GUI

【JD-GUI】MacOS 中使用Java反编译工具JD-GUI

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 开篇说明概念理解一、基础环境说明1.1 硬件环境1.2 软件环境 二、下载与安装2.1 选择对应版本2.2 解压运行排除异常&#xff1a;2.3 关于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023