Skip to content

N
nexpie-grafana-theme
Commit 89abc77b by David Committed by GitHub
Options

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
parent a928da7f
Showing with 90 additions and 80 deletions
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
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"
}),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment