Svelte 框架：在运行时将环境变量传递给客户端包

Posted 2023-02-19

【中文标题】Svelte 框架：在运行时将环境变量传递给客户端包

【英文标题】：Svelte framework: pass environment variables to client-side bundle at runtime

【发布时间】：2018-10-07 10:33:17

【问题描述】：

Posted this to the Svelte repo 也是：

我刚刚在周末制作了我的第一个 Svelte 应用，并且非常喜欢这种体验。我很好奇的一件事是，我无法通过大量研究来弄清楚，是否/如何可以传递运行时环境变量或类似于客户端脚本，因此它可以在捆绑包中使用/浏览器。这可能不被认为是“最佳实践”，所以也许我只是一个人在这里，但例如在 Pug 中，您可以执行以下操作（例如来自 Hapi.js 路由处理程序）：

  const context = 
    foo: bar,
    baz: ''
  

  return h.view('index', context)

这些变量随后在 Pug 上下文中可用。

在我的玩具应用程序中，我希望能够在服务器启动时传递一个 api 密钥（来自 .env 或 CLI），并像这样从 Express 服务器注入它： app.use(express.static(`$__dirname/public`)) 并让该 var 在客户端脚本中可用。同样，将 api 密钥注入客户端脚本并从那里进行调用可能不是最佳实践，但这种变量传递在 Svelte 中是否可行？

使用 rollup-plugin-inject 或 rollup-plugin-replace 似乎应该可以做到这一点，但我无法弄清楚如何做到这一点。这绝对不是对框架的批评，但也许关于使用 env vars 的部分将是对 Svelte 文档的有用补充。谢谢！

【参考方案1】：

通常这是您在构建配置中要做的事情。从rollupjs 标签我假设你正在使用它——你可以使用rollup-plugin-replace 来注入你需要的内容：

// rollup.config.js
import replace from 'rollup-plugin-replace';
import svelte from 'rollup-plugin-svelte';

export default 
  input: 'src/main.js',
  output: 
    file: 'public/bundle.js',
    format: 'iife'
  ,
  plugins: [
    svelte(),
    replace(
      // you're right, you shouldn't be injecting this
      // into a client script :)
      'API_KEY': process.env.API_KEY
    )
  ]
;

【讨论】：

像任何其他变量一样。 console.log(API_KEY)

未定义。

嗯。您可能需要交换这些插件的顺序（我刚刚更新了答案）。如果失败，则需要复诊来诊断

我不使用 GitLab。我是 GitHub 上的 Rich-Harris。但是如果您在svelte.dev/chat 中提问，您可能会更快得到回复