Gatsby 的产品与开发中的 Webpack 进程/浏览器

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 文件中的底部进程/浏览器来纠正，目前看起来像这样

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：运行gatsby develop 命令时。具有热重载和 CSS 注入页面的配置

• develop-html：与develop相同，但在babel配置中没有react-hmre用于渲染HTML组件。

• build-javascript：生产 JavaScript 和 CSS 构建。创建路由 JavaScript 包以及 JavaScript 和 CSS 的通用块。

• build-html：生产构建静态 HTML 页面

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

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