如何防止 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"
  ]
}

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 中閱讀更多內容

Answer 2

我猜對於新的 eslint/webpack 東西，這是默認行為。

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

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

Answer 3

當模式未設置或設置為生產時，NoEmitOnErrorsPlugin 現在在 webpack 4 中自動啟用。 所以即使是 ESLint 警告也會使構建失敗。 無論 eslint-loader 使用什么錯誤設置，除非啟用了emitWarning。

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