Question

Posted this to the Svelte repo：

我刚刚在周末制作了我的第一个Svelte应用程序，并且非常喜欢这种体验。有一点我很好奇，我无法通过大量的研究得出结论，是否/如何通过运行时环境变换或类似于客户端脚本，因此它在捆绑/中可用浏览器。这可能不被认为是“最佳实践”，所以也许我只是在我自己这里，但在帕格例如你可以做类似下面的事情（例如从Hapi.js路由处理程序）：

data.frame(df1[1], matrix(unlist(df1$power_dbm0), ncol = 11, byrow = TRUE))

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

在我的玩具应用程序中，我希望能够在服务器启动时（从const context = { foo: bar, baz: '' } return h.view('index', context)或CLI）传递api密钥，并从Express服务器注入，如下所示： .env 并在客户端脚本中提供该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: [
    replace({
      // you're right, you shouldn't be injecting this
      // into a client script :)
      'API_KEY': process.env.API_KEY
    }),
    svelte()
  ]
};

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

1 个答案: