WebStorm 调试器中的“ReferenceError: process is not defined”

Question

我的反应组件中有一个非常简单的函数，我正在尝试调试它：

function login(username, password) {
    const requestOptions = {
        method: 'GET',
        headers: {'Authorization': "Basic " + btoa(username + ":" + password)}
    };
    console.log("REACT_APP_API_ROOT: " + process.env.REACT_APP_API_ROOT)
    return fetch(process.env.REACT_APP_API_ROOT + '/user/current', requestOptions)
        .then(handleResponse)
        .then(usr => {
            if (usr) {
                let user = {};
                user.username = usr.principal.username;
                user.authdata = window.btoa(username + ':' + password);
                localStorage.setItem('user', JSON.stringify(user));
                return user;
            } else {
                return null;
            }
        });
}

我想process.env.REACT_APP_API_ROOT在调试器 (WebStorm, v. 2020.1) 中查看属性的当前值，但出现以下错误：

完整的错误文本：

ReferenceError: process is not defined
    at eval (eval at login (http://localhost:3000/static/js/main.chunk.js:2382:3), <anonymous>:1:1)
    at Object.login (http://localhost:3000/static/js/main.chunk.js:2382:3)
    at Login.handleSubmit (http://localhost:3000/static/js/main.chunk.js:2175:71)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:78334:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:78383:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:78437:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/0.chunk.js:78452:29)
    at executeDispatch (http://localhost:3000/static/js/0.chunk.js:78585:7)
    at executeDispatchesInOrder (http://localhost:3000/static/js/0.chunk.js:78610:9)
    at executeDispatchesAndRelease (http://localhost:3000/static/js/0.chunk.js:78715:9)
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/0.chunk.js:78724:14)
    at forEachAccumulated (http://localhost:3000/static/js/0.chunk.js:78696:12)
    at runEventsInBatch (http://localhost:3000/static/js/0.chunk.js:78741:7)
    at runExtractedPluginEventsInBatch (http://localhost:3000/static/js/0.chunk.js:78887:7)
    at handleTopLevel (http://localhost:3000/static/js/0.chunk.js:84142:9)
    at batchedEventUpdates (http://localhost:3000/static/js/0.chunk.js:80393:16)
    at dispatchEventForPluginEventSystem (http://localhost:3000/static/js/0.chunk.js:84242:9)
    at dispatchEvent (http://localhost:3000/static/js/0.chunk.js:84272:9)
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:121600:16)
    at runWithPriority$2 (http://localhost:3000/static/js/0.chunk.js:89805:14)
    at discreteUpdates$1 (http://localhost:3000/static/js/0.chunk.js:100906:16)
    at discreteUpdates (http://localhost:3000/static/js/0.chunk.js:80411:16)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/0.chunk.js:84225:7)

尽管如此，该值还是打印在控制台日志中：

REACT_APP_API_ROOT: http://localhost:8080

如何process.env.REACT_APP_API_ROOT在调试器中查看属性的值？

Answer 1

process仅在使用 Node.js 运行的控制台应用程序中定义，而 React 应用程序在浏览器中运行，因此process在运行时不可用。当您运行应用程序时，它对您有用，因为代码由Webpack DefinePlugin 预处理，用process.env字符串值替换所有出现的。

有关详细信息，请参阅create-react-app .env: process not defined