如何從 react 訪問 env 變量/如何注入 env 變量以進行反應

Question

我嘗試將它添加到我的 webpack 配置的插件部分，但這會使構建無法使用。 我沒有使用 cra。

new webpack.DefinePlugin({
    'process.env': dotenv.parsed,
})

將此更改為

new webpack.DefinePlugin({
    'APP_URL': dotenv.APP_URL,
})

沒有幫助-> APP_URL在應用程序中未定義:(

我沒有找到另一種注入變量的語法。

Answer 1

看起來DefinePlugin只是替換了文本，並沒有引入全局變量。

所以它需要在值周圍加上引號，以便替換產生正確的 JS 語法：

'APP_URL': `"${dotenv.APP_URL}"`,

這是我的webpack.config.js ：

const webpack = require('webpack');

const dotenv = { APP_URL: 'http://localhost/app' };

module.exports = [
    {
        entry: './src/test.js',
        mode: 'production',
        plugins: [
            new webpack.DefinePlugin({
                'APP_URL': `"${dotenv.APP_URL}"`,
            })
        ]
    }
]

不要忘記在值周圍加上引號或使用JSON.stringify

這是./src/test.js文件：

const url = APP_URL;
console.log(url);

開發構建輸出帶有完整代碼和替換的 eval 語句：

/***/ "./src/test.js":
/*!*********************!*\
  !*** ./src/test.js ***!
  \*********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("const url = \"http://localhost/app\";\nconsole.log(url);\n\n//# sourceURL=webpack:///./src/test.js?");

/***/ })

/******/ });

雖然生產構建只保留結果console.log調用：

[function(e,t){console.log("http://localhost/app")}]