捆绑依赖的 javascript 文件而不需要使用 webpack答案

【问题标题】：Bundle dependent javascript files without require using webpack捆绑依赖的 javascript 文件而不需要使用 webpack
【发布时间】：2021-01-11 15:25:16
【问题描述】：

我不确定这是否可能。我有一堆 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 文件进行任何更改吗？

【问题讨论】：

警告加载多个版本的 jQuery 会导致它们相互覆盖，经常会清除插件和破坏东西。只使用一种版本的 jQuery。
危险 jQuery 1.x 和 2.x 都已过期且不受支持，即使是安全更新也是如此。升级到受支持的 jQuery 版本。
感谢您的建议。这是我用来构建某些东西的一些开源工具。不知道他们为什么这样做。但随着我的进步，我会改进这段代码。

标签： javascript webpack bundle

【解决方案1】：

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

不过这很脆弱，因为 semicolon insertion rules 可以在您将两个 JS 文件粘贴在一起时破坏事情。

例如如果您有几个使用 IIFE 来确定变量范围的文件，那么将它们彼此相邻放置将导致第二个文件周围的括号充当包含第一个参数的函数调用。

所以你需要一个工具来做到这一点。上次我有理由在 JS 中构建一个不使用 Node.js 或 ES6 模块的系统时，我使用了UglifyJS，它可以解决这个问题（同时也缩小了 JS 的文件大小）。

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

【讨论】：