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

Question

也将其发布到Svelte仓库中：

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

  const context = {
    foo: bar,
    baz: ''
  }

  return h.view('index', context)

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

在我的玩具应用程序中，我希望能够在服务器启动时（从a .env或CLI）传递api密钥，并像这样从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
    })
  ]
};