Merge Multiple Javascript code in one JS file-CodePudding

i have 3 javascript code and i want to merge them all in one .js file and then include in my website

Code 1 :

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51600756-89"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-51600756-89');
</script>

Code 2 :

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/" i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "9zvbjor3cz");
</script>

Code 3 :

<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/61d019a4c82c976b71c45176/1foae9bkb';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>

I have added all three code into one file merge.js by removing <script> tag.

Merge Code (merge.js) :

// Global site tag (gtag.js) - Google Analytics
async src="https://www.googletagmanager.com/gtag/js?id=UA-51600756-89";

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-51600756-89');


// Microsoft Clarity

    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/" i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "9zvbjor3cz");



//Start of Tawk.to Script

var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/61d019a4c82c976b71c45176/1foae9bkb';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();

Then adding it to my website :

<script type="text/javascript" src="merge.js"></script>

Why this not working?. Sorry, if i am wrong, i am new to coding world :).

CodePudding user response：

Use Webpack.

Example:

Suppose that you have a JS file called adding.js

function subtracting(x, y) {
    return x - y;
}

module.exports = subtracting;

Another JS file called subtracting.js

function subtracting(x, y) {
    return x - y;
}

module.exports = subtracting;

And a main.js file which calls the above two files.

var adding = require('./adding');
var subtracting = require('./subtracting');

console.log("Adding: "   adding(3, 2));
console.log("Subtracting: "   subtracting(3, 2));

Now, using Webpack you can compile the main.js file into a bundle.js file like below.

webpack main.js bundle.js

Now you only need to import that bundle.js in you code. example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

CodePudding user response：

Guide : https://www.geeksforgeeks.org/how-to-include-a-javascript-file-in-another-javascript-file/

Solution :

function include(file) {
  
  var script  = document.createElement('script');
  script.src  = file;
  script.type = 'text/javascript';
  script.defer = true;
  
  document.getElementsByTagName('head').item(0).appendChild(script);
  
}
  
/* Include Many js files */
include('https://example.com/example.js');
include('https://example.com/example2.js');