Webpack进程/浏览器在prod vs dev为盖茨比

Question

我一直在使用Gatsby的repo，我注意到在某些情况下，如果不是所有的时候，当我调用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，也不太熟悉盖茨比是如何与它交互的。我想它就像一个条件一样简单，应用是在开发还是在生产。

Answer 1

在添加自定义webpack配置文档中可以看到，stage值可以通过以下方式发生变化:

• develop:运行gatsby develop命令时。有热加载和CSS注入到页面的配置

• develop- HTML:与develop相同，但在babel配置中没有react- hre，用于呈现HTML组件。

• build- JavaScript:生产JavaScript和CSS构建。创建路由JavaScript包以及JavaScript和CSS的公共块。

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

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

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