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,
otherwise, install webpack in your existing node:
- In
package.json
– add the following to the scripts section
- 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:
- Install other dependencies (we need to refine this – the last one might be sufficient):
- 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…
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…
Make sure the HTML references the merged module ./dist/bundleModules.js
- Copy all the standard
CSA_*.js
into theScriptConcat/script
folder (exceptCSA_config.js
) - Execute the
mergeScripts.bat
- Copy the
ScriptConcat/dist/bundleStandardScripts.js
back into yourCSA/dist/
folder - Make sure the HTML references the merged js
./dist/bundleStandardScripts.js
html<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!!!