Блог

Я так сожалею об этом вопросе новичка, но он сводит меня с ума. Я купил пакет компонентов react и пришел с этой сложной конфигурацией webpack, и на самом деле он не позволяет мне компилироваться, пока я не разрешу некоторые строгие правила синтаксиса, такие как пробелы, запятые, одиночные кавычки и так далее…..

И это мой большой webpack.config.dev.js файл:

 module.exports = {

  mode: 'development',
  devtool: 'cheap-module-source-map',
  entry: [
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ],
  output: {
    pathinfo: true,
    filename: 'static/js/bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath).replace(/\/g, '/'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,
    },
    runtimeChunk: true,
  },
  resolve: {
    modules: ['node_modules'].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
      'react-native': 'react-native-web',
    },
    plugins: [
      PnpWebpackPlugin,
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],
  },
  resolveLoader: {
    plugins: [
      PnpWebpackPlugin.moduleLoader(module),
    ],
  },
  module: {
    strictExportPresence: true,
    rules: [
      { parser: { requireEnsure: false } },

      {
        test: /.(js|jsx)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: require.resolve('react-dev-utils/eslintFormatter'),
              eslintPath: require.resolve('eslint'),

            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: paths.appSrc,
      },
      {
        test: /.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
      {
        oneOf: [
          {
            test: [/.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
            loader: require.resolve('url-loader'),
            options: {
              limit: 10000,
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          {
            test: /.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              customize: require.resolve(
                'babel-preset-react-app/webpack-overrides'
              ),

              plugins: [
                [
                  require.resolve('babel-plugin-named-asset-import'),
                  {
                    loaderMap: {
                      svg: {
                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                      },
                    },
                  },
                ],
              ],
              cacheDirectory: true,
              cacheCompression: false,
            },
          },
          {
            test: /.js$/,
            exclude: /@babel(?:/|\{1,2})runtime/,
            loader: require.resolve('babel-loader'),
            options: {
              babelrc: false,
              configFile: false,
              compact: false,
              presets: [
                [
                  require.resolve('babel-preset-react-app/dependencies'),
                  { helpers: true },
                ],
              ],
              cacheDirectory: true,
              cacheCompression: false,

              sourceMaps: false,
            },
          },
          {
            test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
            }),
          },
          {
            test: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              getLocalIdent: getCSSModuleLocalIdent,
            }),
          },
          {
            test: sassRegex,
            exclude: sassModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
          },
          {
            test: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'sass-loader'
            ),
          },
          {
            exclude: [/.(js|jsx)$/, /.html$/, /.json$/],
            loader: require.resolve('file-loader'),
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
    }),
    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
    new ModuleNotFoundPlugin(paths.appPath),
    new webpack.DefinePlugin(env.stringified),
    new webpack.HotModuleReplacementPlugin(),
    new CaseSensitivePathsPlugin(),
    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
    new webpack.IgnorePlugin(/^./locale$/, /moment$/),
    new ManifestPlugin({
      fileName: 'asset-manifest.json',
      publicPath: publicPath,
    }),
  ],

  node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
  },
  performance: false,
};
  

Для начала я думаю, что проблема не в этом файле? Я хочу скомпилировать свой проект с нормальным синтаксисом и без строгих правил babel (некоторые из них бесполезны, например, запятая после последнего параметра объекта).

Пожалуйста, любая помощь будет оценена!

Во-первых, никогда не покупайте что-то бесплатное (если вы покупаете учебник, тогда другое дело, но покупка кода не поможет вам учиться, если вы не понимаете, на что смотрите). Существует множество бесплатных инструментов, настроек, руководств и руководств, которые удовлетворяют ваши потребности в разработке. Например, create-react-app является бесплатным, поддерживается с высокой степенью поддержки и является шаблоном, удобным для начинающих разработчиков.

В любом случае, вы видите ESlint ошибки. ESLint — отличный инструмент для стандартизации вашего кода. Это заставляет разработчиков писать код определенным образом для хорошей интеграции между проектами (предотвращает смешивание синтаксических правил и стилей). Поэтому я не рекомендую отключать его, и вместо этого вы должны соответствующим образом исправить свои ошибки.

Для устранения некоторых ваших ошибок:

запятая-болтаться

импорт / порядок

интервал между клавишами

вопросы и ответы

расстояние между стрелками

полу

предпочитаемый-шаблон

реагирование / деструктурирование-назначение

предпочесть-стрелка-обратный вызов

пробел перед функцией-paren

no-var

нет неиспользуемой переменной

стрелка-скобки

интервал между запятыми

react /jsx-first-prop-new-line

Все эти ошибки являются простыми ошибками, которые можно легко исправить.

Если вы хотите отключить проверки, вероятно, достаточно удалить следующий раздел:

 {
  test: /.(js|jsx)$/,
  enforce: 'pre',
  use: [
    {
      options: {
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),

      },
      loader: require.resolve('eslint-loader'),
    },
  ],
  include: paths.appSrc,
},
  

Тем не менее, рассмотрите возможность сохранения проверок в качестве предварительной фиксации или предварительного нажатия. Это значительно улучшит работоспособность вашей кодовой базы.

Если есть какие-то правила, которые вам действительно не нравятся, в .eslintrc.js каталоге вашего проекта будет файл или аналогичный файл, который вы можете использовать для настройки правил.