React-vite 中未定义缓冲区
Ник*_*чев 27 buffer reactjs vite
从 CRA 迁移后未定义缓冲区（创建 React 应用程序）
"vite": "^2.7.12"
我尝试添加插件，添加缓冲区的定义，但它不起作用。
const viteConfig = defineConfig({
/* define: {
"Buffer": {}
},*/
plugins: [reactRefresh(), react()],
build: {
rollupOptions: {
input: {
main: resolve('index.html'),
},
},
},
clearScreen: false
});
Ник*_*чев 39
安装这个库
@esbuild-plugins/node-globals-polyfill
并将其添加到您的 vite.config.js 中
export default defineConfig({
// ...other config settings
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true
})
]
}
}
})
将此库导入添加到您的 vite.config.js
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
Fel*_*yer 23
\xd0\x9d\xd0\xb8\xd0\xba\xd0\xbe\xd0\xbb\xd0\xb0\xd0\xb9 \xd0\xa1\xd1\x8b\xd1\x87\xd0\xb5\xd0\xb2 解决方案没有一开始对我不起作用。
\n相反，我简单地成功了
\n- \n
将缓冲区安装为开发依赖项\n
\nyarn add buffer（如果使用 npm，则使用等效的 npm） \n然后将其添加到 index.html 中的全局范围，如下所示：
\n \n
<html lang="en">\n <head>\n <script type="module">\n import { Buffer } from "buffer";\n window.Buffer = Buffer;\n </script> \n ...\n它也适用于类似的依赖关系，例如process您在 index.html 中导入的依赖项一样，如下所示：
import process from "process";\n window.process = process; \n\n
更新
\n对于我需要的不同项目util，这需要process. 在这种情况下，上面建议的方法还不够。
相反，我发现@esbuild-plugins(for vite dev) 和rollup-plugin-polyfill-node(for vite build) 将成功提供所有这些 Nodejs 包。
vite.config.ts这是适合我的完整内容：
import { defineConfig } from \'vite\'\nimport vue from \'@vitejs/plugin-vue\'\nimport { NodeGlobalsPolyfillPlugin } from \'@esbuild-plugins/node-globals-polyfill\'\nimport { NodeModulesPolyfillPlugin } from \'@esbuild-plugins/node-modules-polyfill\'\nimport rollupNodePolyFill from \'rollup-plugin-polyfill-node\'\n\nexport default defineConfig({\n plugins: [vue()],\n base: \'\', \n optimizeDeps: {\n esbuildOptions: {\n // Node.js global to browser globalThis\n define: {\n global: \'globalThis\'\n },\n // Enable esbuild polyfill plugins\n plugins: [\n NodeGlobalsPolyfillPlugin({\n buffer: true, \n process: true,\n }), \n NodeModulesPolyfillPlugin() \n ]\n }\n }, \n build: {\n rollupOptions: {\n plugins: [\n rollupNodePolyFill()\n ]\n }\n }\n})\n小心使用rollup-plugin-polyfill-node它的更新和维护的分支rollup-plugin-node-polyfills.
小智 12
我发现的最简单的解决方案是安装vite-plugin-node-polyfills（npm，repo）。
npm i -D vite-plugin-node-polyfills
vite.config.js以下是使用此插件的配置文件的基本版本：
import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
export default defineConfig({
plugins: [nodePolyfills()]
})
当前接受的答案推荐@esbuild-plugins/node-globals-polyfill，根据其存储库，它已经过时，而那里建议的替代品esbuild-plugin-polyfill-node，不适用于 vite（请参阅此处的问题）。
对我来说，上面的配置不起作用，我必须在 3 个文件中进行更改，在 vite.config.ts 、 index.html 中并添加包
1.安装包
yarn install process util buffer events
yarn add @esbuild-plugins/node-modules-polyfill
2.更新vite.config
import GlobalPolyFill from "@esbuild-plugins/node-globals-polyfill";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [react()],
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis",
},
plugins: [
GlobalPolyFill({
process: true,
buffer: true,
}),
],
},
},
resolve: {
alias: {
process: "process/browser",
stream: "stream-browserify",
zlib: "browserify-zlib",
util: "util",
},
},
});
3.更新index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/images/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script>
window.global = window;
</script>
<script type="module">
import process from "process";
import EventEmitter from "events";
import {Buffer} from "buffer";
window.Buffer = Buffer;
window.process = process;
window.EventEmitter = EventEmitter;
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.js"></script>
</body>
</html>