Don't transpile in development mode.

Author: rtibbles

package.json

@@ -12,7 +12,7 @@
     "test-jest": "kolibri-tools test --config ./jest.conf.js",
     "test-jest-cov": "yarn run test-jest --coverage",
     "coverage": "yarn run test-jest-cov",
-    "build": "yarn run hashi-build && kolibri-tools build prod --file ./build_tools/build_plugins.txt",
+    "build": "yarn run hashi-build && kolibri-tools build prod --file ./build_tools/build_plugins.txt --transpile",
     "makemessages": "kolibri-tools i18n-extract-messages --pluginFile ./build_tools/build_plugins.txt",
     "createprofiles": "kolibri-tools i18n-profile --pluginFile ./build_tools/build_plugins.txt --output-file ./kolibri/locale/en/LC_MESSAGES/profiles/strings.csv",
     "transfercontext": "kolibri-tools i18n-transfer-context --pluginFile ./build_tools/build_plugins.txt",
@@ -25,7 +25,7 @@
     "devserver-warn": "run-p python-devserver lint-frontend:watch hashi-dev watch",
     "devserver-hot": "run-p python-devserver lint-frontend:watch:format hashi-dev watch-hot",
     "devserver-hot-warn": "run-p python-devserver lint-frontend:watch hashi-dev watch-hot",
-    "bundle-stats": "kolibri-tools build stats --file ./build_tools/build_plugins.txt",
+    "bundle-stats": "kolibri-tools build stats --file ./build_tools/build_plugins.txt --transpile",
     "clean": "kolibri-tools build clean --file ./build_tools/build_plugins.txt",
     "preinstall": "node ./packages/kolibri-tools/lib/npm_deprecation_warning.js",
     "lint-frontend": "kolibri-tools lint --pattern '{kolibri*/**/assets,packages,build_tools}/**/*.{js,vue,scss,less,css}' --ignore '**/dist/**,**/node_modules/**,**/static/**,**/kolibri-core-for-export/**'",

packages/kolibri-tools/lib/cli.js

@@ -58,6 +58,7 @@ program
   .option('--host <host>', 'Set a host to serve devserver', String, '0.0.0.0')
   .option('--json', 'Output webpack stats in JSON format - only works in prod mode', false)
   .option('--cache', 'Use cache in webpack', false)
+  .option('--transpile', 'Transpile code using Babel', false)
   .action(function(mode, options) {
     const buildLogging = logger.getLogger('Kolibri Build');
     const modes = {
@@ -122,6 +123,7 @@ program
       port: options.port,
       mode: webpackMode,
       cache: options.cache,
+      transpile: options.transpile,
     };
 
     const webpackConfig = require('./webpack.config.plugin');
@@ -136,8 +138,19 @@ program
 
     const compiler = webpack(webpackArray);
 
+    let start;
+
+    compiler.hooks.run.tap('Kolibri', () => {
+      start = new Date();
+    });
+
+    compiler.hooks.watchRun.tap('Kolibri', () => {
+      start = new Date();
+    });
+
     compiler.hooks.done.tap('Kolibri', () => {
-      buildLogging.info('Build complete');
+      const time = new Date() - start;
+      buildLogging.info(`Build complete in ${time / 1000} seconds`);
     });
 
     if (mode === modes.DEV) {

packages/kolibri-tools/lib/webpack.config.base.js

@@ -5,7 +5,7 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 
-module.exports = ({ mode = 'development', hot = false, cache = false } = {}) => {
+module.exports = ({ mode = 'development', hot = false, cache = false, transpile = false } = {}) => {
   const production = mode === 'production';
 
   // Have to pass this option to prevent complaints about empty exports:
@@ -34,6 +34,51 @@ module.exports = ({ mode = 'development', hot = false, cache = false } = {}) =>
   // for scss blocks
   const sassLoaders = [cssInsertionLoader, cssLoader, postCSSLoader, 'sass-loader'];
 
+  const rules = [
+    // Transpilation and code loading rules
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        compilerOptions: {
+          preserveWhitespace: false,
+        },
+      },
+    },
+    {
+      test: /\.css$/,
+      use: [cssInsertionLoader, cssLoader, postCSSLoader],
+    },
+    {
+      test: /\.s[a|c]ss$/,
+      use: sassLoaders,
+    },
+    {
+      test: /\.(png|jpe?g|gif|svg|eot|woff|ttf|woff2)$/,
+      type: 'asset',
+      generator: {
+        filename: '[name]-[contenthash][ext]',
+      },
+      parser: {
+        dataUrlCondition: {
+          maxSize: 10000,
+        },
+      },
+    },
+  ];
+
+  if (transpile) {
+    rules.push({
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: { and: [/(node_modules\/vue|dist|core-js)/, { not: [/\.(esm\.js|mjs)$/] }] },
+      options: {
+        cacheDirectory: cache,
+        cacheCompression: false,
+      },
+    });
+  }
+
   return {
     target: 'browserslist',
     mode,
@@ -45,47 +90,7 @@ module.exports = ({ mode = 'development', hot = false, cache = false } = {}) =>
       },
     },
     module: {
-      rules: [
-        // Transpilation and code loading rules
-        {
-          test: /\.vue$/,
-          loader: 'vue-loader',
-          options: {
-            compilerOptions: {
-              preserveWhitespace: false,
-            },
-          },
-        },
-        {
-          test: /\.js$/,
-          loader: 'babel-loader',
-          exclude: { and: [/(node_modules\/vue|dist|core-js)/, { not: [/\.(esm\.js|mjs)$/] }] },
-          options: {
-            cacheDirectory: cache,
-            cacheCompression: false,
-          },
-        },
-        {
-          test: /\.css$/,
-          use: [cssInsertionLoader, cssLoader, postCSSLoader],
-        },
-        {
-          test: /\.s[a|c]ss$/,
-          use: sassLoaders,
-        },
-        {
-          test: /\.(png|jpe?g|gif|svg|eot|woff|ttf|woff2)$/,
-          type: 'asset',
-          generator: {
-            filename: '[name]-[contenthash][ext]',
-          },
-          parser: {
-            dataUrlCondition: {
-              maxSize: 10000,
-            },
-          },
-        },
-      ],
+      rules,
     },
     node: {
       __filename: true,

packages/kolibri-tools/lib/webpack.config.plugin.js

@@ -36,7 +36,14 @@ const WebpackMessages = require('./webpackMessages');
  */
 module.exports = (
   data,
-  { mode = 'development', hot = false, port = 3000, address = 'localhost', cache = false } = {}
+  {
+    mode = 'development',
+    hot = false,
+    port = 3000,
+    address = 'localhost',
+    cache = false,
+    transpile = false,
+  } = {}
 ) => {
   if (
     typeof data.name === 'undefined' ||
@@ -164,7 +171,7 @@ module.exports = (
     );
   }
 
-  bundle = merge(bundle, baseConfig({ mode, hot, cache }), webpackConfig);
+  bundle = merge(bundle, baseConfig({ mode, hot, cache, transpile }), webpackConfig);
 
   if (mode === 'development') {
     const publicPath = `http://${address}:${port}/${data.name}/`;