Merge pull request #95 from Lombiq/issue/OSOE-338

OSOE-338: Javasript compilation improvements

Author: wAsnk

Lombiq.NodeJs.Extensions/config/babel.module.config.json

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+          ]
+        },
+        "exclude": ["transform-async-to-generator", "transform-regenerator"],
+        "modules": false,
+        "loose": true
+      }
+    ]
+  ],
+  "sourceMaps": "inline",
+  "targets": "defaults"
+}

Lombiq.NodeJs.Extensions/package.json

@@ -13,14 +13,14 @@
     "copyfiles": "2.4.1",
     "eslint": "8.47.0",
     "if-env": "1.0.4",
-    "klaw": "4.1.0",
+    "glob": "10.3.10",
     "markdownlint": "0.30.0",
     "nodemon": "3.0.1",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.31",
     "postcss-cli": "10.1.0",
     "prettier": "3.0.3",
-    "rimraf": "5.0.1",
+    "rimraf": "5.0.5",
     "sass": "1.69.5",
     "stylelint": "15.11.0",
     "stylelint-config-standard-scss": "11.1.0",
@@ -71,9 +71,7 @@
     "---": "------------------------------------------------- SCRIPTS ------------------------------------------------",
     "build:scripts": "SRC=$(node scripts/get-path js source) && if-env SRC=! && echo \"Skipping scripts\" && exit 0 || run-p --print-name --continue-on-error lint:scripts compile:scripts",
     "lint:scripts": "SRC=$(node scripts/get-path js source) && node scripts/lint-scripts \"$SRC\" || AREA=scripts STEP=linting pnpm error",
-    "compile:scripts": "SRC=$(node scripts/get-path js source) && if-env SRC=! && echo \"Skipping scripts\" && exit 0 || DEST=$(node scripts/get-path js target) run-s --print-name _compile:scripts _minify:scripts",
-    "_compile:scripts": "babel \"$SRC\" --out-dir \"$DEST\" --config-file \"${INIT_CWD}/config/babel.config.json\" || AREA=scripts STEP=compilation pnpm error",
-    "_minify:scripts": "node scripts/minify \"$DEST\" || AREA=scripts STEP=minifying pnpm error",
+    "compile:scripts": "SRC=$(node scripts/get-path js source) DEST=$(node scripts/get-path js target) && if-env SRC=! && echo \"Skipping scripts\" && exit 0 || node scripts/compile-scripts \"$SRC\" \"$DEST\" \"${INIT_CWD}/config/\" || AREA=scripts STEP=compilation pnpm error",
     "clean:scripts": "DEST=$(node scripts/get-path js target) && rimraf \"$DEST/**/*.*\"",
     "watch:scripts": "SRC=$(node scripts/get-path js source) && nodemon --watch \"$SRC\" --exec \"pnpm build:scripts\"",
     "----": "------------------------------------------------ MARKDOWN -----------------------------------------------",

Lombiq.NodeJs.Extensions/pnpm-lock.yaml

@@ -0,0 +1,39 @@
+const babel = require('@babel/core');
+const path = require('path');
+const process = require('process');
+
+const { glob } = require('glob');
+const { minify } = require("terser");
+const { readFile, writeFile, mkdir } = require('fs').promises;
+
+const { handleErrorObjectAndExit } = require('./handle-error');
+
+const [ sourcePath, destinationPath, configPath ] = process.argv.slice(2);
+
+function readJsonConfig(fileName) {
+    return readFile(path.join(configPath, fileName), 'utf8')
+        .then(text => JSON.parse(text));
+}
+
+async function compileScripts() {
+    const browserConfig = readJsonConfig('babel.config.json');
+    const moduleConfig = readJsonConfig('babel.module.config.json');
+    const scriptFiles = await glob('/**/*.{js,mjs}', { root: sourcePath, ignore: 'node_modules/**' });
+
+    await Promise.all(scriptFiles.map(async filePath => {
+        const config = filePath.toLowerCase().endsWith('.mjs') ? moduleConfig : browserConfig;
+        const result = await babel.transformFileAsync(filePath, config);
+
+        const destinationFilePath = path.join(destinationPath, path.relative(sourcePath, filePath))
+        await mkdir(path.dirname(destinationFilePath), { recursive: true });
+        await writeFile(destinationFilePath, result.code);
+
+        const minifiedPath = destinationFilePath.replace(/\.(m?js)$/, '.min.$1')
+        const sourceMapOptions = { content: 'inline', url : path.basename(minifiedPath) + '.map' };
+        const minifiedCode = await minify(result.code, { sourceMap: sourceMapOptions });
+        await writeFile(minifiedPath, minifiedCode.code);
+        await writeFile(minifiedPath + ".map", minifiedCode.map);
+    }));
+}
+
+compileScripts().catch(handleErrorObjectAndExit);

Lombiq.NodeJs.Extensions/scripts/compile-scripts.js

@@ -23,7 +23,7 @@ Do you want to quickly try out this project and see it in action? Check it out,
 
 ## Prerequisites
 
-1. To use this project, you will most of all need [Node.js](https://nodejs.org/) 16.9 or newer. We suggest installing the current LTS version which is higher than this minimum.
+1. To use this project, you will most of all need [Node.js](https://nodejs.org/) 18 or newer. We suggest installing the current LTS version which is higher than this minimum.
 2. Please follow our recommended setup guides for [Windows](Lombiq.NodeJs.Extensions/Docs/SetupWindows.md) or [Linux](Lombiq.NodeJs.Extensions/Docs/SetupLinux.md), as applicable.
 
 [PNPM](https://pnpm.io) 8 (for package management and script execution) is automatically enabled via `corepack` in the `EnablePnpm` MSBuild target, so you don't have to install it separately. Since PNPM 8 dropped support for Node.js 14 or older, those `node` versions won't work.