精巧的框架：在運行時將環境變量傳遞給客戶端包

Question

也將其發布到Svelte倉庫中：

我剛剛在周末制作了我的第一個Svelte應用程序，真的很喜歡這種體驗。 我很好奇的一件事是，我是否能通過大量的研究無法弄清楚，是/是否可以/如何通過運行時環境變量或類似於客戶端腳本的方法，因此可以在捆綁包中找到它/瀏覽器。 這可能不被認為是“最佳實踐”，所以也許我只是一個人，但是例如在Pug中，您可以執行以下操作（例如，從Hapi.js路由處理程序執行）：

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

  return h.view('index', context)

這些變量在Pug上下文中可用。

在我的玩具應用程序中，我希望能夠在服務器啟動時（從.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: [
    replace({
      // you're right, you shouldn't be injecting this
      // into a client script :)
      'API_KEY': process.env.API_KEY
    }),
    svelte()
  ]
};