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

Question

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 文档的有用补充。谢谢！

Answer 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
    })
  ]
};