在一个JS文件中合并多个Javascript代码

Question

我有 3 个 javascript 代码，我想将它们全部合并到 one.js 文件中，然后包含在我的网站中

代码 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>

代码 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>

代码 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>

我通过删除<script>标记将所有三个代码添加到一个文件merge.js中。

合并代码（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);
})();

然后将其添加到我的网站：

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

为什么这不起作用？ 对不起，如果我错了，我是编码世界的新手:)。

Answer 1

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

解决方案：

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

Answer 2

使用Webpack 。

例子：

假设您有一个名为adding.js的JS 文件

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

module.exports = subtracting;

另一个名为subtracting.js的JS 文件

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

module.exports = subtracting;

还有一个调用上述两个文件的main.js文件。

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

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

现在，使用 Webpack 您可以将bundle.js main.js 。

webpack main.js bundle.js

现在你只需要在你的代码中导入那个bundle.js 。 例子：

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

在一个JS文件中合并多个Javascript代码

问题描述

2 个解决方案

解决方案1
1 2022-01-01 13:10:28

解决方案2
0 2022-01-01 12:12:09

在一个JS文件中合并多个Javascript代码

问题描述

2 个解决方案

解决方案1 1 2022-01-01 13:10:28

解决方案2 0 2022-01-01 12:12:09

解决方案1
1 2022-01-01 13:10:28

解决方案2
0 2022-01-01 12:12:09