Webpack process/browser 在 Gatsby 的生产与开发中

Question

我一直在使用 Gatsby 存储库，我注意到在某些情况下，如果不是所有时间，当我调用 window 时，我的部署将失败并出现以下错误

4:57:03 AM: failed Building static HTML for pages - 1.305s
4:57:03 AM: error "window" is not available during server side rendering.
4:57:03 AM: 
4:57:03 AM:   21 | }
4:57:03 AM:   22 | else {
4:57:03 AM: > 23 |     _btoa = btoa.bind(window);
4:57:03 AM:      | ^
4:57:03 AM:   24 |     helpers = function (url) {
4:57:03 AM:   25 |         return new URL(url);
4:57:03 AM:   26 |     };
4:57:03 AM: 
4:57:03 AM:   WebpackError: ReferenceError: window is not defined
4:57:03 AM:   
4:57:03 AM:   - helpers.js:23 
4:57:03 AM:     [gatsby-starter-default]/[web3-providers-ws]/lib/helpers.js:23:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:24 
4:57:03 AM:     [gatsby-starter-default]/[web3-providers-ws]/lib/index.js:24:15
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:44 
4:57:03 AM:     [gatsby-starter-default]/[web3-core-requestmanager]/lib/index.js:44:24
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:22 
4:57:03 AM:     [gatsby-starter-default]/[web3-core]/lib/index.js:22:24
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:29 
4:57:03 AM:     [gatsby-starter-default]/[web3]/lib/index.js:29:12
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1

这似乎可以通过删除我的 gatsby-node.js 文件中的底部 process/browser 来纠正，该文件目前看起来像这样

const webpack = require("webpack");

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if(stage === "build-htmnl") {
        actions.setWebpackConfig({
            plugins: [
                new webpack.ProvidePlugin({
                    process: 'process/browser',
                }),
            ],
        })
    }
    actions.setWebpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                Buffer: [require.resolve("buffer/"), "Buffer"],
                process: 'process/browser',
            }),
        ],
        resolve: {
            fallback: {
                "crypto": false,
                "stream": require.resolve("stream-browserify"),
                "assert": false,
                "util": false,
                "http": false,
                "https": false,
                "os": false
            },
        },
    })
}

但是一旦我这样做，它似乎会破坏开发，因为我的 useEffect 没有正确执行，也没有我作为 onClick 事件附加到按钮的功能。我得到的错误如下：Uncaught (in promise) ReferenceError: process is not defined

有什么方法可以更轻松地解决这个问题？我不太熟悉 webpack，更不知道 Gatsby 如何与它交互。我想它就像应用程序是开发还是生产的条件一样简单。

Answer 1

如您在 Adding a Custom webpack Config docs 中所见，stage 值可以通过以下方式发生变异：

develop: when running the gatsby develop command. Has configuration for hot reloading and CSS injection into page

develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component.

build-javascript: production JavaScript and CSS build. Creates route JavaScript bundles as well as common chunks for JavaScript and CSS.

build-html: production build static HTML pages

所以，是的，正如您所指出的，添加一个简单的条件应该可以将 process/browse 设置为：

if(stage === "develop"){
  // gatsby develop stuff
}

Webpack process/browser 在 Gatsby 的生产与开发中

Webpack process/browser in prod vs dev for Gatsby

javascript

node.js

reactjs

webpack

gatsby