如何防止Webpack在ESLint错误时构建失败？

Question

我使用默认的 vue-cli 命令创建了一个 Vue 项目。

当 webpack 构建时，它会失败，如下图所示：

我会尽力为您翻译。这段文字的含义是：我没有使用任何特殊的webpack配置。我做错了什么？我的package.json文件如下：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "firebase": "^7.6.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

- johannesdz

Answer 1

您可以通过webpack配置强制ESLint始终发出警告而不是错误。这将像您期望的那样不会停止构建。您需要在webpack.config.js文件中将emitWarning选项设置为true。

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          emitWarning: true
        }
      }
    ]
  }
};

你可以在文档中阅读更多内容：https://github.com/webpack-contrib/eslint-loader#errors-and-warning

- ilnicki010

---

你尝试过在你的 .eslintrc.js 文件中添加 "rules": { "no-console": "off" } 吗？ - ilnicki010

关闭no-console可能会起作用，但我不想在我的代码库中这样做。有时我需要它来进行本地调试，但是编译会失败，就像描述的那样。 - johannesdz

好的，我认为在新的eslint/webpack工具中，默认行为是如此。所以这是我的解决方法：'no-console': process.env.NODE_ENV === 'production' ? 2 : 1。无论如何感谢您！ - johannesdz

这在一开始是有效的，但是当我进行单个代码更改并进行热重载后就会失败。 - jameslol

eslint-loader已经被弃用，请参见https://www.npmjs.com/package/eslint-loader。 - Seong Jin Kim

Answer 2

NoEmitOnErrorsPlugin现在在webpack 4中自动启用，当模式未设置或设置为production时。因此，即使是ESLint警告也会导致构建失败。无论对于eslint-loader使用了什么错误设置，除非启用了emitWarning。

https://webpack.js.org/loaders/eslint-loader/#noemitonerrorsplugin

- noreply

Answer 3

我猜测使用新的eslint/webpack工具，这是默认行为。

所以这是我在我的.lintrc.js文件中的解决方法：

'no-console': process.env.NODE_ENV === 'production' ? 2 : 1

- johannesdz