Webpack: process.env не определен с использованием DefinePlugin и DotEnv - PullRequest
Новая
       13

Webpack: process.env не определен с использованием DefinePlugin и DotEnv

1 голос
/ 15 марта 2019

Я хотел бы получить свою переменную из моего файла .env, но я всегда получаю undefined

Это мой код js: 

require('dotenv').config();
class Header extends React.Component{
    constructor(props){...}
    render(){
        console.log("NODE ENV", process.env.NODE_ENV);
        console.log("REACT_APP_MYAPP", process.env.REACT_APP_MYAPP);
        ...
   }
}

Это печатает:

NODE_ENV development

REACT_APP_MYAPP undefined

В моем package.json есть: 

"scripts":{
      "start" : "webpack-dev-server --config webpack.dev.js",
      "build" : "webpack --config webpack.prod.js"
 }

И в моем webpack.dev.js: 

const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const common = require("./webpack.common.js");

module.exports = merge.smart(common, {
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
        overlay: {
            warnings: true,
            errors: true
        },
        inline :true,
        historyApiFallback: true,
        port: 8085
    },
    devtool: "inline-sourcemap",
    optimization: {
        namedModules: true
    },
    plugins: [
        new webpack.HotModulReplacementPlugin(),
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("development"),
            "process.env.REACT_APP_MYAPP": JSON.stringify(process.env.REACT_APP_MYAPP)
        })
    ],
    mode: "development"
});

И я поместил свой файл .env в корень моего проекта, рядом с webpack.dev.js и package.json:

REACT_APP_MYAPP = http://localhost:8080/

Поэтому я думаю, что получить переменную в файле не удастся.

Как мне получить значение REACT_APP_MYAPP в коде, пожалуйста

Ответы [ 2 ]

1 голос
/ 15 марта 2019

Первое решение с добавлением REACT_APP_MYAPP при запуске не сработало. Но второе решение сработало.

РЕШЕНИЕ:

Добавление require('dotenv').config() файла внутри моего webpack.dev.js и замена: 

   new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("development"),
        "process.env.REACT_APP_MYAPP": JSON.stringify(process.env.REACT_APP_MYAPP)
    })

с 

    new webpack.EnvironmentPlugin(['NODE_ENV', 'REACT_APP_MYAPP']);

Спасибо!

1 голос
/ 15 марта 2019

Есть несколько способов сделать эту работу.

Самый простой способ проверить - это изменить "start" : "webpack-dev-server --config webpack.dev.js", на "start" : "REACT_APP_MYAPP=http://localhost:8080/ node webpack-dev-server --config webpack.dev.js",

. При этом будет введена переменная окружения, и это будетдоступно в процессе сборки веб-пакета.Вы можете использовать эту технику всякий раз, когда используете npm или node для запуска команды.Например, NODE_ENV='development REACT_MY_APP=http://localhost:8080/ node myapp.js и оба будут доступны на process.env.

Вы также можете вызвать свой файл require('dotenv').config() внутри своего webpack.dev.js.Тогда он будет установлен во время использования DefinePlugin.

Как правило, вы не используете команду npm start для запуска сервера разработки.

По мере роста приложения вы должны взглянуть на Плагин Webpack Environment .Затем вы можете использовать .env для параметров «производственной» сборки, что требуется в производственном webpack.prod.js, при настройке переменных среды по умолчанию / резервных с помощью плагина.

...