Как ввести переменные dotenv без префикса REACT_APP в приложение create-response-app?

У меня есть проект по переходу с устаревшего приложения React на стандартное create-react-app (не извлеченное).

В устаревшем проекте он вручную загружает .env файлы с dotenv и dotenv-expand и внедряет через веб-пакет DefinePlugin.

create-react-app интуитивно поддерживает dotenv, но может распознавать только переменные с префиксом REACT_APP_.

В унаследованном коде так много мест, а также импортированных пакетов в других репозиториях, которые используют process.env.xxx переменные, поэтому сейчас невозможно переименовать их с префиксом перед миграцией.

В этом случае, как я могу заставить create-react-app распознавать переменные dotenv без префикса REACT_APP_?

Кстати, раньше я пытался rewire построить скрипт с некоторыми простыми настройками через webpack, например, с объединением js и css:

const path = require('path');
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');

let webpackConfig = defaults.__get__('config');

webpackConfig.output.filename = 'static/js/[name].js';
webpackConfig.optimization.splitChunks = { cacheGroups: { default: false } };
webpackConfig.optimization.runtimeChunk = false;
webpackConfig.plugins.find(plugin => plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.filename = 'static/css/[name].css';
webpackConfig.plugins.find(plugin => plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.moduleFilename = () => 'static/css/[name].css';

Но кажется, что dotenv и DefinePlugin сложнее. Не уверен, можно ли этого добиться таким же образом.


webpack reactjs create-react-app dotenv
person Mike    schedule 23.04.2020    source источник
comment
Не уверен, что это хороший вариант в вашей ситуации, но что, если вы определили все свои переменные, используя оба стиля именования? (например, FOO=bar и REACT_APP_FOO=bar)   -  person sloppypasta    schedule 23.04.2020
comment
Я просмотрел исходный код cra, изменить префикс REACT_APP_ невозможно.   -  person felixmosh    schedule 24.04.2020

Ответы (2)


arrow_upward
1
arrow_downward

Также используйте rewire

// "start": "node start.js"
const rewire = require('rewire');

process.env.NODE_ENV = 'development';

let getClientEnvironment = rewire('react-scripts/config/env.js');
getClientEnvironment.__set__(
  'REACT_APP',
  /(^REACT_APP_|API|DEPLOY|SECRET|TOKEN|URL)/,
);

let configFactory = rewire('react-scripts/config/webpack.config.js');
configFactory.__set__('getClientEnvironment', getClientEnvironment);

let start = rewire('react-scripts/scripts/start.js');
start.__set__('configFactory', configFactory);

build немного отличается

// "build": "node build.js"
const rewire = require('rewire');

process.env.NODE_ENV = 'production';

let getClientEnvironment = rewire('react-scripts/config/env.js');
getClientEnvironment.__set__(
  'REACT_APP',
  /(^REACT_APP_|API|DEPLOY|SECRET|TOKEN|URL)/,
);

let configFactory = rewire('react-scripts/config/webpack.config.js');
configFactory.__set__('getClientEnvironment', getClientEnvironment);

let webpackConfig = configFactory('production');

let build = rewire('react-scripts/scripts/build.js');
build.__set__('config', webpackConfig);
person Mike    schedule 25.04.2020

arrow_upward
1
arrow_downward

несколько лет назад Дэн Абрамов (соавтор CRA ) предложил переопределить переменные, чтобы они соответствовали REACT_APP_ в сценарии точки входа, который затем вызывает сценарии реакции в package.json.

Если у вас есть более простые потребности в поддержке этих переменных, таких как переменные платформы CI, такие как Netlify COMMIT_REF или Gitlab CI_COMMIT_SHA, вы можете установить эти переменные встроенными, не добавляя еще один скрипт.

  "scripts": {
    "start": "react-scripts start",
    "build": "REACT_APP_COMMIT_SHA=$COMMIT_REF$CI_COMMIT_SHA react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Это установит REACT_APP_COMMIT_SHA в значение хэша той службы, в которой он встроен (поскольку другая переменная будет пустой).

person Jeff Puckett    schedule 15.05.2020