Инфраструктура Svelte: передача переменных среды в пакет на стороне клиента во время выполнения - PullRequest
Новая
       23

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

0 голосов
/ 26 апреля 2018

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

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

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

  return h.view('index', context)

Эти переменные затем доступны в контексте Pug.

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

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

1 Ответ

0 голосов
/ 26 апреля 2018

Как правило, это то, что вы делаете в конфигурации сборки. Из тега 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()
  ]
};
...