webpack react process.env 总是空的(Windows 10)

Posted

技术标签:

【中文标题】webpack react process.env 总是空的(Windows 10)【英文标题】:webpack react process.env always empty (windows 10) 【发布时间】:2017-05-06 00:55:40 【问题描述】:

我已经阅读了 stack overflow 上的所有文章以及来自 google 搜索的大约 200 篇文章,而且我终其一生都无法理解 process.env。无论我做什么,它总是一个空对象。

const path = require("path");
const webpack = require('webpack');

module.exports = 
    entry: 
        search: './src/search/search_index.js',
        // search: './src/search/search_index.js'
    ,
    output: 
        path: path.join(__dirname, "../website/public/javascript/react"),
        publicPath: '/',
        filename: "[name].bundle.js"
    ,
    module: 
        loaders: [
            exclude: /node_modules/,
            loader: 'babel',
            query: 
            presets: ['react', 'es2015', 'stage-1']
        
    ]
    ,
    resolve: 
        extensions: ['', '.js', '.jsx']
    ,
    devServer: 
        historyApiFallback: true,
        contentBase: './'
    ,
    plugins: [
        new webpack.DefinePlugin(
            "process.env" : 
                'NODE_ENV': '"production"'
            
        )
    ]
;

"scripts": 
    "start": "webpack-dev-server --inline --hot --content-base src/search",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"

console.log(process.env); // 来自以"npm start" 开头的正在运行的应用程序中的渲染方法

总是返回

我正在尝试在我的构建中将 NODE_ENV 设置为生产并且运气为零 %NODE_ENV% show production 但无论我在控制台中收到警告消息,关于它在较慢的构建上运行以使用 NODE_ENV 生产。

为了尝试放松正在发生的事情,我只是想看看我的应用在 process.env 中得到了什么,它是一个空对象。因此,我尝试使用 defineplugin 对其进行硬编码,以再次测试发生了什么,结果相同。

我已经为此苦恼了大约 3 个小时。任何帮助表示赞赏。

【问题讨论】:

【参考方案1】:

您使用的DefinePlugin 配置将代码中出现的process.env.NODE_ENV 表达式替换为您配置的任何值 - 它不会触及对process.env 的引用,因为您没有告诉它做任何事情那个确切的表达式 - 您正在使用的配置只是替换共享一个公共根的多个表达式的简写。

Webpack 检测到您正在引用全局 process 变量,并从 node-libs-browser 注入 process mock,如您所见,它定义了一个空的 env 对象。

您可以使用node Webpack config 来控制它。将node: process: false 添加到您的配置中将禁用为process 注入模拟。

【讨论】:

我尝试使用从配置文件中删除的插件,结果相同。 它检测到您正在引用 process 全局并注入模拟对象 - 默认情况下启用。 当我将 process 设置为 false 时,我得到了这个 error process is not defined 您答案中的节点 Webpack Config 链接似乎已失效。 节点Webpack Config链接现在是webpack.js.org/configuration/node/#node

以上是关于webpack react process.env 总是空的(Windows 10)的主要内容,如果未能解决你的问题,请参考以下文章

理解webpack中的process.env.NODE_ENV

process.env 在 webpack 之前未定义

理解webpack之process.env.NODE_ENV详解(十八)

webpack process.env.NODE_ENV 未定义

webpack 警告 - DefinePlugin 中的警告 'process.env.NODE_ENV' 的冲突值

通过 webpack 将 process.env.NODE_ENV 变量导入 scss