From 5789aa46788ab4d23a51c78eafe93fde2047f596 Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Wed, 17 Feb 2021 19:22:55 -0500 Subject: [PATCH 1/2] Fix pack and makeAll to display the modules now that webpack 5 has changed its output (and no longer supports --display-modules). --- components/bin/makeAll | 16 +++------ components/bin/pack | 81 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 72 insertions(+), 25 deletions(-) diff --git a/components/bin/makeAll b/components/bin/makeAll index 6c23340b4..a7f6a06ec 100755 --- a/components/bin/makeAll +++ b/components/bin/makeAll @@ -44,15 +44,13 @@ if (dirs.length === 0) { */ const build = 'node ' + path.join(__dirname, 'build'); const copy = 'node ' + path.join(__dirname, 'copy'); +const pack = 'node ' + path.join(__dirname, 'pack'); /** - * Regular expressions for the components directory, the MathJax .js location, and the node_modules directory + * Regular expression for the components directory */ const compRE = new RegExp(path.dirname(__dirname).replace(/([\\.{}[\]()?*^$])/g, '\$1'), 'g'); -const rootRE = new RegExp(path.join(path.dirname(path.dirname(__dirname)), 'js') - .replace(/([\\.{}[\]()?*^$])/g, '\$1'), 'g'); -const nodeRE = new RegExp(path.join(path.dirname(path.dirname(__dirname)), 'node_modules') - .replace(/([\\.{}[\]()?*^$])/g, '\$1'), 'g'); + /** * Process the contents of an array of directories @@ -126,12 +124,8 @@ function webpackLib(dir) { const wd = process.cwd(); try { process.chdir(dir); - const result = execSync('npx webpack --display-modules'); - console.info(' ' + String(result).replace(/\n/g, '\n ') - .replace(/ \.\.\//g, ' ' + path.dirname(path.resolve(dir)) + '/') - .replace(compRE, '[components]') - .replace(rootRE, '[js]') - .replace(nodeRE, '[node]')); + const result = execSync(pack); + console.info(' ' + String(result).replace(/\n/g, '\n ')); } catch (err) { console.info(' ' + err.message); } diff --git a/components/bin/pack b/components/bin/pack index 09ebe93fd..c9dc8711d 100755 --- a/components/bin/pack +++ b/components/bin/pack @@ -27,33 +27,86 @@ const fs = require('fs'); const path = require('path'); -const {execSync} = require('child_process'); +const {spawn} = require('child_process'); + +/** + * @param {string} name The file name to turn into a Regular expression + * @return {RegExp} The regular expression for the name, + */ +function fileRegExp(name) { + return new RegExp(name.replace(/([\\.{}[\]()?*^$])/g, '\\$1'), 'g'); +} + +/** + * @param {Object} The file or asset data whose size is to be returned + * @return {string} The string giving the size in KB + */ +function fileSize(file) { + return ' (' + (file.size / 1024).toFixed(2).replace(/\.?0+$/, '') + ' KB)'; +} /** * Regular expressions for the components directory and the MathJax .js location */ -const compRE = new RegExp(path.dirname(__dirname).replace(/([\\.{}[\]()?*^$])/g, '\\$1'), 'g'); -const rootRE = new RegExp(path.join(path.dirname(path.dirname(__dirname)), 'js') - .replace(/([\\.{}[\]()?*^$])/g, '\\$1'), 'g'); -const nodeRE = new RegExp(path.join(path.dirname(path.dirname(__dirname)), 'node_modules') - .replace(/([\\.{}[\]()?*^$])/g, '\\$1'), 'g'); +const compRE = fileRegExp(path.dirname(__dirname)); +const rootRE = fileRegExp(path.join(path.dirname(path.dirname(__dirname)), 'js')); +const nodeRE = fileRegExp(path.join(path.dirname(path.dirname(__dirname)), 'node_modules')); + +/** + * @return {JSON} The parsed JSON from webpack + */ +async function readJSON() { + return new Promise((ok, fail) => { + const buffer = []; + const error = []; + const child = spawn('npx', ['webpack', '--json']); + child.stdout.on('data', (data) => buffer.push(String(data))); + child.stdout.on('close', (code) => { + const json = JSON.parse(buffer.join('')); + if (json.errors && json.errors.length) { + fail(json.errors[0].message); + } + ok(json); + }); + }); +} /** * Run webpack if there is a configuration file for it * * @param {string} dir The directory to pack */ -function webpackLib(dir) { +async function webpackLib(dir) { try { process.chdir(dir); - const result = execSync('npx webpack --display-modules'); - console.info(String(result).replace(/\n/g, '\n ') - .replace(/ \.\.\//g, ' ' + path.dirname(path.resolve(dir)) + '/') - .replace(compRE, '[components]') - .replace(rootRE, '[js]') - .replace(nodeRE, '[node]')); + const dirRE = fileRegExp(path.resolve(dir)); + // + // Get the json from webpack and print the asset name and size + // + const json = await readJSON(); + for (const asset of json.assets) { + console.log(asset.name + fileSize(asset)); + } + // + // Sort the modules and print their names ans sizes + // + const modules = json.modules; + for (const module of modules) { + module.name = path.resolve(dir, module.name) + .replace(/ \+ \d+ modules/, '') + .replace(dirRE, '.'); + } + for (const module of modules.sort((a,b) => a.name < b.name ? -1 : 1)) { + if (module.moduleType.match(/javascript/)) { + const name = module.name + .replace(compRE, '[components]') + .replace(rootRE, '[js]') + .replace(nodeRE, '[node]'); + console.log(' ' + name + fileSize(module)); + } + } } catch (err) { - console.error(err.message); + console.error(err); } } From f9df14e2a9db87915a391566685798bdf1dd76d9 Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Mon, 8 Mar 2021 14:43:23 -0500 Subject: [PATCH 2/2] Fix typo and remove unneeded variable --- components/bin/pack | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/bin/pack b/components/bin/pack index c9dc8711d..29bcf27c5 100755 --- a/components/bin/pack +++ b/components/bin/pack @@ -58,7 +58,6 @@ const nodeRE = fileRegExp(path.join(path.dirname(path.dirname(__dirname)), 'node async function readJSON() { return new Promise((ok, fail) => { const buffer = []; - const error = []; const child = spawn('npx', ['webpack', '--json']); child.stdout.on('data', (data) => buffer.push(String(data))); child.stdout.on('close', (code) => { @@ -88,7 +87,7 @@ async function webpackLib(dir) { console.log(asset.name + fileSize(asset)); } // - // Sort the modules and print their names ans sizes + // Sort the modules and print their names and sizes // const modules = json.modules; for (const module of modules) {