Svelte framework: передача переменных среды клиентскому бандлу во время выполнения

Разместил это в репозитории Svelte также:

Я только что сделал свое первое приложение Svelte на выходных, и мне очень понравилось. Мне любопытна одна вещь, которую я не смог выяснить с приличным количеством исследований, - это то, можно ли / как можно передать env var времени выполнения или аналогичный клиентскому скрипту, чтобы он был доступен в пакете / браузер. Это, вероятно, не считается «лучшей практикой», поэтому, возможно, я здесь один, но, например, в Pug вы можете сделать что-то вроде следующего (например, из обработчика маршрута Hapi.js):

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

  return h.view('index', context)

Затем эти переменные становятся доступными в контексте Pug.

В моем игрушечном приложении я хотел сделать возможным передавать ключ api во время запуска сервера (либо из .env, либо из интерфейса командной строки) и вводить его с сервера Express следующим образом: app.use(express.static(`${__dirname}/public`)) и пусть эта переменная будет доступна в клиентском скрипте. Опять же, вероятно, не рекомендуется внедрять ключи api в клиентские скрипты и делать оттуда вызовы, но возможна ли такая передача переменных в Svelte?

Похоже, это должно быть возможно с использованием rollup-plugin-inject или rollup-plugin-replace, но я не мог понять, как это сделать. Это определенно не критика фреймворка, но, возможно, раздел о работе с env vars был бы полезным дополнением к документации Svelte. Спасибо!


8
3 940
1

Ответ:

Обычно это то, что вы делаете в своей конфигурации сборки. Исходя из тега rollupjs, я предполагаю, что вы это используете - вы можете использовать свернуть-плагин-заменить для вставки нужного вам контента:

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