Our developers have found the following resources useful, but not mandatory.

This section is in progress… Good documentation: https://webpack.js.org/guides/getting-started/

  • Install Webpack

Use this only if you are setting up a brand new node,

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

otherwise, install webpack in your existing node:

npm i webpack webpack-cli --save-dev
npm audit fix
  • In package.json – add the following to the scripts section
"compileModules": "webpack --config webpackModules.config.babel.js"
  • Add webpackModules.config.babel.js to the root of your node.
  • Add indexModules.js to /src/ - this lists the js modules to bundle, so will need editing.
  • Install other required dependencies:
npm install @types/estree@latest
npm run build to check it still works
  • Install other dependencies (we need to refine this – the last one might be sufficient):
npm install babel-register --save-dev
npm install babel
npm install babel-cli
npm install babel-loader
npm install -D babel-loader @babel/core @babel/preset-env webpack
  • To do the bundling of modules… npm run compileModules
  • Now modify your HTML to reference the ./dist/bundleModules.js instead of each module individually
  • Get the \\europe\uk\admin\csa\ScriptConcat.zip and unzip (it is another node)
  • Install grunt globally… npm install grunt-cli -g
  • Place your desired js into the script subfolder
  • Run the mergeScripts.bat
  • Find the output bundleStandardScripts.js, copy it into your project’s /dist/ folder
  • Include this in your HTML instead of the individual scripts

NB: grunt is simply concatenating files, which you can do simply by… running a batch file with the following commands…

del ./dist/bundleStandardScripts.js
type CSA_language-map.js CSA_languagecode.js CSA_translations.js CSA.js CSA_session.js CSA_api.js CSA_tabkey.js > ./dist/bundleStandardScripts.js

But make sure each file ends with a carriage return otherwise there will be no delimiter between the files and the syntax may fail

To build…

npm run build
npm run compileModules

Make sure the HTML references the merged module ./dist/bundleModules.js

<script type="module" src="./dist/bundleModules.js"></script>
  • Copy all the standard CSA_*.js into the ScriptConcat/script folder (except CSA_config.js)
  • Execute the mergeScripts.bat
  • Copy the ScriptConcat/dist/bundleStandardScripts.js back into your CSA/dist/ folder
  • Make sure the HTML references the merged js ./dist/bundleStandardScripts.jshtml<script src="./dist/bundleStandardScripts.js"></script>

NEVER MERGE CSA_config.js as this is a config file to be edited on-site Debugging is impossible like this, you will have to revert to separate files!

See https://www.npmjs.com/package/minify

  • Install minify globally… npm i minify –g
  • Run minify on the required source… minify ./dist/bundleStandardScripts.js > ./dist/bundleStandardScripts.min.js
  • Include the minified script in your HTML instead of the original. Always re-test minified source fully as minifiers are not 100% reliable!!!