Bundle dependent javascript files without require using webpack

Question

I am not sure if it is possible or not. I have a bunch of javascript files, all are dependent on each other.

I want to bundle all of them but I can't add require and module.exports in every file since they are so many files.

So my question is, can I bundle all these files while keeping the dependencies intact.

This is how my HTML looks like:

<!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>

in the above code script tag order is important since files are dependent on each other. Can I bundle all these files into one without making any change into the current js files?

Warning Loading multiple versions of jQuery will cause them to overwrite each other, often wiping out plugins and breaking things. Use only one version of jQuery. — Quentin
– Quentin, Commented Sep 25, 2020 at 9:42
Danger jQuery 1.x and 2.x are both beyond end of life and aren't supported, even for security updates. Upgrade to a supported version of jQuery. — Quentin
– Quentin, Commented Sep 25, 2020 at 9:43
Thanks for the suggestion. This is some opensource tool that I am using to build something. Not sure why they did this. But I will improve this code as I move forward. — Zainul Abideen
– Zainul Abideen, Commented Sep 25, 2020 at 9:44

Quentin · Accepted Answer · 2020-09-25 09:51:37Z

1

If the JS is written to certain standards, you can just combine them into to a single file with simple concatenation (e.g. with the standard unix tool [cat].)

This is quite fragile though, since semicolon insertion rules can break things when you just stick two JS files together.

e.g. if you have a couple of files that use IIFEs to scope variables, then putting them next to each other will cause the parenthesis around the second to act as a function call containing arguments for the first.

So you need a tool to do this. Last time I had cause to build a system in JS that didn't use Node.js or ES6 modules I used UglifyJS which can take care of that problem (while also shrinking the file size of the JS).

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

answered Sep 25, 2020 at 9:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bundle dependent javascript files without require using webpack

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related