html-script-src-replace

html-script-src-replace is a cli program that updates a script elements src value to a new value in an html file. You would use html-script-src-replace when you are cache-busting javascript via changing the javascript's file name, but are not using a bundler like webpack/parcel/rollup.

html-script-src-replace knows the cache-bust string being used via the CACHE_BUST_STRING variable you set in your cli environment. (It sees this internally as process.env.CACHE_BUST_STRING).

For example, suppose you have the following npm scripts:

"build": "CACHE_BUST_STRING=$(random string) NODE_ENV=production run-s build:**",
"build:clean": "trash dist",
"build:babel": "babel -x .ts,.tsx src/ts --out-dir dist/js --ignore \"src/web_modules/**/*.*\"",
"build:rename-js-files": "laren \"./dist/js/**/*.js\" \"f => f.replace('.js', '_' + process.env.CACHE_BUST_STRING + '.js')\"",
"build:update-html-script-src": "html-script-src-replace --html-input-file index.html --html-output-file dist/index.html --filename-postfix _"

you can see that CACHE_BUST_STRING is set to a random string that other npm tasks use for cache-busting, including update-html-script-src.

How to install: npm i html-script-src-replace -D

Options:
  -id, --script-element-id   HTML script element id (optional - this is handy in case you have more than one script tag in the html page)
  -i, --html-input-file      HTML input file
  -o, --html-output-file     HTML output file
  -pr, --filename-prefix     File name prefix (optional)
  -po, --filename-postfix    File name postfix (optional)
  -h, --help

Other links

• Laren - rename files on the command line
• babel-plugin-transform-rename-import - rename imports to use the cache-bust string
• random-generator-cli - generate random text