Webpack React: условно загрузить файлы конфигурации json

Question

У меня есть проект WebPack React, который я тестирую на своем сервере staging .Теперь пришло время выпустить его на сервере " production ".

Я использую файл server.json , который содержит информацию о сервере, такую ​​как ключи API, адрес APIи т. д.

Я хочу использовать другой файл server.json для «производства» и «подготовки».И когда я использую production-server.json, в моем комплекте не будет никаких следов staging-server.json.

src
- config
-- config.js
-- production-server.json
-- staging-server.json

может быть что-то вроде: yarn build-staging, yarnнаращивание производства

Answer 1

Вы должны использовать переменные окружения и веб-пакеты DefinePlugin. Кроме того, вы можете использовать node-config для автоматической загрузки файла конфигурации json на основе вашего NODE_ENV.

package.json

"scripts": {
  "build:dev": "NODE_ENV=development start-something",
  "build": "NODE_ENV=production start-something"
}

структура конфигурации проекта

config
  default.json
    { "api": "https://api.mysite.com/v1" }
  staging.json
    { "api": "http://localhost:8000/v1" }

Webpack config

// node-config will load your staging.json or default.json file here
// depending on what NODE_ENV is
const config = require('config');

plugins: [
  // inject window.CONFIG into your app
  new webpack.DefinePlugin({
    CONFIG: JSON.stringify(config)
  })
]

Тогда в вашем коде реагирования у вас будет доступ к специфическому для окружающей среды конфигу

componentDidMount() {
  // in prod: https://api.mysite.com/v1/user/some-user-id
  // in staging: http://localhost:8000/v1/user/some-user-id
  return axios(`${CONFIG.api}/user/${this.props.userId}`).then(whatever...)
}

Если вы работаете в Windows, используйте cross-env, чтобы установить переменную окружения.

Использование node-config не единственный способ сделать это, есть несколько, но я нахожу это довольно простым, если вы не работаете с электроном.

редактировать

Поскольку node-config использует nodejs, он обычно используется в проектах переднего плана в сочетании с веб-пакетом. Если вы не можете интегрировать его с веб-пакетом, вам вообще не нужно использовать node-config, я бы сделал что-то вроде этого:

структура проекта

config
  default.json
  development.json
  test.json
  index.js
src
  ...etc

конфигурационные файлы

// default.json, typically used for production
{
  "api": "https://api.mysite.com/v1"
}

// development.json
{
  "api": "http://localhost:8000/v1"
}

// index.js
// get process.env via babel-plugin-transform-inline-environment-variables
import production from './default.json';
import development from './development.json';
const { NODE_ENV: env } = process.env;

const config = {
  production,
  development
};

export default config[env];