如何让Gatsby在gatsby build时使用React开发构建版本

React通过检查NODE_ENV在生产构建和开发构建之间切换，但Gatsby会强制将其设为production，除非站点运行在开发服务器（gatsby start）上。我需要调试一些仅在生产构建时出现的hydration问题，这些问题在开发服务器构建时不会显现，但我找不到让Gatsby在执行gatsby build时使用React的development版本的方法。目前仅能启用分析模式，无法进行完整的开发构建。

补充说明：NODE_ENV=development gatsby build 无效，Gatsby会覆盖NODE_ENV的值。

核心问题 #

如何让Gatsby在执行gatsby build时使用React的开发构建版本？

方法1：通过Webpack配置强制替换为React开发版本 #

在项目根目录的gatsby-node.js文件（无则新建）中添加以下代码：

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  // 在生产构建的JavaScript编译阶段生效
  if (stage === 'build-javascript') {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          'react$': 'react/cjs/react.development.js',
          'react-dom$': 'react-dom/cjs/react-dom.development.js',
          'react-dom/server$': 'react-dom/cjs/react-dom-server-legacy-bundled.development.js'
        }
      }
    })
  }
}

这段配置会直接让Webpack解析React相关依赖为开发版本，不受Gatsby对NODE_ENV的覆盖影响。

方法2：自定义构建脚本配合环境变量 #

1. 在项目package.json中新增自定义构建命令：

{
  "scripts": {
    "build:dev": "GATSBY_ENV=development gatsby build"
  }
}

2. 编辑gatsby-node.js添加环境判断逻辑：

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  const isDevBuild = process.env.GATSBY_ENV === 'development'
  if (stage === 'build-javascript' && isDevBuild) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          'react$': 'react/cjs/react.development.js',
          'react-dom$': 'react-dom/cjs/react-dom.development.js',
          'react-dom/server$': 'react-dom/cjs/react-dom-server-legacy-bundled.development.js'
        }
      }
    })
  }
}

执行npm run build:dev即可触发带React开发版本的生产构建。

注意事项 #

• 开发版本React包含大量调试警告信息，体积远大于生产版本，仅用于调试hydration问题，切勿用于正式上线部署。
• 调试完成后请恢复配置，避免影响正式构建的性能和体积。

内容的提问来源于stack exchange，提问作者PBrown