無需使用 webpack 即可捆綁依賴的 javascript 文件

Question

我不確定這是否可能。 我有一堆 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 文件進行任何更改嗎？

Answer 1

如果 JS 是按照某些標准編寫的，您可以通過簡單的連接將它們組合成一個文件（例如，使用標准的 unix 工具 [ cat ] 。）

但是，這非常脆弱，因為當您將兩個 JS 文件粘在一起時，分號插入規則可能會破壞事情。

例如，如果您有幾個文件使用 IIFE 來限定變量的范圍，那么將它們放在一起會導致第二個周圍的括號充當包含第一個參數的函數調用。

所以你需要一個工具來做到這一點。 上次我有理由在不使用 Node.js 或 ES6 模塊的 JS 中構建系統時，我使用了UglifyJS ，它可以解決這個問題（同時還縮小了 JS 的文件大小）。

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

無需使用 webpack 即可捆綁依賴的 javascript 文件

問題描述

1 個解決方案

解決方案1
1 2020-09-25 09:51:37

無需使用 webpack 即可捆綁依賴的 javascript 文件

問題描述

1 個解決方案

解決方案1 1 2020-09-25 09:51:37

解決方案1
1 2020-09-25 09:51:37