捆绑依赖的javascript文件，无需使用webpack

如何解决捆绑依赖的javascript文件，无需使用webpack

我不确定是否可行。我有一堆JavaScript文件，它们都相互依赖。

我想捆绑所有文件，但是由于每个文件太多，因此无法在每个文件中添加require和module.exports。

所以我的问题是，我可以捆绑所有这些文件，同时保持完整的依赖性吗。

这是我的HTML外观：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
    <Meta http-equiv="Expires" content="3600">
    <Meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico"/>
    <Meta
            name="viewport"
            content="width=device-width,initial-scale=1,shrink-to-fit=no"
    />
    <Meta name="theme-color" content="#000000"/>
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>3D BAT</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/w2ui-1.5.rc1.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/jspanel.css" rel="stylesheet" type="text/css">
    <script src="js/lib/three.js"></script>
    <script src="js/lib/controls/MapControls.js"></script>
    <script type="text/javascript" src="js/lib/renderer/CSS2DRenderer.js"></script>
    <script src="js/lib/jquery-2.2.4.min.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <script src="js/lib/raphael.js"></script>
    <script src="js/lib/Toast.js"></script>
    <script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/lib/WebGL.js"></script>

    <link href="css/main.css" rel="stylesheet">
    <link href="css/label_tool.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="wrapper">
    <div id="label-tool-wrapper"></div>

    <script src="js/lib/controls/threex.keyboardstate.js"></script>
    <script src="js/lib/SceneUtils.js"></script>
    <script src="js/lib/PCDLoader.js"></script>
    <script src="js/lib/OBJLoader.js"></script>

    <script src="js/lib/controls/OrbitControls.js"></script>
    <script src="js/lib/controls/TransformControls.js"></script>
    <script src='js/lib/controls/PointerLockControls.js'></script>
    <script src='js/lib/controls/KeyboardState.js'></script>
    <script src="js/lib/controls/threex.keyboardstate.js"></script>
    <script src="js/lib/Detector.js"></script>
    <script src="js/lib/stats.min.js"></script>
    <script src='js/lib/dat.gui.js'></script>
    <script src='js/lib/Projector.js'></script>
    <script type="text/javascript" src="node_modules/jszip/dist/jszip.js"></script>
    <script type="text/javascript" src="node_modules/file-saver/dist/FileSaver.js"></script>
    <script src="js/lib/html2canvas.js?ver=1.0"></script>
    <script src="js/lib/base64-binary.js?ver=1.0"></script>
    <script src="js/util/math.js?ver=1.0"></script>
    <script src='js/util/classesBoundingBox.js?ver=1.0'></script>
    <script src='js/util/boundingBox.js?ver=1.0'></script>
    <script src='js/base_label_tool.js?ver=1.0'></script>
    <script src='js/pcd_label_tool.js?ver=1.0'></script>
    <script src="js/image_label_tool.js?ver=1.0"></script>
    <script src='js/util/ajax_wrapper.js?ver=1.0'></script>
    <script src='js/lib/w2ui-1.5.rc1.min.js?ver=1.0'></script>
    <script src="node_modules/dragscroll/dragscroll.js"></script>
</div>
<div class="frame-selector">
    <div class="current">1/900</div>
    <div class="list-wrapper">
        <div class="frame-selector__frames"></div>
    </div>
</div>
<img id="left-btn" src="assets/textures/left.png" onClick="labelTool.prevIoUsFrame()" alt="left"/>
<img id="right-btn" src="assets/textures/right.png" onClick="labelTool.nextFrame()" alt="right"/>
<div id="time-elapsed"></div>
<ul class="toasts"></ul>
</body>
<script type="text/javascript">
    labelTool.start();
</script>
</html>

上面的代码脚本标记顺序中的

很重要，因为文件是相互依赖的。我可以将所有这些文件捆绑为一个，而无需对当前js文件进行任何更改吗？

解决方法

如果JS是按照某些标准编写的，则可以通过简单的串联（例如，使用the standard unix tool [cat]将它们组合成一个文件）。

但这非常脆弱，因为当您将两个JS文件粘贴在一起时，semicolon insertion rules可能会破坏事情。

例如如果您有几个使用IIFE来限定变量范围的文件，那么将它们并排放置将导致第二个括号用作为包含第一个参数的函数调用。

因此，您需要一个工具来执行此操作。上次我有理由在JS中构建一个不使用Node.js或ES6模块的系统，我使用了UglifyJS来解决这个问题（同时缩小JS的文件大小）。>

uglifyjs input.js other-input.js more-input.js --output combined.js -c