如何防止 webpack 在 eslint 错误上构建失败？

Posted 2023-02-23

【中文标题】如何防止 webpack 在 eslint 错误上构建失败？

【英文标题】：How to prevent webpack to fail build on eslint error?

【发布时间】：2020-04-28 05:11:26

【问题描述】：

我使用默认的 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"
  ]

【参考方案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中阅读更多内容

【讨论】：

您是否尝试将“rules”：“no-console”：“off”，添加到您的 .eslintrc.js 文件中？

很抱歉格式不好，我写不好。关闭无控制台会起作用，但我不希望在我的代码库中这样做。有时我需要它在本地进行调试，但随后构建失败，如上所述。

好的，我认为使用新的 eslint/webpack 东西，这是默认行为。所以这是我的解决方法：'no-console': process.env.NODE_ENV === 'production' ? 2 : 1。还是谢谢！

这首先有效，但在我进行单个代码更改时热重载后失败

【参考方案2】：

我猜对于新的 eslint/webpack 东西，这是默认行为。

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

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

【参考方案3】：

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

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