忽略或预防ESLint错误在React webpack项目中破坏构建

Question

问题在于，我在开发过程中，每次遇到 ESLint 的问题，构建就会中断，并且不能编译代码。

我设置了 emitWarning: true，但没有效果。 我的 React 项目是使用 webpack、neutrino JS、esLint 和 airbnb 进行开发的。

在运行构建时，错误信息看起来像：

ERROR in ./src/index.jsx Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): Module failed because of a eslint error.

.neutrinorc.js 文件中的代码结构

const path = require("path");
const airbnb = require("@neutrinojs/airbnb");
const react = require("@neutrinojs/react");

module.exports = {
  options: {
    root: __dirname,
  },
  use: [
    (neutrino) => {
      neutrino.config.resolve.modules
        .add("node_modules")
        .add(path.resolve(__dirname, "src"));

      neutrino.config.resolve.extensions.add(".jsx");

      neutrino.config.resolve.alias.set("react-dom", "@hot-loader/react-dom");
    },
    airbnb({
      eslint: {
        emitWarning: true,
        baseConfig: {
          settings: {
            "import/resolver": "webpack",
          },
          rules: {
            radix: "off",
            "comma-dangle": "off",
            "react/no-danger": "off",
            "react/button-has-type": "off",
            "react/no-find-dom-node": "off",
            "react/jsx-filename-extension": "off",
            "no-console": [
              "error",
              {
                allow: ["warn", "error"],
              },
            ],
            "no-alert": "off",
            "no-plusplus": "off",
            "no-else-return": "off",
            "no-nested-ternary": "off",
            "no-underscore-dangle": "off",
            "no-restricted-syntax": "off",
            "max-len": 0,
            "quote-props": "off",
            "default-case": "off",
            "class-methods-use-this": "off",
            "import/prefer-default-export": "off",
            "react/no-array-index-key": "off",
            "jsx-a11y/click-events-have-key-events": "off",
            "jsx-a11y/label-has-for": [
              "error",
              {
                required: {
                  some: ["nesting", "id"],
                },
              },
            ],
          },
        },
      },
    }),

- Nishit Raval

Answer 1

您需要将failOnWarning的值添加为false

emitWarning: true,
failOnWarning: false,

- Leandro William

---

无法工作，仍然显示 => 模块构建失败（来自./node_modules/eslint-loader/dist/cjs.js）：由于ESLint错误而导致模块失败。 - Nishit Raval

在运行 npm run build 时 - Nishit Raval

放在哪里？请详细说明。 - testing_22

在你的 eslint 文件中 - Leandro William

Answer 2

我不得不结合几个解决方案来解决这个问题。虽然不是最优雅的方法，但它能够解决问题。

将RUN_ESLINT=true添加到package.json的watch脚本中：

export RUN_ESLINT=true && webpack --config webpack.config.js --watch --mode development

将 module.exports 改写成一个函数：

module.exports = () => {
...
return {}
}

使用 webpack.EnvironmentPlugin 导入环境变量。

new webpack.EnvironmentPlugin(["NODE_ENV", "DEBUG", "RUN_ESLINT"]);

有条件地添加ESLint插件：

const plugins = [...];

if (process.env.RUN_ESLINT) {
  plugins.push(new ESLintPlugin());
}
  

这使我能够像以前添加 eslint 之前一样继续使用我的 npm run build 和 npm run watch 脚本。

- bksam