Combine Multiple JavaScript Files into One Js File

Combine multiple JavaScript files into one JS file

On linux you can use simple shell script https://github.com/dfsq/compressJS.sh to combine multiple javascript files into the single one. It makes use of the Closure Compiler online service so the resulting script is also effectively compressed.

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js

Merge all javascript files to one file

grunt-usemin (- https://github.com/yeoman/grunt-usemin) could help.

How to combine multiple javascript files to 1 file using node.js

I have found a way to solve my Problem by my self,

    var fs = require("fs");

const codes = ["M:/HTML-Projekte/ChabanicSouls/original_Codes/chaVar.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaSocket.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaChat.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaVarMain.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaField.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaFriends.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaArchive.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaMain.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaTimer.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaActions.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaFight.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaKeys.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaLvUp.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaMarket.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaMove.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaNextPl.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaParaUp.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaSoul.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaGetFunc.js",
    "M:/HTML-Projekte/ChabanicSouls/original_Codes/chaStart.js"];


function readIt() {
    let combined = [];
    let doneCheck = [];
    let errVal = false;
    for (let x = 0; x < codes.length; x++) {
        doneCheck.push(false);
    }
    for (let x = 0; x < codes.length; x++) {
        fs.readFile(codes[x], "UTF-8", function (err, data) {
            if (err || !data) {
                console.log(codes[x]);
            } else {
                combined.push(data);
                doneCheck[x] = true;
            }
            if (x == (codes.length - 1)) {
                saveIt(combined, doneCheck);
            }
        });
    }
}
function saveIt(combined, doneCheck, round = 0) {
    let counter = 0;
    for (let x = 0; x < doneCheck.length; x++) {
        if (doneCheck[x] == false) {
            fs.readFile(codes[x], "UTF-8", function (err, data) {
                if (err || !data) {
                    console.log(codes[x]);
                } else {
                    combined.push(data);
                    doneCheck[x] = true;
                }
                if (x == (codes.length - 1)) {
                    return saveIt(combined, doneCheck, round);
                }
            });
        } else {
            counter++;
        }
    }
    if (counter < doneCheck.length) {
        return false;
    }
    let combined_string = "";
    for (let y = 0; y < combined.length; y++) {
        combined_string = combined_string + combined[y] + " ";
    }
    fs.writeFile('M:/HTML-Projekte/ChabanicSouls/ugly.js', combined_string, function (err) {
        if (err) {
            return readIt();
        }

        console.log("The file was saved!");
    });
}

readIt();

This way works perfectly :-)

Tool to combine multiple javascript files into one...

For PHP, try Minify: http://code.google.com/p/minify/

From the docs:

Minify is a PHP5 app that helps you
follow several of Yahoo!'s Rules for
High Performance Web Sites.

It combines multiple CSS or Javascript
files, removes unnecessary whitespace
and comments, and serves them with
gzip encoding and optimal client-side
cache headers.

Merging requirejs and plain js file together

This is an interesting question, since there are a bunch of potential solutions that span a few eras and philosophies in JavaScript and Web development. I'll talk about about the easiest and oldest, file concatenation, and briefly touch upon RequireJS, and more modern approaches of using dedicated web bundlers. There's also the unstated, underlying assumption of why you feel you need to bundle it-- there might be some assumptions of file loading which might not be true, particularly with HTTP/2.

The Quick Way

If you want something quick, easy, and old school, you can just combine (concatenate) all of your JavaScript files together. That's essentially what's happening in your initial web page: the browser downloads all of the JavaScript files and runs them in order.

To concatenate using Unix/Linux/OS X:

cat path/to/ace.js  <(echo) \
  path/to/ext-language_tools.js  <(echo) \
  path/to/mode-mongo.js  <(echo) \
  path/to/playground.js \
  > path/to/bundle.js

(You can combine them all on one line if you remove the \s. You can also omit the <(echo) if you know the file ends with a new line)

Alternatively, you can manually copy and paste the files into one big file.

The RequireJS Way

It bears mentioning the RequireJS way of doing things, that uses require statements, since that's the philosophy that ace.js is developed under. Using this philosophy, files are intended to stay separated as modules and are loaded as needed. Other answers explain this approach in more detail, though I'll add that bundling doesn't seem to be the idiomatic way to use RequireJS-- the library originally intended (though doesn't require) modules to be split into different files.

The Web Bundler Way

In recent years, people have adopted web bundlers-- like webpack, parcel, rollup, and more -- to manage multiple files and dependencies. These tools are intended to output a single web bundle and have a lot of nice, customizable features for that. They might need a bit of work to get up and running, and need to use a CommonJS plugin to get require working. For instance, see here to get ace working with webpack.

Do you need to bundle?

Depending on your concerns and situation, bundling might not need be an optimization you need. Historically, bundling was used as a way to minimize network requests, since the number of network connections was limited, and sometimes files requested other files, leading to loading in serial. Many of these concerns were addressed with HTTP/2. Just make sure that your web server supports HTTP/2 and that you're serving all the files on that server. For more information about this, see this question. You probably care most of how it operates in practice, so you'd probably want to benchmark it either way, but you might not be gaining much.

---

Related Topics