Build: Optional skipping of typescript checking in dev bundler (#18772)

* Build: Removed typescript checking from dev bundler

- when switching branches and trying out features, TS checking and bundling are eating up a lot
of CPU
- most of us are using an editor with typechecking support
- this commit removes type checking from the dev bundler
- we still have type checking enabled as a precommit hook and as part of
the prod bundler

* Adds new npm script: start:noTsCheck

package.json

@@ -146,6 +146,7 @@
     "start": "grafana-toolkit core:start --watchTheme",
     "start:hot": "grafana-toolkit core:start --hot --watchTheme",
     "start:ignoreTheme": "grafana-toolkit core:start --hot",
+    "start:noTsCheck": "grafana-toolkit core:start --noTsCheck",
     "watch": "yarn start -d watch,start core:start --watchTheme ",
     "build": "grunt build",
     "test": "grunt test",

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

@@ -28,11 +28,13 @@ export const run = (includeInternalScripts = false) => {
     program
       .command('core:start')
       .option('-h, --hot', 'Run front-end with HRM enabled')
+      .option('-T, --noTsCheck', 'Run bundler without TS type checking')
       .option('-t, --watchTheme', 'Watch for theme changes and regenerate variables.scss files')
       .description('Starts Grafana front-end in development mode with watch enabled')
       .action(async cmd => {
         await execTask(startTask)({
           watchThemes: cmd.watchTheme,
+          noTsCheck: cmd.noTsCheck,
           hot: cmd.hot,
         });
       });

packages/grafana-toolkit/src/cli/tasks/core.start.ts

@@ -4,10 +4,12 @@ import { Task, TaskRunner } from './task';
 
 interface StartTaskOptions {
   watchThemes: boolean;
+  noTsCheck: boolean;
   hot: boolean;
 }
 
-const startTaskRunner: TaskRunner<StartTaskOptions> = async ({ watchThemes, hot }) => {
+const startTaskRunner: TaskRunner<StartTaskOptions> = async ({ watchThemes, noTsCheck, hot }) => {
+  const noTsCheckArg = noTsCheck ? 1 : 0;
   const jobs = [
     watchThemes && {
       command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate',
@@ -19,7 +21,7 @@ const startTaskRunner: TaskRunner<StartTaskOptions> = async ({ watchThemes, hot
           name: 'Dev server',
         }
       : {
-          command: 'webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js',
+          command: `webpack --progress --colors --watch --env.noTsCheck=${noTsCheckArg} --config scripts/webpack/webpack.dev.js`,
           name: 'Webpack',
         },
   ];

scripts/webpack/webpack.common.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = {
   target: 'web',
@@ -72,10 +71,5 @@ module.exports = {
         }
       }
     }
-  },
-  plugins: [
-    new ForkTsCheckerWebpackPlugin({
-      checkSyntacticErrors: true,
-    }),
-  ]
+  }
 };

scripts/webpack/webpack.dev.js

@@ -4,83 +4,90 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-module.exports = merge(common, {
-  devtool: "cheap-module-source-map",
-  mode: 'development',
+module.exports = (env = {}) =>
+  merge(common, {
+    devtool: 'cheap-module-source-map',
+    mode: 'development',
 
-  entry: {
-    app: './public/app/index.ts',
-    dark: './public/sass/grafana.dark.scss',
-    light: './public/sass/grafana.light.scss',
-  },
+    entry: {
+      app: './public/app/index.ts',
+      dark: './public/sass/grafana.dark.scss',
+      light: './public/sass/grafana.light.scss',
+    },
 
-  // If we enabled watch option via CLI
-  watchOptions: {
-    ignored: /node_modules/
-  },
+    // If we enabled watch option via CLI
+    watchOptions: {
+      ignored: /node_modules/,
+    },
 
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        enforce: 'pre',
-        exclude: /node_modules/,
-        use: {
-          loader: 'tslint-loader',
-          options: {
-            emitErrors: true,
-            typeCheck: false,
-          }
-        }
-      },
-      {
-        test: /\.tsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'ts-loader',
-          options: {
-            transpileOnly: true
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          enforce: 'pre',
+          exclude: /node_modules/,
+          use: {
+            loader: 'tslint-loader',
+            options: {
+              emitErrors: true,
+              typeCheck: false,
+            },
           },
         },
-      },
-      require('./sass.rule.js')({ sourceMap: false, preserveUrl: false }),
-      {
-        test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-        loader: 'file-loader'
-      },
-    ]
-  },
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
+        },
+        require('./sass.rule.js')({ sourceMap: false, preserveUrl: false }),
+        {
+          test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+          loader: 'file-loader',
+        },
+      ],
+    },
 
-  plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "grafana.[name].[hash].css"
-    }),
-    new HtmlWebpackPlugin({
-      filename: path.resolve(__dirname, '../../public/views/error.html'),
-      template: path.resolve(__dirname, '../../public/views/error-template.html'),
-      inject: false,
-    }),
-    new HtmlWebpackPlugin({
-      filename: path.resolve(__dirname, '../../public/views/index.html'),
-      template: path.resolve(__dirname, '../../public/views/index-template.html'),
-      inject: 'body',
-      chunks: ['manifest', 'vendor', 'app'],
-    }),
-    new webpack.NamedModulesPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('development')
-      }
-    }),
-    // new BundleAnalyzerPlugin({
-    //   analyzerPort: 8889
-    // })
-  ]
-});
+    plugins: [
+      new CleanWebpackPlugin(),
+      env.noTsCheck
+        ? new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
+        : new ForkTsCheckerWebpackPlugin({
+            checkSyntacticErrors: true,
+          }),
+      new MiniCssExtractPlugin({
+        filename: 'grafana.[name].[hash].css',
+      }),
+      new HtmlWebpackPlugin({
+        filename: path.resolve(__dirname, '../../public/views/error.html'),
+        template: path.resolve(__dirname, '../../public/views/error-template.html'),
+        inject: false,
+      }),
+      new HtmlWebpackPlugin({
+        filename: path.resolve(__dirname, '../../public/views/index.html'),
+        template: path.resolve(__dirname, '../../public/views/index-template.html'),
+        inject: 'body',
+        chunks: ['manifest', 'vendor', 'app'],
+      }),
+      new webpack.NamedModulesPlugin(),
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify('development'),
+        },
+      }),
+      // new BundleAnalyzerPlugin({
+      //   analyzerPort: 8889
+      // })
+    ],
+  });

scripts/webpack/webpack.prod.js

@@ -5,6 +5,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const common = require('./webpack.common.js');
 const path = require('path');
 const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
@@ -58,6 +59,9 @@ module.exports = merge(common, {
     ]
   },
   plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      checkSyntacticErrors: true,
+    }),
     new MiniCssExtractPlugin({
       filename: "grafana.[name].[hash].css"
     }),