使用Vite与Solid插件无法将@supabase/supabase-js排除出服务端打包文件

使用Cloudflare Workers的Solid适配器时，尝试将@supabase/supabase-js标记为外部依赖以避免其代码被打包进最终的server.js，但所有配置组合均无效，产物中仍包含该库及其依赖的Node.js内置模块代码。

当前配置问题分析 #

1. Solid插件的exclude参数误用：该参数用于排除文件不被Solid编译器处理，而非控制打包时的外部依赖，因此配置['@supabase/supabase-js', 'node_modules']无效。
2. vite-plugin-external配置冲突：该插件可能与Solid Start的内置Rollup配置冲突，且配置格式不符合模块映射要求。
3. Rollupexternal配置错误：添加node_modules作为外部依赖是无效的，external需指定具体模块名而非目录。
4. optimizeDeps.disabled阻止依赖优化：强制禁用依赖优化可能导致Vite错误地将外部模块打包进产物。
5. tsconfigexclude无效：该配置仅控制TypeScript编译范围，与打包时的依赖排除无关。

解决方案 #

1. 修正Vite配置（vite.ts） #

移除无效配置，聚焦Rollup的外部依赖声明：

import solid from 'solid-start/vite'
import { defineConfig } from 'vite'
import cloudflare from 'solid-start-cloudflare-workers'

export default defineConfig({
  plugins: [
    solid({
      adapter: cloudflare({
        wranglerConfigPath: true,
      }),
      // 若不需要SSR可保留ssr: false，但需确保服务端打包逻辑正常
      // ssr: false,
    }),
  ],
  envPrefix: 'PUBLIC_',
  server: {
    port: 8010,
  },
  build: {
    rollupOptions: {
      // 仅指定需要排除的模块
      external: ['@supabase/supabase-js'],
    },
  },
  optimizeDeps: {
    exclude: ['@supabase/supabase-js'],
  },
  ssr: {
    external: ['@supabase/supabase-js'],
  },
})

2. 配置Wrangler允许外部依赖 #

在wrangler.toml中添加外部模块声明，确保Cloudflare Workers运行时能正确加载该包：

[[externals]]
name = "@supabase/supabase-js"

[build]
command = "npm run build"

[build.upload]
format = "modules"

3. 修正tsconfig.json配置 #

移除无效的@supabase/supabase-js排除项：

{
  "extends": "tsconfig/solid.json",
  "compilerOptions": {
    "types": ["solid-start/env"],
    "baseUrl": "./",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

4. 确保代码使用ES模块导入 #

在业务代码中使用标准ES模块导入方式，避免使用require：

import { createClient } from '@supabase/supabase-js'

// 初始化客户端
const supabase = createClient(
  import.meta.env.PUBLIC_SUPABASE_URL,
  import.meta.env.PUBLIC_SUPABASE_ANON_KEY
)

验证结果 #

重新执行打包命令后，server.js中应仅保留目标导入语句：

import { createClient } from '@supabase/supabase-js'

相关依赖代码不会被打包进产物，而是由Cloudflare Workers在运行时从npm加载。

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