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

【问题标题】：How to bundle every external and inline JS script within a HTML file如何在 HTML 文件中捆绑每个外部和内联 JS 脚本
【发布时间】：2020-01-08 23:15:39
【问题描述】：

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

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>

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

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

【问题讨论】：

Typescript 始终是一种选择。你可以给它一个目录来开始搜索，你可以让它把找到的所有文件写到一个文件中。一个例子：github.com/ddoapps/quest-tracker/blob/develop/…
无论如何，您都必须进行一些重要的重构，因为您似乎有 600 个独立的 <script>s。看到那些thingss 的内容可能会有所帮助，它们可能是重复的..？
它们不是重复的，上面的例子只是伪脚本来演示文件的样子。我将如何以最不突兀的方式重构它？我是团队的新手，不幸的是，我认为打包文件将是一件容易的事，哈哈。
我想你可以遍历文件并将它们的内容复制到一个新的单个脚本中，有点像dev.stackoverflow.com/content//Js/full.en.js 的样子。可能可以自动完成，但需要一些编码
如果你能够将所有的js文件保存到一个目录中，你可以使用webpack来打包目录中的所有文件，如stackoverflow.com/questions/30818236/…中所述

标签： javascript html webpack bundle

【解决方案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>

【讨论】：

【解决方案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);

【讨论】：