Блог

Главная - Вопросы по программированию - .env webpack передает значение переменной среды, но приложение не работает

.env webpack передает значение переменной среды, но приложение не работает

#javascript #webpack #api-key #dotenv

Вопрос:

файл .env в корневом каталоге проекта:

 ESRI_KEY=api_key_value

Для конфигурации webpack у меня есть:

 const webpack = require('webpack');

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


module.exports = {

//----//
  
  plugins: [

    new Dotenv(),
  ],
};

и код такой:

 console.log(process.env.ESRI_KEY);
const ESRI_KEY = process.env.ESRI_KEY;

const geocodeService = L.esri.Geocoding.geocodeService({
  apikey: `{ESRI_KEY}`,
});

Я пробовал разные комбинации прохождения, такие как

 apikey: `${ESRI_KEY}`
apikey: ESRI_KEY

и все они работают. Я действительно вижу значение ESRI_KEY в консоли, и я вижу его в папке dist, скрытой на видимом (зависит от синтаксиса передачи). В консоли нет ошибок, но по какой-то причине ничего не происходит, если я не передам прямое значение, например:

 const geocodeService = L.esri.Geocoding.geocodeService({
  apikey: 'api_key_value',
});

Там просто должно появиться всплывающее окно с адресом места при нажатии (и это работает, если передать прямое значение api_key_ или просто использовать другой файл js со значением и поместить его поверх моего основного js в HTML), но он не работает с .env, и я не могу понять, почему и как это исправить.

В python у меня была только одна подобная проблема с паролем базы данных. Независимо от остальных переменных среды Postgresql принимал только прямое значение пароля в моем main.py. Поэтому я пытаюсь понять, связана ли моя проблема с кодом/webpack/.env или с какими-то конкретными ключами.

Ответ №1:

/* root_project/webpack.config.js */

Поместите файл .env в корневую папку проекта

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


const DotEnvWebpack = new DotEnvWebpackPlugin({
    /**
     * systemvars: true
     * load all the predefined 'process.env' variables which will
     * trump anything local per dotenv specs. (useful for CI purposes)
     */
    systemvars: true,
    safe: true, // load '.env.example' to verify the '.env' variables are all set.
    path: path.join(__dirname, `.env`),
  });

а затем в массиве плагинов

 ...
plugins : [
...,
DotEnvWebpack,
]

а затем вы можете использовать переменные, определенные в файле .env, и все переменные process.env

 /* .env */

ESRI_KEY=api_key_value
 
 console.log(process.env.ESRI_KEY);
const ESRI_KEY = process.env.ESRI_KEY;
Метки: ,