无法在 vue cli 3 / 4 中使用 babel 或 terser 删除“console”语句，但第二次构建运行有效

Question

我遇到了npm run build 的问题，它实际上调用了vue-cli-service build。我的目标是删除生产版本中的console 语句。然而，第一次失败了。如果我立即再次运行它（无需更改代码），它就会成功。

为了重现性和隔离性，我在节点 docker 中运行代码：

docker run --rm -it -v "$(pwd):/usr/src/app" node:14.4.0 /bin/bash

在 docker 我设置环境

npm ci

在干净的环境中，运行构建失败：

root@bd366b5873ca:/usr/src/app# npm run build

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build

PRODUCTION babel setup
production eslint setup.

⠦  Building for production...production eslint setup.
⠇  Building for production...PRODUCTION babel setup
⠼  Building for production...production eslint setup.
⠙  Building for production...

 ERROR  Failed to compile with 8 errors    

错误都是eslint出现console.命令时出现的错误：

Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at XXXX

立即再次运行构建，构建成功：

root@bd366b5873ca:/usr/src/app# npm run build

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build

PRODUCTION babel setup
production eslint setup.

⠏  Building for production...

 WARNING  Compiled with 2 warnings    

PRODUCTION babel setup 和 production eslint setup 源自我的 babel.config.js 和 .eslint.rc。

我已将 eslint 配置如下，以在生产中的 console. 语句上失败：

# .eslintrc.js
if (process.env.NODE_ENV === 'production') {
  console.info('production eslint setup.')
}
module.exports = {
  root: true,

  env: {
    node: true
  },

  'plugins': ['jest'],

  'extends': [
    'eslint:recommended',
    'plugin:vue/recommended',
    '@vue/standard',
    'plugin:jest/recommended',
    'plugin:jest/style'
  ],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },

  parserOptions: {
    parser: 'babel-eslint',
    parserOptions: {
      babelOptions: {
        configFile: "babel.config.js"
      }
    }
  }

}

我已将 babel 配置为删除 console. 语句：

# babel.config.js
/* eslint-disable no-var */
module.exports = (api) => {
  var isProd = api.cache.invalidate(() => process.env.NODE_ENV === 'production')
  var plugins = []
  if (isProd) {
    console.info('PRODUCTION babel setup')
    plugins.push(['transform-remove-console', { exclude: [] }])
  }
  return {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins
  }
}

为了修复它，我还配置了 terser 以删除 console. 语句：

# vue.config.js
module.exports = {
  'transpileDependencies': [
    'vuetify'
  ],
  publicPath: process.env.PUBLIC_SUB_PATH === ''
    ? '/' : '/' + process.env.PUBLIC_SUB_PATH + '/',
  runtimeCompiler: true,
  css: {
    extract: { ignoreOrder: true }
  },
  chainWebpack: config => {
    config.optimization.minimize = true
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }
}

版本（来自package.json）。为了修复它，升级到 vue-cli 4，也发生在 vue-cli 3 中：

....
"dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.3.4",
    "vuetify": "^2.3.1",
    "vuex": "^3.4.0"
  },
....
"devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@vue/cli-service": "^4.4.4",
    "babel-eslint": "^10.1.0"
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^5.16.0",
    ...
}

问题：

PRODUCTION babel setup 和production eslint setup 的控制台打印显示在干净的构建中，配置被加载了多次。然后它以某种方式失败。再次运行它似乎更简单，配置加载一次然后成功。

如何配置 vue 第一次构建成功，去掉控制台语句？

---

是缓存吗？

构建成功后，移除缓存：

rm -Rf ./node_modules/.cache

然后再次构建它（npm run build）等于第一次运行：失败

---

现代构建？

创建modern 构建时（在npm run build 填充缓存之后）：

 npm run build -- --modern

成功构建传统构建，但失败现代构建：

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build "--modern"

PRODUCTION babel setup
production eslint setup.

⠏  Building legacy bundle for production...

 WARNING  Compiled with 2 warnings          

....
PRODUCTION babel setup
production eslint setup.

⠹  Building modern bundle for production...PRODUCTION babel setup
⠧  Building modern bundle for production...PRODUCTION babel setup
⠋  Building modern bundle for production...PRODUCTION babel setup
⠏  Building modern bundle for production...PRODUCTION babel setup
PRODUCTION babel setup
⠹  Building modern bundle for production...PRODUCTION babel setup
⠧  Building modern bundle for production...PRODUCTION babel setup
⠦  Building modern bundle for production...

 ERROR  Failed to compile with 3 errors 

Module Error (from ./node_modules/thread-loader/dist/cjs.js):

/usr/src/app/src/axios.js
   7:3  error  Unexpected console statement  no-console

成功后立即再次运行现代构建。因此，我总共需要运行 3 次才能使现代构建成功（第一次遗留包失败，第二次遗留包成功但现代构建失败，第三次遗留和现代构建成功）。

Vue 问题

https://github.com/vuejs/vue-cli/issues/5399有一个相关的vue问题

Answer 1

我遇到了同样的错误，我通过在vue.config.js 中添加lintOnSave: process.env.NODE_ENV === 'development' 来修复它。以下是帮助您解决问题的清单：

• npx vue-cli-service inspect --mode production >> webpack.config.production.js 在生产环境中生成 webpack 配置文件
• 然后你可以看到lint在terser之前。第一次yarn build失败，下一次成功
• 所以在这种情况下，您可以在生产环境中关闭lintOnSave

关于lintOnsave