javascript - slim 的框架 : pass environment variables to client-side bundle at runtime

Question

Posted this to the Svelte repo还有:

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

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

  return h.view('index', context)

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

在我的玩具应用程序中，我希望能够在服务器启动时传递一个 api key (从 .env 或 CLI)，并从 Express 服务器注入(inject)它，如下所示:
app.use(express.static(`${__dirname}/public`))
并让该 var 在客户端脚本中可用。同样，将 api key 注入(inject)客户端脚本并从那里进行调用可能不是最佳做法，但这种变量传递在 Svelte 中是否可行？

似乎这应该可以使用 rollup-plugin-inject 或 rollup-plugin-replace，但我无法弄清楚如何让它工作。这绝对不是对该框架的批评，但也许关于使用环境变量的部分将是对 Svelte 文档的有用补充。谢谢!

Answer 1

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

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