如何让Vite在Svelte项目的生产与开发环境均注入Buffer模块？

Vite开发环境基于esbuild、生产环境基于rollup，因此需要针对两种环境分别配置Buffer注入，或用统一插件覆盖场景，以下是两种可行方案：

方案一：手动配置双环境注入 #

1. 确认依赖安装 #

确保已安装buffer和@rollup/plugin-inject：

npm install buffer @rollup/plugin-inject --save

2. 修改Vite配置文件 #

更新vite.config.js，同时处理开发与生产环境的Buffer注入：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import optimizeImports from 'vite-plugin-optimize-persisted-imports';
import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill';
import inject from '@rollup/plugin-inject';
import fs from 'fs';

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production';

  return {
    build: {
      target: "esnext",
      rollupOptions: {
        // 生产环境通过rollup插件注入Buffer
        plugins: [inject({ Buffer: ['buffer', 'Buffer'] })]
      }
    },
    optimizeDeps: {
      esbuildOptions: {
        define: { 
          global: 'globalThis',
          // 映射代码中的Buffer到buffer模块导出
          Buffer: 'require("buffer").Buffer'
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({ process: true }),
          // 开发环境通过esbuild插件注入全局Buffer
          {
            name: 'inject-buffer',
            setup(build) {
              // 确保buffer模块被正确解析
              build.onResolve({ filter: /^buffer$/ }, args => ({
                path: require.resolve('buffer'),
                external: false
              }));
              // 在依赖模块顶部注入全局Buffer声明
              build.onLoad({ filter: /\.js$/ }, async args => {
                if (!args.path.includes('node_modules')) return;
                const content = await fs.promises.readFile(args.path, 'utf8');
                return {
                  contents: `import { Buffer } from 'buffer'; globalThis.Buffer = Buffer; ${content}`
                };
              });
            }
          }
        ]
      }
    },
    plugins: [
      svelte({
        experimental: { prebundleSvelteLibraries: true },
        preprocess: [sveltePreprocess({ typescript: true }), optimizeImports()]
      }),
      // 开发环境额外通过Vite插件补全注入
      !isProd && {
        name: 'dev-buffer-global',
        transform(code, id) {
          if (!id.includes('node_modules')) return code;
          return `import { Buffer } from 'buffer'; globalThis.Buffer = Buffer; ${code}`;
        }
      }
    ].filter(Boolean)
  };
});

方案二：使用现成插件简化配置 #

如果手动配置过于繁琐，可借助vite-plugin-node-polyfills插件统一处理Node.js模块polyfill，自动覆盖开发与生产环境：

1. 安装插件 #

npm install vite-plugin-node-polyfills --save-dev

2. 修改Vite配置 #

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import optimizeImports from 'vite-plugin-optimize-persisted-imports';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig(() => {
  return {
    build: {
      target: "esnext"
    },
    plugins: [
      svelte({
        experimental: { prebundleSvelteLibraries: true },
        preprocess: [sveltePreprocess({ typescript: true }), optimizeImports()]
      }),
      // 启用Node.js polyfills，自动处理Buffer全局注入
      nodePolyfills({
        include: ['buffer'],
        globals: {
          Buffer: true
        }
      })
    ]
  };
});

验证 #

修改配置后，分别运行npm run dev（开发环境）和npm run build（生产环境），检查依赖模块是否能正常调用Buffer相关方法。

内容的提问来源于stack exchange，提问作者bioround