Question

使用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，并且在创建最小的bug复制存储库时，我发现此插件正在与新项目一起使用。

但是，我不知道是什么原因造成的，因为我已经将该应用程序与最新的CLI引导模板进行了同步，并且还尝试通过`npm cache clean --force来破坏NPM缓存。

Answer 1

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

plugins: ['transform-remove-console']

但这奏效了：

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

希望这能帮助遇到同样问题的其他人。

Answer 2

@Zydnar推荐使用node_modules文件夹似乎有所帮助，但是，我还发现我最近的NPM软件包升级被中断了，并且没有完全成功。 有些Vue CLI插件具有不同的版本。

在对node_modules进行核对并升级所有软件包之后，该Babel插件开始工作！

Babel插件transform-remove-console无法与Vue CLI 4 @ vue / cli-plugin-babel / preset一起使用吗？

2 个答案: