将 javascript 个脚本标签合并为一个

Question

我正在尝试使用 wavesurfer.js，目前有以下内容：

   'use strict'
    <!-- wavesurfer.js -->
    <script src="src/wavesurfer.js"></script>
    <script src="src/util.js"></script>
    <script src="src/webaudio.js"></script>
    <script src="src/mediaelement.js"></script>
    <script src="src/drawer.js"></script>
    <script src="src/drawer.canvas.js"></script>
    <script src="./plugin/wavesurfer.regions.js"></script>
    var wavesurfer = Object.create(WaveSurfer);

这很好用。

我需要将所有这些合并为一个，并使用类似的东西：

<script src="myWavesurfer.js"></script>
var wavesurfer = Object.create(WaveSurfer);

我尝试了以下方法：

var jScripts2Call =
[ '/src/wavesurfer.js',
  '/src/util.js',
  '/src/webaudio.js',
  '/src/mediaelement.js',
  '/src/drawer.js',
  '/src/drawer.canvas.js',
  '/plugin/wavesurfer.regions.js'];
// load all the jScripts
for ( var i=0; i < jScripts2Call.length; i++ )  {
    var script    = document.createElement('script');
    script.src    = jScripts2Call[i];
    script.type   = 'text/javascript';
    script.async  = false;
    var scripts = document.getElementsByTagName('script')[0];
    scripts.parentNode.insertBefore(script, scripts);
};
var wavesurfer = Object.create(WaveSurfer);

但这些脚本不会在我调用 Object.create(WaveSurfer) 之前 "execute"，只有在调用之后。我试过使用 jquery:

$( document ).ready( function() {
  var wavesurfer = Object.create(WaveSurfer);
})

我也尝试了 jQuery(dot)getScript() ，它似乎只加载了第一个脚本。我使用 jQuery(dot)ajax() 时运气好一点，但我还是无法在 Object.create(WaveSurfer) 调用之前加载和执行脚本。

看起来 gulp-concat 可能是可行的方法，但我希望有更简单的方法。

一如既往，我们非常感谢您的帮助。想法？

Answer 1

您需要使用加载事件而不是就绪事件。当所有 html 标签本身完成加载时，而不是其他文件完成时，就绪触发。使用 jquery，你可以这样做：

$( window ).load( function() {
  var wavesurfer = Object.create(WaveSurfer);
})

或者使用常规 js（因为你并不真的需要 jquery）：

window.onload = function() {
  var wavesurfer = Object.create(WaveSurfer);
}

将 javascript 个脚本标签合并为一个

consolidating javascript script tags into one

javascript

jquery

gulp