Как связать каждый внешний и встроенный скрипт JS в файл HTML - PullRequest
Новая
       11

Как связать каждый внешний и встроенный скрипт JS в файл HTML

1 голос
/ 09 января 2020

В настоящее время у меня есть проект, который имеет сотни внешних и встроенных 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?

Примечание. Веб-пакет и т. П. Имеют точку входа javascript, поэтому мне придется перечислять каждый файл как точку входа, о которой не может быть и речи.

Ответы [ 2 ]

0 голосов
/ 09 января 2020 
// 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);
0 голосов
/ 09 января 2020

Вы можете иметь один 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>
...