grafana/toolkit: Drop console and debugger statements by default when building plugin with toolkit (#28776)

packages/grafana-toolkit/README.md

@@ -105,6 +105,7 @@ This command creates a production-ready build of your plugin.
 Available options:
 
 - `--coverage` - Reports code coverage after the test step of the build.
+- `--preserveConsole` - Preserves console statements in the code.
 
 ### Sign your plugin
 

packages/grafana-toolkit/src/cli/index.ts

@@ -140,10 +140,16 @@ export const run = (includeInternalScripts = false) => {
   program
     .command('plugin:build')
     .option('--maxJestWorkers <num>|<string>', 'Limit number of Jest workers spawned')
-    .description('Prepares plugin dist package')
     .option('--coverage', 'Run code coverage', false)
+    .option('--preserveConsole', 'Preserves console calls', false)
+    .description('Prepares plugin dist package')
     .action(async cmd => {
-      await execTask(pluginBuildTask)({ coverage: cmd.coverage, silent: true, maxJestWorkers: cmd.maxJestWorkers });
+      await execTask(pluginBuildTask)({
+        coverage: cmd.coverage,
+        silent: true,
+        maxJestWorkers: cmd.maxJestWorkers,
+        preserveConsole: cmd.preserveConsole,
+      });
     });
 
   program

packages/grafana-toolkit/src/cli/tasks/plugin.build.ts

@@ -17,6 +17,7 @@ const rimraf = promisify(rimrafCallback);
 interface PluginBuildOptions {
   coverage: boolean;
   maxJestWorkers?: string;
+  preserveConsole?: boolean;
 }
 
 interface Fixable {
@@ -112,11 +113,15 @@ export const lintPlugin = ({ fix }: Fixable = {}) =>
     }
   });
 
-export const pluginBuildRunner: TaskRunner<PluginBuildOptions> = async ({ coverage, maxJestWorkers }) => {
+export const pluginBuildRunner: TaskRunner<PluginBuildOptions> = async ({
+  coverage,
+  maxJestWorkers,
+  preserveConsole,
+}) => {
   await prepare();
   await lintPlugin({ fix: false });
   await testPlugin({ updateSnapshot: false, coverage, maxWorkers: maxJestWorkers, watch: false });
-  await bundlePlugin({ watch: false, production: true });
+  await bundlePlugin({ watch: false, production: true, preserveConsole });
 };
 
 export const pluginBuildTask = new Task<PluginBuildOptions>('Build plugin', pluginBuildRunner);

packages/grafana-toolkit/src/cli/tasks/plugin/bundle.ts

@@ -7,14 +7,16 @@ export interface PluginBundleOptions {
   watch: boolean;
   production?: boolean;
   yarnlink?: boolean;
+  preserveConsole?: boolean;
 }
 
 // export const bundlePlugin = ({ watch, production }: PluginBundleOptions) => useSpinner('Bundle plugin', async () => {
-export const bundlePlugin = async ({ watch, production }: PluginBundleOptions) => {
+export const bundlePlugin = async ({ watch, production, preserveConsole }: PluginBundleOptions) => {
   const compiler = webpack(
     await loadWebpackConfig({
       watch,
       production,
+      preserveConsole,
     })
   );
 

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -18,8 +18,11 @@ import { getStyleLoaders, getStylesheetEntries, getFileLoaders } from './webpack
 export interface WebpackConfigurationOptions {
   watch?: boolean;
   production?: boolean;
+  preserveConsole?: boolean;
 }
+
 type WebpackConfigurationGetter = (options: WebpackConfigurationOptions) => Promise<webpack.Configuration>;
+
 export type CustomWebpackConfigurationGetter = (
   originalConfig: webpack.Configuration,
   options: WebpackConfigurationOptions
@@ -138,7 +141,11 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async options => {
   const optimization: { [key: string]: any } = {};
 
   if (options.production) {
-    optimization.minimizer = [new TerserPlugin({ sourceMap: true }), new OptimizeCssAssetsPlugin()];
+    const compressOptions = { drop_console: !options.preserveConsole, drop_debugger: true };
+    optimization.minimizer = [
+      new TerserPlugin({ sourceMap: true, terserOptions: { compress: compressOptions } }),
+      new OptimizeCssAssetsPlugin(),
+    ];
   } else if (options.watch) {
     plugins.push(new HtmlWebpackPlugin());
   }