Babel 插件 transform-remove-console 不适用于 Vue CLI 4 @vue/cli-plugin-babel/preset？

Posted 2023-02-23

【中文标题】Babel 插件 transform-remove-console 不适用于 Vue CLI 4 @vue/cli-plugin-babel/preset？

【英文标题】：Babel plugin transform-remove-console not working with Vue CLI 4 @vue/cli-plugin-babel/preset?

【发布时间】：2020-05-28 22:56:53

【问题描述】：

使用 Vue CLI 4 创建的 VueJS 项目，您可以在 babel.config.js 中使用这个方便的预设配置 Babel：

module.exports = 
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
;

我正在尝试使用 babel-plugin-transform-remove-console 从构建的 JS 文件中删除 console.*。

通过npm i -D babel-plugin-transform-remove-console将插件安装为开发依赖项

然后修改babel.config.js：

module.exports = (api) => 
  var env = api.cache(() => process.env.NODE_ENV);
  var plugins = [];
  // Change to 'production' when configs are working
  if (env === 'development') 
    plugins.push(['transform-remove-console',  exclude: ['error', 'warn'] ]);
  
  return 
    presets: ['@vue/cli-plugin-babel/preset'],
    // plugins,
    // Doesn't work even when always on?
    plugins: ['transform-remove-console'],
  ;
;

这应该可以通过运行npm run serve -- --reset-cache 来工作，而且我也尝试在不同的环境中多次构建应用程序，但是控制台日志仍然显示在浏览器的控制台中？

Vue CLI 的预设是否因无法通过此配置文件设置插件而以某种方式混淆？

更新：创建了a bug report to Vue CLI repo，并在创建最小的错误重现存储库时，我发现这个插件正在与一个新项目合作。

但是，我不知道是什么原因造成的，因为我已将此应用程序与最新的 CLI 引导模板同步，并且还尝试通过 `npm cache clean --force.

【问题讨论】：

缓存是一回事，node_modules 是另一回事。在 Windows 上，我曾经遇到过类似的问题，我不得不手动删除 node_modules 和 AppData/local/temp 的内容，然后重新安装模块——也许这也能解决你的问题。

【参考方案1】：

似乎@Zydnar 对 nuking node_modules 文件夹的建议可能有所帮助，但是，我还发现我最近的 NPM 包升级已中断并且没有完全成功。 有些 Vue CLI 插件有不同的版本。

在 nuking node_modules 并升级所有包之后，这个 Babel 插件开始工作了！

【参考方案2】：

我遇到了同样的问题。这不起作用：

plugins: ['transform-remove-console']

但这有效：

plugins: [['transform-remove-console',  exclude: ['error', 'warn'] ]]

希望这对遇到相同问题的其他人有所帮助。