如何让Svelte+Vite npm包引用消费端环境变量？构建报错求助

问题原因 #

开发模式下Vite会动态替换import.meta.env变量，但npm包在构建阶段是独立编译的，此时包内的import.meta.env并没有消费端的环境变量注入，所以build时会抛出undefined错误。直接用process.env也不行，因为前端环境下process对象不存在。

解决方案 #

方案1：通过配置注入传递变量（推荐）

不要在npm包中直接引用消费端的环境变量，而是提供初始化函数让消费端主动传递配置，这是最符合npm包设计规范的方式：

1. 修改npm包的auth-config.js，改成可配置的模式：

// npm包内的auth-config.js
export let authConfig = {
  publicVariable1: ''
};

export function initializeAuthConfig(config) {
  // 合并消费端传入的配置
  Object.assign(authConfig, config);
}

2. 修改npm包的auth-service.ts，使用上面的配置对象：

// npm包内的auth-service.ts
import { authConfig } from './auth-config';

export function useAuth() {
  return {
    getKey: () => authConfig.publicVariable1
  };
}

3. 在Demo App中初始化配置，比如在根布局文件+layout.svelte中：

<!-- Demo App的+layout.svelte -->
<script>
  import { initializeAuthConfig } from '你的npm包名称';

  // 把消费端的环境变量传入npm包
  initializeAuthConfig({
    publicVariable1: import.meta.env.PUBLIC_VITE_VARIABLE_1
  });
</script>

方案2：在消费端Vite配置中注入全局变量

如果一定要在npm包中直接用import.meta.env，可以在Demo App的Vite配置里把变量注入到全局构建流程中：

// Demo App的vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  define: {
    // 将消费端的环境变量转为字符串注入到全局
    'import.meta.env.PUBLIC_VITE_VARIABLE_1': JSON.stringify(import.meta.env.PUBLIC_VITE_VARIABLE_1)
  }
});

注意：这种方式会把变量硬编码到构建产物中，仅适合公开的前端环境变量，敏感密钥如果是前端使用本来就是公开的，后端密钥不要用PUBLIC_前缀，也不要在前端代码中处理。

方案3：补充TypeScript类型声明（可选）

如果用TypeScript，在npm包中添加类型声明避免语法报错：

// npm包内的src/env.d.ts
declare global {
  interface ImportMetaEnv {
    readonly PUBLIC_VITE_VARIABLE_1?: string;
  }
}

export {};

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