Webpack - eslint 配置

Question

我使用了带有 typescript react、cssModules 和 eslint（更漂亮）的 babel loader。 我已经用 webpack 创建了 commonjs 库，但是当我启动使用这个库的示例项目时，我遇到了这样的错误。

我没有任何想法来解决这个问题。感谢您的宝贵时间。

我的网页包配置：

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  mode: 'production',
  entry: ['react-hot-loader', './index.tsx'],
  devtool: 'eval-source-map',
  output: {
    path: path.resolve('dist'),
    filename: 'index.js',
    library: {
      name: 'proba-react-library',
      type: 'commonjs'
    }
  },
  context: path.resolve(__dirname, 'src'),
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              babelrc: false,
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: { browsers: 'last 2 versions' },
                    modules: 'commonjs'
                  } // or whatever your project requires
                ],

                [
                  '@babel/typescript',
                  {
                    configFile: path.resolve(__dirname, 'tsconfig.json'),
                    isTSX: true,
                    allExtensions: true
                  }
                ],
                [
                  '@babel/preset-react',
                  {
                    flow: false,
                    typescript: true
                  }
                ]
              ],
              plugins: [
                // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
                ['@babel/plugin-proposal-decorators', { legacy: true }],
                ['@babel/plugin-proposal-class-properties'],
                'react-hot-loader/babel',
                '@babel/plugin-transform-runtime',
                '@babel/plugin-transform-typescript'
              ]
            }
          }
        ]
      },
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    },
    preferRelative: true,
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: path.resolve(__dirname, 'tsconfig.json')
      }
    }),
    new Dotenv({
      path: path.resolve(__dirname, '.env')
    })
  ]
};

我的 ESLINT CONFIG（在 webpack 根目录下的 .eslintrc 中）：

{
  "parser": "@babel/eslint-parser",
  "extends": [
    "standard",
    "standard-react",
    "plugin:prettier/recommended",
    "prettier/standard",
    "prettier/react",
    "plugin:@typescript-eslint/eslint-recommended"
  ],
  "env": {
    "node": true
  },
  "parserOptions": {
    "requireConfigFile": false,
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "legacyDecorators": true,
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "16"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "space-before-function-parent": 0,
    "react/prop-types": 0,
    "react/jsx-handler-names": 0,
    "no-unused-expressions": "off",
    "react/jsx-fragments": 0,
    "react/no-unused-prop-types": 0,
    "import/export": 0,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "no-console": "warn",
    "no-restricted-imports": [
      "error",
      {
        "patterns": [".*"]
      }
    ],
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"]
      }
    ]
  },
  "plugins": [
    "react-hooks",
    "jsx-a11y",
    "react",
    "prettier",
    "@typescript-eslint"
  ]
}

Answer 1

也许ignorePatterns 会帮助你。

您可以在配置文件中使用 ignorePatterns 告诉 ESLint 忽略特定文件和目录。 ignorePatterns 模式遵循与 .eslintignore 相同的规则。

// .eslintrc
{
  ...
  ...
  ignorePatterns: ['dist']
}