When you create a VueJS project using Vue CLI 4, Babel is configured with a useful preset in babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
};
I am attempting to use babel-plugin-transform-remove-console to eliminate console.* statements from the JavaScript files generated.
I installed the plugin as a development dependency using:
npm i -D babel-plugin-transform-remove-consoleThen I made modifications to babel.config.js:
module.exports = (api) => {
var env = api.cache(() => process.env.NODE_ENV);
var plugins = [];
// Switch to 'production' once configurations are finalized
if (env === 'development') {
plugins.push(['transform-remove-console', { exclude: ['error', 'warn'] }]);
}
return {
presets: ['@vue/cli-plugin-babel/preset'],
// plugins,
// Even when always enabled?
plugins: ['transform-remove-console'],
};
};
This setup should work by running npm run serve -- --reset-cache, and I've attempted building the app multiple times with various environments, but the console logs continue to appear in the browser's console?
Could it be that Vue CLI's preset is causing issues with setting plugins through this configuration file?
UPDATE: I have submitted a bug report to the Vue CLI repository, and while creating a minimal reproducible bug repository, I discovered that this plugin works with a new project.
However, I am unsure what is causing this problem as I have synced this application with the latest CLI bootstrapped template, and also tried clearing the NPM cache by running `npm cache clean --force`.