Vite库模式构建Web包遇process未定义错误，如何解决？

问题原因 #

你遇到的process is not defined错误，核心原因是Vite默认不会像Webpack那样自动注入process.env变量，再加上当前配置的几个不合理点，导致Node.js环境代码残留：

• 输出格式使用了cjs（CommonJS），该格式偏向Node.js环境，浏览器无法直接识别，且容易保留Node相关代码
• 使用了针对应用场景的代码分割插件splitVendorChunkPlugin和手动分包逻辑，这在library模式下完全没必要
• 未对第三方依赖中的process.env引用做替换处理

解决方案 #

按以下步骤调整Vite配置：

1. 切换为浏览器兼容的输出格式
   将lib.formats从['cjs']改为['umd', 'es']：UMD格式兼容浏览器、AMD、CommonJS等多环境，ES格式适配现代浏览器的ES模块机制。

   lib: {
     formats: ['umd', 'es'],
     name: 'Spark2',
     entry: resolve(__dirname, 'src/app.ts'),
   },
   

2. 注入并替换process.env变量
   在配置中添加define选项，打包时直接将process.env.NODE_ENV替换为当前构建模式的实际值，彻底消除process引用：

   export default defineConfig(({mode}) => {
     return {
       define: {
         'process.env.NODE_ENV': JSON.stringify(mode)
       },
       // 其他配置...
     }
   })
   

3. 移除library模式下冗余的代码分割配置
   splitVendorChunkPlugin和manualChunks是为应用场景设计的代码分割逻辑，library模式下不需要，移除后可避免额外分包带来的Node代码残留：

   • 删除plugins: [splitVendorChunkPlugin()]
   • 删除rollupOptions.output.manualChunks

4. 优化CommonJS依赖转换
   调整commonjsOptions，确保Vite正确转换第三方CommonJS依赖，避免残留Node环境代码：

   commonjsOptions: {
     transformMixedEsModules: true, // 自动转换混合ES模块的CommonJS包
     include: [/node_modules/]
   },
   

修改后的完整配置 #

import {resolve} from 'path'
import {defineConfig} from 'vite'

export default defineConfig(({mode}) => {
    return {
        define: {
            'process.env.NODE_ENV': JSON.stringify(mode)
        },
        build: {
            emptyOutDir: false,
            minify: mode === "dev" ? false : 'terser',
            target: 'es2015',
            lib: {
                formats: ['umd', 'es'],
                name: 'Spark2',
                entry: resolve(__dirname, 'src/app.ts'),
            },
            commonjsOptions: {
                transformMixedEsModules: true,
                include: [/node_modules/]
            },
            outDir: './static',
            rollupOptions: {
                output: {
                    entryFileNames: mode === "dev" ? 'js/main.js' : 'js/main.min.js',
                    chunkFileNames: mode === "dev" ? 'js/[name].js' : 'js/[name].min.js',
                    assetFileNames: mode === "dev" ? '[ext]/[name].[ext]' : '[ext]/[name].min.[ext]',
                },
            }
        }
    }
})

验证 #

重新构建后，检查输出文件，process.env.NODE_ENV会被替换为"development"或"production"字符串，不再出现process引用，浏览器环境即可正常运行。

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