React craco 解决 webpack < 5 utilizado para incluir polyfills para el núcleo de node.js...

• Al ejecutar Reactel proyecto, se informa un error:

  BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
  This is no longer the case. Verify if you need this module and configure a polyfill for it.
  
  If you want to include a polyfill, you need to:
          - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
          - install 'path-browserify'
  If you don't want to include a polyfill, you can use an empty module like this:
          resolve.fallback: {
        
         "path": false }
  
  webpack compiled with 26 errors
  

• La razón es que webpack5después de la optimización, se eliminó la introducción automática nodejsdel módulo principal , por lo que debe introducirse manualmente. Si el módulo principal polyfillse utiliza durante el proceso de empaquetado , se le pedirá que lo configure en consecuencia.nodejswebpack

• Sabrás cómo solucionarlo buscando en Internet o leyendo el informe de errores. El error lo ha dejado muy claro. Debes cerrarlo o instalarlo y usarlo. Por ejemplo, el informe de errores anterior:

• [No recomendado] Método 1: webpack.config.jsMétodo

  • Ejecute el archivo $ npm run ejectde configuración webpack, búsquelo config/webpack.config.js, busque la resolve:configuración y cierre la configuración:

    resolve: {
            
            
      fallback: {
            
            
        "path": false, // 上面报错说可以关闭这个，其他的可以注释看报错不报错，报错就继续追加关闭
        "assert": false,
        "stream": false,
        "constants": false,
        "util": false,
        "fs": false,
      },
      ...
    }
    

    Además de cerrar, también puedes optar por utilizar

    resolve: {
            
            
      fallback: {
            
            
        "path": require.resolve("path-browserify"), // 使用可能需要安装一下 npm i path-browserify，先重启看报错不报错，报错在安装
        ...
      },
      ...
    }
    

• [Recomendado] Método 2: craco.config.jsde esta manera, no es necesario liberar webpackla configuración

  • Adjunto: La instalación de @craco/craco puede entenderse como webpack.config.jsuna extensión externa de .

    const path = require('path')
    
    module.exports = {
            
            
      // webpack 配置
      webpack: {
            
            
        // 配置别名
        alias: {
            
            
          // 约定：使用 @ 表示 src 文件所在路径
          "@": path.resolve(__dirname, "src")
        },
        // 这种方式是无效的，错误写法
        // resolve: {
            
            
        //   fallback: {
            
            
        //     "path": false,
        //     "util": false,
        //     ...
        //   }
        // },
        // 这种方式才对的
        // configure: (webpackConfig, { env, paths }) => {
            
            
        //   // eslint-disable-next-line no-param-reassign
        //   webpackConfig.resolve.fallback = {
            
            
        //     "path": false,
        //     "util": false,
        //     "url": false,
        //     "http": false,
        //     "https": false,
        //     "stream": false,
        //     "assert": false,
        //     "querystring": false,
        //     "zlib": false
        //   }
        //   return webpackConfig
        // },
        // 也可以这么写
        configure: {
            
            
          resolve: {
            
            
            fallback: {
            
            
              "path": false,
              "util": false,
              "url": false,
              "http": false,
              "https": false,
              "stream": false,
              "assert": false,
              "querystring": false,
              "zlib": false
            }
          }
        }
      }
    }