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

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

How to prevent webpack to fail build on eslint error?

javascript

eslint

webpack

vue-cli