如何在 HTML 文件中捆绑每个外部和内联 JS 脚本

Question

我目前有一个项目，其中包含数百个外部和内联 JS 类。

索引.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>

将所有这些外部和内联脚本捆绑到单个脚本或内联 HTML 文件中的最简单方法是什么？

注意：Webpack 等采用 javascript 入口点，因此我必须将每个文件都列为入口点，这是不可能的。

Answer 1

你可以有一个 JS 将这些附加到 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>

Answer 2

// 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);