tools: Teach webpack-make.js to get node_modules by itself

This supports the "only work on web-y bits without autotools" workflow.
It avoids having to run `node-modules checkout` as a user from a clean
tree, and also helps after pulling new commits which change
node_modules.

As `argparse`, `webpack`, and our rsync plugin all live in node_modules,
to convert these to dynamic imports.

.github/workflows/webpack-jumpstart.yml

@@ -26,7 +26,6 @@ jobs:
              git checkout --detach base
              git merge --no-edit head
              git rev-parse HEAD^{tree} > tree
-             tools/node-modules make_package_lock_json
              NODE_ENV=production tools/webpack-make.js
              tar cf webpack-jumpstart.tar dist package-lock.json tree")"
 

HACKING.md

@@ -47,10 +47,6 @@ First, install Cockpit on your local machine as described in:
 
 <https://cockpit-project.org/running.html>
 
-Cockpit uses a lot of build and runtime dependencies from [npm](https://www.npmjs.com). Get them with
-
-    tools/node-modules checkout
-
 Next, run this command from your top level Cockpit checkout directory, and make
 sure to run it as the same user that you'll use to log into Cockpit below.
 

tools/webpack-make.js

@@ -1,15 +1,16 @@
 #!/usr/bin/env node
 
-import webpack from 'webpack';
+import child_process from 'child_process';
 import path from 'path';
-import argparse from 'argparse';
 import process from 'process';
-import { CockpitRsyncWebpackPlugin } from '../pkg/lib/cockpit-rsync-plugin.js';
+
+// ensure node_modules is present and up to date
+child_process.spawnSync('tools/node-modules', ['make_package_lock_json'], { stdio: 'inherit' });
 
 // argv0 is node
 const webpack_watch = process.argv[1].includes('webpack-watch');
 
-const parser = argparse.ArgumentParser();
+const parser = (await import('argparse')).default.ArgumentParser();
 parser.add_argument('-c', '--config', { help: "Path to webpack.config.js", default: "webpack.config.js" });
 parser.add_argument('-r', '--rsync', { help: "rsync webpack to ssh target after build", metavar: "HOST" });
 parser.add_argument('-w', '--watch', { action: 'store_true', help: "Enable webpack watch mode", default: webpack_watch });
@@ -40,26 +41,6 @@ if (args.onlydir)
 const cwd = process.cwd();
 const config_path = path.resolve(cwd, args.config);
 
-import(config_path).then(module => {
-    const config = module.default;
-    if (args.rsync) {
-        process.env.RSYNC = args.rsync;
-        config.plugins.push(new CockpitRsyncWebpackPlugin({ source: "dist/" + (args.onlydir || "") }));
-    }
-
-    const compiler = webpack(config);
-
-    if (args.watch) {
-        compiler.hooks.watchRun.tap("WebpackInfo", compilation => {
-            const time = new Date().toTimeString().split(' ')[0];
-            process.stdout.write(`${time} Build started\n`);
-        });
-        compiler.watch(config.watchOptions, process_result);
-    } else {
-        compiler.run(process_result);
-    }
-});
-
 function process_result(err, stats) {
     // process.stdout.write(stats.toString({colors: true}) + "\n");
 
@@ -83,3 +64,29 @@ function process_result(err, stats) {
             process.exit(1);
     }
 }
+
+async function build() {
+    // dynamic imports which need node_modules
+    const config = (await import(config_path)).default;
+    const webpack = (await import('webpack')).default;
+    const cockpit_rsync = (await import('../pkg/lib/cockpit-rsync-plugin.js'));
+
+    if (args.rsync) {
+        process.env.RSYNC = args.rsync;
+        config.plugins.push(new cockpit_rsync.CockpitRsyncWebpackPlugin({ source: "dist/" + (args.onlydir || "") }));
+    }
+
+    const compiler = webpack(config);
+
+    if (args.watch) {
+        compiler.hooks.watchRun.tap("WebpackInfo", compilation => {
+            const time = new Date().toTimeString().split(' ')[0];
+            process.stdout.write(`${time} Build started\n`);
+        });
+        compiler.watch(config.watchOptions, process_result);
+    } else {
+        compiler.run(process_result);
+    }
+}
+
+build();