V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
angkee
V2EX  ›  酷工作

寻找一位 ReactJs 大神,有偿解决技术难题,有机会可以长期合作,价格你来定

  •  
  •   angkee · 2022-11-10 22:21:05 +08:00 · 1569 次点击
    这是一个创建于 504 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前我有发帖子提过,我是一位远程工程师,主要做后端 PHP 开发,目前公司新开发了一个项目。

    前端技术栈使用的是 ReactJs ,NextJS 框架,初次上手使用这个框架,都是现学现卖,Webpack 打包上总是很慢,还有配置错误。

    warn  - Invalid next.config.js options detected:
      - The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
      - The root value has an unexpected property, configOrigin, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
      - The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
      - The root value has an unexpected property, webpack5, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
      - The value at .amp.canonicalBase must be 1 character or more but it was 0 characters.
      - The value at .experimental.outputFileTracingRoot must be 1 character or more but it was 0 characters.
    

    这是我的 next config 文件

    const path = require('path')
    const fs = require('fs')
    // const withCss = require('@zeit/next-css')
    // const withSass = require('@zeit/next-sass')
    const withPlugins = require('next-compose-plugins') //结合 sass css
    const withAntd = require('./next-antd.config')
    const lessToJS = require('less-vars-to-js')
    const childProcess = require('child_process')
    const nextTranslate = require('next-translate')
    const { withSentryConfig } = require("@sentry/nextjs")
    
    // const FilterWarningsPlugin = require('webpack-filter-warnings-plugin')
    const qs = require('url')
    const withLess = require('next-with-less')
    
    const withBundleAnalyzer = require('@next/bundle-analyzer')({
      enabled: process.env.ANALYZE === 'true',
    })
    // 当前配置是翻译的时候如果切换其他语言,默认给项目加前缀
    const localeSubpaths = {
      'zh-cn': 'zh-cn',
    }
    const withTM = require('next-transpile-modules')(['antd-mobile'])
    
    // Where your antd-custom.less file lives
    const themeVariables = lessToJS(
      fs.readFileSync(path.resolve(__dirname, './src/css/antd-custom.less'), 'utf8')
    )
    
    function RemoveMinimizeOptionFromCssLoaders(config) {
      config.module.rules.forEach((rule) => {
        if (Array.isArray(rule.use)) {
          rule.use.forEach((u) => {
            if (u.loader === 'css-loader' && u.options) {
              delete u.options.minimize
            }
          })
        }
      })
    }
    
    
    
    const isProd = process.env.NODE_ENV === 'production'
    
    // Sentry
    const sentryWebpackPluginOptions = {
      silent: true, // Suppresses all logs
      // For all available options, see:
      // https://github.com/getsentry/sentry-webpack-plugin#options.
    }
    
    const nextConfig = nextTranslate(
      withTM({
        sentry: {
          hideSourceMaps: true,
          autoInstrumentServerFunctions: true,
        },
        i18n: {
          localeDetection: false,
        },
        images: {
          domains: [
            qs.parse(process.env.NEXT_PUBLIC_AVATAR_SERVER_HOST).hostname,
            qs.parse(process.env.NEXT_PUBLIC_IMAGE_SERVER_HOST).hostname,
            'cdn.mmogah.com',
            'cdn.mmogah.club',
            's3.amazonaws.com'
          ],
          formats: ['image/avif', 'image/webp'],
          minimumCacheTTL: 60,
          deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
        },
        rewrites: async () => [
          {
            source: '/api/:path*',
            destination: `${process.env.NEXT_PUBLIC_BASE_API}/:path*`,
          },
        ],
        publicRuntimeConfig: {
          localeSubpaths,
        },
        assetPrefix: '/',
        // experimental: {
        //     basePath: isProd ? '' : '/api',
        // },
        sassOptions: {
          includePaths: [path.join(__dirname, 'src/css')], // SCSS searches for file paths
          prependData: `@import "variables/default-template.scss";`, // include global scss variable
        },
        webpack: (config) => {
    
          // RemoveMinimizeOptionFromCssLoaders(config)
    
          if (isProd) {
            // 生成提交日志
            // %H 提交对象( commit )的完整哈希字串  %ad 作者修订日期(可以用 --date= 选项定制格式)
            isProd &&
              childProcess.exec(
                'git log --pretty="%H - %ad" --date=iso-local --since="2020-01-01"',
                function (error, stdout) {
                  if (!error) {
                    const DIST_PATH = path.resolve(__dirname, './.next')
                    fs.appendFileSync(`${DIST_PATH}/web-commit.log`, '', 'utf-8')
                    fs.writeFileSync(`${DIST_PATH}/web-commit.log`, stdout, 'utf-8')
                  }
                }
              )
          }
          return config
        },
      })
    )
    
    /**
     * @type {import('next').NextConfig}
     */
    module.exports = withPlugins(
      [
        [withBundleAnalyzer],
        [
          withLess,
          {
            lessLoaderOptions: {
              lessOptions: {
                javascriptEnabled: true,
                modifyVars: themeVariables, // make your antd custom effective
                localIdentName: '[path]___[local]___[hash:base64:5]',
              },
            },
          },
        ],
      ],
      withSentryConfig(nextConfig, sentryWebpackPluginOptions)
    )
    

    如有 React 大神可以指定一二,有偿回答,价格你来定

    另外公司需要长期合作的 ReactJs 工程师,要求三年经验起步

    我这个 PHP 后端多少搞不定前端开发……

    微信:QW5na2VlMDAx

    6 条回复    2022-12-12 15:27:50 +08:00
    yacolinqi
        1
    yacolinqi  
       2022-11-10 23:40:59 +08:00
    你这 warn webpackDevMiddleware 、configOrigin 、target 是由于你配置 api 代理导致的。next 的本地开发代理你可能还需要用 express 那一套来弄。

    本人建议,如果不是公司强烈要求,可以换到自己之前成熟的 React 项目经验上,Nextjs 的配置什么的可以看他官方网站的文档来弄。
    angkee
        2
    angkee  
    OP
       2022-11-11 09:41:15 +08:00
    @yacolinqi 之前公司也没开发过 React 项目……
    yacolinqi
        3
    yacolinqi  
       2022-11-11 09:42:54 +08:00
    @angkee 那你选择了一个 React 深层次的东西,来开始你的 React 初体验 加油💪🏻
    looppppp
        4
    looppppp  
       2022-11-11 14:43:26 +08:00
    create-react-app 直接搭建不可以吗
    liu66666
        5
    liu66666  
       2022-11-22 20:53:49 +08:00
    这个不是 react 的问题,应该是 next 配置问题呀,GitHub 也有类似问题: https://github.com/vercel/next.js/issues/39161 ,你可以参考一下,我看上面也有解决方案。
    horizon
        6
    horizon  
       2022-12-12 15:27:50 +08:00
    next 版本使用 12.0.7 ?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3160 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 10:55 · PVG 18:55 · LAX 03:55 · JFK 06:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.