无法在 vue cli 3 / 4 中删除带有 babel 或 terser 的"控制台"语句，但第二次构建运行有效

Question

我在使用npm run build时遇到了问题，它有效地调用了vue-cli-service build。我的目标是删除生产版本中的console语句。但是，第一次失败了。如果我立即再次运行它(不更改代码(，它就会成功。

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

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

在码头工人中，我设置了环境

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