From 89abc77b2268669321e06af30d41e35264670e1f Mon Sep 17 00:00:00 2001 From: David Date: Fri, 30 Aug 2019 14:02:31 +0200 Subject: [PATCH] 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 | 1 + packages/grafana-toolkit/src/cli/index.ts | 2 + .../src/cli/tasks/core.start.ts | 6 +- scripts/webpack/webpack.common.js | 8 +- scripts/webpack/webpack.dev.js | 149 +++++++++--------- scripts/webpack/webpack.prod.js | 4 + 6 files changed, 90 insertions(+), 80 deletions(-) diff --git a/package.json b/package.json index b86a10880e1..c6cb237e134 100644 --- a/package.json +++ b/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", diff --git a/packages/grafana-toolkit/src/cli/index.ts b/packages/grafana-toolkit/src/cli/index.ts index 2e6115eaba9..99b17e428b6 100644 --- a/packages/grafana-toolkit/src/cli/index.ts +++ b/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, }); }); diff --git a/packages/grafana-toolkit/src/cli/tasks/core.start.ts b/packages/grafana-toolkit/src/cli/tasks/core.start.ts index 516c46a7334..bae4364f2d4 100644 --- a/packages/grafana-toolkit/src/cli/tasks/core.start.ts +++ b/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 = async ({ watchThemes, hot }) => { +const startTaskRunner: TaskRunner = 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 = 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', }, ]; diff --git a/scripts/webpack/webpack.common.js b/scripts/webpack/webpack.common.js index 600e5b480c8..991d5b17964 100644 --- a/scripts/webpack/webpack.common.js +++ b/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, - }), - ] + } }; diff --git a/scripts/webpack/webpack.dev.js b/scripts/webpack/webpack.dev.js index 47ce7fe2fcf..ac330ca91c0 100644 --- a/scripts/webpack/webpack.dev.js +++ b/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 + // }) + ], + }); diff --git a/scripts/webpack/webpack.prod.js b/scripts/webpack/webpack.prod.js index 98811ad727e..e93a0baec6b 100644 --- a/scripts/webpack/webpack.prod.js +++ b/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" }),