How to bundle every external and inline JS script within a HTML file

Question

I currently have a project that has hundreds of external and inline JS classes.

Index.html:

<script src="./src/thing1.js></script>
<script src="./src/thing2.js></script>
<script src="./src/thing3.js></script>
...
<script src="./src/thing305.js></script>
<script>
   var exScript1 = "test";
</script>
<script>
   var exScript2 = "test";
</script>
...
<script>
   var exScript302 = "test";
</script>

What is the easiest way to bundle all of those external and inline scripts into a single script or inline HTML file?

Note: Webpack and the like take a javascript entry point, so I'd have to list every file as an entry point, which is out of the question.

Typescript is always an option. You can give it a directory to start searching through, and you can make it write all the files found out to a single one. An example: github.com/ddoapps/quest-tracker/blob/develop/… — Taplar
– Taplar, Commented Jan 8, 2020 at 23:17
You'll have to do some non-trivial refactoring regardless, since you seem to have 600-something separate <script>s. Seeing the content of those thingss might help some, they're probably repetitive..? — CertainPerformance
– CertainPerformance, Commented Jan 8, 2020 at 23:17
They aren't repetitive, the example above is just pseudo script to demonstrate what the file kind of looks like. How would I go about refactoring this in the least obtrusive way? I'm quite new to the team and unfortunately I thought bundling the files was going to be an easy task lol. — Jake Caron
– Jake Caron, Commented Jan 8, 2020 at 23:25
I suppose you could iterate through the files and copy their contents to a new single script, kind of like how dev.stackoverflow.com/content//Js/full.en.js looks. Could probably be done automatically, but it'd take a bit of coding — CertainPerformance
– CertainPerformance, Commented Jan 8, 2020 at 23:34
If you are able to save all the js files to a directory, you could use webpack to bundle all the files in the directory as explained in stackoverflow.com/questions/30818236/… — ibex
– ibex, Commented Jan 8, 2020 at 23:39

Kousha · Accepted Answer · 2020-01-09 00:41:40Z

0

You could have a single JS that appends these to the DOM:

<script>
const jsBundleUrls = [
  // this contains the URLs of all bundles
  "src/thing1.js",
  "src/thing2.js",
  // etc
];

isBundleUrls.forEach(src => {
  const el = document.createElement("script");
  el.src = plugin.src;
  el.async = true;

  document.body.appendChild(el);
});
</script>

answered Jan 9, 2020 at 0:41

Kousha

36.7k59 gold badges191 silver badges318 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bob · Accepted Answer · 2020-01-09 03:29:21Z

// Run this at the bottom of the page to get a list of all the files:
var list = [];
var raw = "";

var scripts = document.getElementByName("script");

for(var i=0; i<scripts.length; i++){
  var elem = scripts[i];
  var path = elem.src;
  if(path){
    list.push(path);
  } else {
    raw += "\n;" + elem.innerText;
  }
}

console.log( JSON.stringify(list, null, "\t") );

// Then in run this under node (nodejs.com):

var fs = require("fs");

var basepath = "/Volumes/projects/";

var list = []; // the list you made above

var output = raw + ";";

for(var i=0; i<list.length; i++){
  var f = basepath + list.src;
  var data = fs.readFileSync(f, {encoding: 'utf-8'});
  output += "\n";
  output += "; // file: " + f;
  output += ";" + data;
}

fs.writeFileSync("somewhere.js", output);

Collectives™ on Stack Overflow

How to bundle every external and inline JS script within a HTML file

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related