无法在 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 运行s 才能使现代构建成功（第一次遗留捆绑包失败，第二次遗留捆绑包成功但现代构建失败，第三次遗留和现代构建成功）。

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

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

Can't remove `console` statements with babel nor terser in vue cli 3 / 4, but second build run works

vue.js

babeljs

babel-loader

vue-cli-3

terser

问题：

是缓存吗？

现代建筑？

Vue 问题

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

Can't remove `console` statements with babel nor terser in vue cli 3 / 4, but second build run works

vue.js

babeljs

babel-loader

vue-cli-3

terser

问题：

是缓存吗？

现代建筑？

Vue 问题

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