gulp构建时require('react')与require('React')兼容问题如何解决

该问题核心是gulp构建流程的模块解析规则开启了大小写严格匹配，当前项目中react包的注册标识为大写React，导致小写react的引入无法命中对应模块。

通用配置方案（适配所有gulp构建场景） #

通过配置模块别名，直接将小写react的引入指向实际的react模块，无需修改第三方依赖代码：

• 若使用browserify作为gulp的模块化打包工具：
  首先安装aliasify转换插件，再修改gulpfile.js中的browserify配置：

  const browserify = require('browserify');
  const aliasify = require('aliasify');
  
  gulp.task('bundle', function() {
    return browserify('./src/entry.js')
      .transform(aliasify, {
        aliases: {
          // 小写react直接映射到大写React模块
          "react": "React"
        }
      })
      .bundle()
      .pipe(gulp.dest('./dist'));
  });
  

• 若使用webpack-stream作为gulp的模块化打包工具：
  直接在内嵌的webpack配置中添加resolve.alias规则即可：

  const webpack = require('webpack-stream');
  
  gulp.task('build:js', function() {
    return gulp.src('./src/**/*.js')
      .pipe(webpack({
        resolve: {
          alias: {
            // 直接映射到react包的实际入口文件，完全规避大小写匹配问题
            "react": require.resolve('react')
          },
          // 额外关闭大小写严格校验，兜底兼容其他大小写不一致的模块引入
          caseSensitive: false
        }
      }))
      .pipe(gulp.dest('./dist'));
  });
  

临时兜底方案 #

如果上述配置不生效，可以在项目入口文件最顶部新增一行全局模块注册逻辑，手动将小写react挂载到模块缓存中：

require.cache[require.resolve('react')] = require.cache[require.resolve('React')];

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