Как установить переменные среды в React с помощью собственного веб-пакета - PullRequest
Новая
       12

Как установить переменные среды в React с помощью собственного веб-пакета

0 голосов
/ 05 февраля 2020

Мое приложение React не запускается приложением create-реакции-приложением, но имеет пользовательскую конфигурацию Webpack.

Я установил dotenv / dotenv-expand /, а также dotenv-webpack.

У меня .env / .env.development файлов с переменной API_URL.

В моем файле url 

const { API_URL } = process.env

и использование этого API_URL для извлечения данных .

Но в этом файле, когда я console.log(process.env), он пуст.

Я также пытался обновить webpack.config.js файл с 

const Dotenv = require('dotenv-webpack');

и 

new Dotenv()

в массиве плагинов.

Но все равно не работает.

Я также пытался использовать имя переменной REACT_APP_API_URL, но это был тот же результат.

Может ли кто-нибудь помочь мне установить env vars?

Спасибо.

webpack.config. js

const webpack = require('webpack')
const Dotenv = require('dotenv-webpack');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')

const modeConfig = env => require(`./build-utils/webpack.${env}`)(env)
const presetConfig = require('./build-utils/loadPresets')

module.exports = ({ mode, presets } = { mode: 'production', presets: [] }) => {
  console.log('mode', mode, 'presets', presets)
  return webpackMerge(
    {
      mode,
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|svg)$/,
            use: {
              loader: 'file-loader',
              options: {
                name: 'assets/[name].[ext]',
              }
            },
          },
        ],
      },
      node: {
        fs: 'empty'
      },
      resolve: {
        extensions: ['.js', '.json'],
      },
      output: {
        filename: 'bundle.js',
        chunkFilename: '[name].lazy-chunk.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: mode === 'development' ? '/' : './'
      },
      devServer: {
        historyApiFallback: true
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './build-utils/template.html'
        }),
        new webpack.ProgressPlugin(),
        new Dotenv()
      ]
    },
    modeConfig(mode),
    presetConfig({ mode, presets })
  )
}

1 Ответ

0 голосов
/ 05 февраля 2020

Если вы пытаетесь получить доступ к значениям env в ваших JS файлах, вам, как правило, требуется плагин dotenv. 

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')

require('dotenv').config() // may need to set path to your .env file if it isn't at the root at the project

const modeConfig = env => require(`./build-utils/webpack.${env}`)(env)
const presetConfig = require('./build-utils/loadPresets')

module.exports = ({ mode, presets } = { mode: 'production', presets: [] }) => {
  return webpackMerge(
      ...
      plugins: [
        new HtmlWebpackPlugin({
          template: './build-utils/template.html'
        }),
        new webpack.ProgressPlugin(),
        new webpack.DefinePlugin({
           'process.env': {
               NODE_ENV: JSON.stringify(process.env.NODE_ENV),
               SOME_VALUE: JSON.stringify(process.env.SOME_VALUE),
               ...
            }
        })
      ]
    },
    ...
  )
}

ПРИМЕЧАНИЕ. С этой реализацией вы выиграли ' const { API_URL } = process.env не может выполнить, потому что DefinePlugin выполняет поиск и замену JavaScript, где он найдет все ссылки на process.env.API_URL и заменит его на любое значение. Следовательно, API_URL не будет существовать на porcess.env, поэтому для его использования достаточно сделать process.env.API_URL

Вы также можете использовать dotenv-webpack, я думаю, вы были близки к тому, чтобы заставить его работать. 

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')

const Dotenv = require('dotenv-webpack');

const modeConfig = env => require(`./build-utils/webpack.${env}`)(env)
const presetConfig = require('./build-utils/loadPresets')

module.exports = ({ mode, presets } = { mode: 'production', presets: [] }) => {
  return webpackMerge(
      ...
      plugins: [
        new HtmlWebpackPlugin({
          template: './build-utils/template.html'
        }),
        new webpack.ProgressPlugin(),
        new Dotenv({
           path: envPath
        })
      ]
    },
    ...
  )
}

Если вам нужна дополнительная помощь, поделитесь более подробной информацией, создав Минимальный воспроизводимый пример .

...