Почему моя сборка npm предназначена для тестирования производственных свойств?

Я хочу связать две сборки в производственном стиле в моем проекте React 16.13. Один для тестовой среды, другой для производственной среды. Я настроил следующие сценарии...

  "scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:test": "NODE_ENV=test react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

У меня есть эти два файла.env...

localhost:client davea$ cat .env.test 
REACT_APP_PROXY=http://lab.mydomain.com

davea$ cat .env.production 
REACT_APP_PROXY=http://prod.mydomain.com

Я запускаю свою сборку для тестирования следующим образом...

localhost:client davea$ npm run build:test

> client@0.1.0 build:test /Users/davea/Documents/workspace/chicommons/maps/client
> NODE_ENV=test react-scripts build

Creating an optimized production build...
Compiled with warnings.

./src/containers/FormContainer.jsx
  Line 112:31:  Unnecessary escape character: \[  no-useless-escape

./src/components/Flash/index.js
  Line 26:45:  Expected dot to be on same line as property  dot-location

./src/components/CoopTypes.jsx
  Line 52:9:  Do not mutate state directly. Use setState()  react/no-direct-mutation-state

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  92.83 KB  build/static/js/2.05641348.chunk.js
  22.47 KB  build/static/css/2.af3c1da9.chunk.css
  4.07 KB   build/static/js/main.367658f7.chunk.js
  1.26 KB   build/static/css/main.dcf9a285.chunk.css
  774 B     build/static/js/runtime-main.8c40394c.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Однако после того, как я сканирую build/static/js/main.367658f7.chunk.js (собранный файл), он имеет ссылки только на мое производственное свойство "prod.mydomain.com", а не на тестовое свойство "lab.mydomain.com ". Что еще мне нужно сделать, чтобы мои тестовые свойства были включены в мою сборку?

Источник

1 ответ

Решение

Обновить

Как мы можем использовать .env файлы?

Мы могли бы использовать что-то вроде env-cmd. Это поможет нам выполнять команды, используя предоставленный нами файл env. Мы можем установить его локально или глобально.

Итак, следующее остается как есть.

localhost:client davea$ cat .env.test 
REACT_APP_PROXY=http://lab.mydomain.com

davea$ cat .env.production 
REACT_APP_PROXY=http://prod.mydomain.com

Теперь команды сборки могут быть (при условии, что глобальный env-cmd)

"build:test": "env-cmd -f .env.test react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build",

Для местных env-cmd, вы могли бы сделать что-то вроде ./node-modules/.bin/env-cmd -f .env.test как указано в их файле README.

Оригинальный ответ

Из response -docs(как DCTID также указано в комментарии)

Вы не можете отменить NODE_ENV вручную.

Но поскольку нам нужны два разных значения переменной, мы можем использовать пользовательскую переменную вместо NODE_ENV? Согласно документации, он должен иметь префиксREACT_APP_. Допустим, мы решили использоватьREACT_APP_ENVIRONMENT.

Мы могли бы установить то же самое для команд сборки, например:

"build:test": "REACT_APP_ENVIRONMENT=test react-scripts build",
"build:prod": "REACT_APP_ENVIRONMENT=production react-scripts build",

и используйте его следующим образом:

// File: config.js
export const REACT_APP_PROXY = process.env.REACT_APP_ENVIRONMENT === 'production' ? 
  'prod.mydomain.com' : 'lab.mydomain.com';

Надеюсь, это поможет! Я использую это в своих приложениях, поэтому, если у вас есть еще вопросы, я буду рад помочь.

Источник
Другие вопросы по тегам