Как ввести переменные dotenv без префикса REACT_APP в create-реагировать-приложение? - PullRequest
Новая
       16

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

0 голосов
/ 23 апреля 2020

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

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

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

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

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

Кстати, я пытался rewire собрать скрипт раньше с некоторыми простыми настройками через веб-пакет, такими как связывание 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 сложнее. Не уверен, что это может быть достигнуто таким же образом.

1 Ответ

0 голосов
/ 25 апреля 2020

Также используйте 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);
...