Collect each module into one .js file

Question

I want to minimize the number of HTTP requests from the client for downloading scripts in the browser. This will be a fairly general question, but I still hope that I can get answers to some questions, because managing the module in javascript has hurt so far.

Current situation

Right now, in development, each module is requested separately from the main html template, for example:

<script src="/libraries/jquery.js"></script> <script src="/controllers/controllername.js"></script> ... 

The server runs on Node.js and sends scripts as they are requested.

Obviously, this is the least optimal way to do this, since all models, collections, etc. also divided into their own files, which translates into many different requests.

Regarding research

The libraries I came across (RequireJS using AMD and CommonJS) can request modules from the main .js file sent to the client, but require a lot of additional work to make each module correspond to each library:

 ;(function(factory){ if (typeof define === 'function' && define.amd) define([], factory); else factory(); }(function(){ // Module code exports = moduleName; })); 

My goal

I would like to create a single file on the server that combines all the modules together. If I can do this without adding more code to existing modules that would be ideal. Then I can simply transfer this single file to the client when it is requested.

Is it possible?

Also, if I manage to create one file, should I include open source libraries (jQuery, Angular.js, etc.) or request them from an external cdn on the client side?

Answer 1

What you are asking to do, from what I can say, is to consulate your js files into a single file, and then in your main.html you will have this

 <script src="/pathLocation/allMyJSFiles.js"></script> 

If my assumption is correct, then the answer will be to use one of the following two elements

GULP link or GRUNT link

I am using GULP .

You can use gulp on a case-by-case basis, which means calling gulp from the command line to execute gulp code, or using the clock to do this automatically when saving.

In addition, in order for gulp to work and including gulp files, you need to do what you need, I will only talk a little about what I use to get your answer.

In my gulp file, I would have something like this

 var gulp = require('gulp'); var concat = require('gulp-concat'); ...maybe more. 

Then I have file paths that I need to merge into a single file.

 var onlyProductionJS = [ 'public/application.js', 'public/directives/**/*.js', 'public/controllers/**/*.js', 'public/factories/**/*.js', 'public/filters/**/*.js', 'public/services/**/*.js', 'public/routes.js' ]; 

and I use this information in the gulp task as shown below

 gulp.task('makeOneFileToRuleThemAll', function(){ return gulp.src(onlyProductionJS) .pipe(concat('weHaveTheRing.js')) .pipe(gulp.dest('public/')); }); 

Then I run the task on my command line, calling

 gulp makeOneFileToRuleThemAll 

This call launches a gulp related task that uses 'gulp -concat' to collect all the files into one new file called 'weHaveTheRing.js' and creates this file in the target 'public /'

Then just add this new file to main.html

 <script src="/pathLocation/weHaveTheRing.js"></script> 

As for including all of your files in a single file, including your vendor's files, just make sure your vendor code works first. Most likely, it is better to leave them separately if you don’t have the right way to get your supplier’s code to download without any problems.

UPDATE

Here is my gulp task.

 gulp.task('startTheWatchingEye', function () { gulp.watch(productionScripts, ['makeOneFileToRuleThemAll']); }); 

Then I start my server like this (yours may be different)

 npm start // in a different terminal window I then type gulp startTheWatchfuleye 

NOTE: you can use ANY movie or show the link you want! :)

Now just copy it, every time you make changes to the specified files, GULP will run your tasks.

If you want to say launch Karma for your test runner ...

add the following to your gulp file

 var karma = require('karma').server; gulp.task('karma', function(done){ karma.start({ configFile: __dirname + '/karma.conf.js' }, done); }); 

Then add this karma task to your watch, which I outlined above, like this ...

 gulp.task('startTheWatchingEye', function(){ gulp.watch(productionScripts, ['makeOneFileToRuleThemAll', 'karma']); }); 

also

Your specific settings may require a few more gulp modules. Usually you install gulp globally as well as each module. Then use them in your various projects. Just make sure your package.json project has the gulp modules you need in dev or something else.

There are various articles on whether to use gulp or Grunt. gulp was made after Grunt with a few add-ons that Grunt lacked. I don’t know if that’s enough for them. I like gulp a lot and I find it very useful with lots of documentation.

Good luck

Answer 2

I would like to create a single file on the server that combines all the modules together. If I can do this without adding more code to existing modules that would be ideal.

Sure. You can use Grunt or Gulp for this, more specifically grunt-contrib-concat or gulp-concat

Here is an example configuration of Gruntfile.js for matching each file in the js directory:

 grunt.initConfig({ concat: { dist: { files: { 'dist/built.js': ['js/**/**.js'], }, }, }, }); 

In addition, you can minimize everything after concatenation using grunt-contrib-minify .

Both libraries support source maps , so if an error occurs in the process, you can easily debug it.

You can also minimize your HTML files with grunt-contrib-htmlmin .

---

There is also a very useful library called grunt-usemin . Usemin allows you to use HTML comments to “control” which files get because of a minimum (so you don’t need to manually add them).

The disadvantage is that you must explicitly include them in your HTML using script tags, therefore, without asynchronous loading via javascript (e.g. with RequJS).

---

Also, if I manage to create one file, should I include open source libraries (jQuery, Angular.js, etc.) or request them from an external cdn on the client side?

This is debatable. Both have pros and cons. The vendor pool ensures that if, for whatever reason, the CDN is not available, your page works as intended. However, the file you submit is larger, so you consume more bandwidth.

In my personal experience, I tend to include libraries of providers that are absolutely necessary for launching a page, for example, for AngularJS.

Answer 3

If you understand correctly, you can use a task runner like Grunt to merge files for you.

Check out the Grunt Concat plugin .

Example configuration from documents:

 // Project configuration. grunt.initConfig({ concat: { dist: { src: ['src/intro.js', 'src/project.js', 'src/outro.js'], dest: 'dist/built.js', } } }); 

Otherwise, as you stated, a “module loader” system, such as Requiring JS or Browserify, may be a way.