How can I concatenate JavaScript objects to a single file to send to the server?

Question

I have about 20 JS object as such ...

obj.1.js
obj.2.js

all of which are well formed and complete a single task. I have been using grunt-concat to create a single file called ...

monster.js

but I have to have an open object and a close object to put them in an IIFE for privacy and global non pollution.

// open
(function(){

// monster.js goes here

// close
})();

My whole method seems kind of flakey.

What is the proper way to send a group of objects to the client?

I want to send all of them at once as they are all needed.

There has to be a de-facto way to do this...

In the end I'd like to just use a script tag to load them ...

<script src="path_to_monster.js"> </script>

Thanks

Answer 1

我认为您可以使用Gulp创建一个可靠的js文件并调用您的项目

Answer 2

Concatenating JS source files with proper prefix and suffix strings is adequate, at least to start. But it's not much of a module system. As your project grows more complex, typically you would add a "packaging manager" or "module bundler" such as Browserify , webpack , or rollup.js .

They are more complex to set up, but do much more complete and sophisticated packaging, including

• translating modern module import statements (of which JS has quite a few divergent flavors, including node.js- aka CommonJS-style require() and ES2015 modules ),
• bundling in other kinds of assets (CSS, inline images, ...),
• optionally running preprocessing steps (eg to convert CoffeeScript or Typescript to pure Javascript, or running Babel.js to convert modern JS to more primitive JS that will run easily in old browsers), and
• helping to manage asset minification, optimization, and other go-to-deployment processes.

If you are looking for one of these to start with, Browserify is IMO the simplest. However, once you've looked at the setups required for any of them, you may decide that quick-and-dirty concatenation-and-wrap will suit you a while longer. The learning curve for a module bundler, and the amount of other ecosystem components they drag in...the startup cost and complexity can be daunting.

Answer 3

You have about 20 JavaScript objects, which is fine. It is likely that they are not 100% decoupled. If there are interdependencies, there is little potential value in placing these objects in separate source files. You stated that each performs a single task. Even so, there may be temporal prerequisites that couple their use from a pracical standpoint. A cgi-bin script containing the following or a PHP/Python/C++/Perl equivalent can create the concatenation on the fly.

#! /bin/bash
echo 'Content-type: application/javascript'
echo
cat ../js/obj*.js

However, most shared hosting servers today have caching (such as Varnish, Nginx, or Apache) that render useless any potential benefits of such concatenation.

Regarding whether your method is flaky, I recommend you use less subjective quality criteria:

1. Easily comprehensible
2. Easily extended or modified
3. CPU thrifty
4. Memory thrifty
5. Network thrifty

(If an approach to JavaScript delivery, load, and execution do well with 3, 4, and 5, they will likely support fast page loads.)

There is no universal answer to, "What is the proper way to send a group of objects to the client?" A masterful goal would be to find the option with the proper balance between above five objective criteria for the given situation.

It is impossible, "to send all of them at once," and also send them, "as they are all needed." You have to decide whether to load them with static links or dynamically on an as-needed basis. That too is a balancing act between 1 through 5 above too.

You stated, "There has to be a de-facto way to do this," but there is not. There are dozens of approaches and each has a set of conditions for which it is optimal.

If you use '' as you last stated, then you will have to create the aggregate every time you change one of the single JavaScript files or concatenate on the fly, and you will be passing the entire payload over the network when, under some conditions, you may only need a small number of the individual files in the given web document.

These are the basic principles.

---

NOTE IN RESPONSE TO COMMENT: Don't call it monster.js. Call it monster.cgi, put the bash script above in it, place it in your cgi-bin directory, and do a chmod 755 monster.cgi to make it executable. Put the JavaScript in a folder called js next to your cgi-bin directory. Then put ' in your HTML header.