Understanding CommonJS module in Angular Step by Step


This is a small write-up which only touch bases and hovers around only theory, theory and theory of CommonJS. Do not worry we have a surprise at the end of this small write-up which will give more inner learning of the CommonJS topic to the reader.

From past few years JavaScripts components on GIT Hub are increasing like anything and each one of them are fantastic hardly unneglectable. So for a JavaScript developer it is a time consuming process to test one by one and identify out the best suit as per his other component suits to make best mixed-match

Simple one liner for CommonJS

CommonJS is a specification which helps to load modules from one file to other file.

Two JavaScript developers will follow CommonJS specifications in order make their module communicate with each other. In order to make it work practically, one file gets exposed while the other file will be using that exposed file.

Before moving ahead let’s have a shallow-dive in understanding CommonJS. Below we move on for the same.

Goal of CommonJS or why CommonJS came into existence?

"CommonJS" is not something specific to solve technical problem but to bring JavaScript developers together to refer each other module in order to utilize each other’s good part and built their project.

For example there are many good JavaScript readymade modules available on GIT Hub. In order to utilize each other module or each module and build project has become possible because of CommonJS module.

Earlier it was not possible because of unavailability of such provision many thanks to Mr. Kevin Dangoor for the thought process and working on it with which thought process becoming reality. Now with this all JavaScript developersare under one umbrella and today we can use power of JavaScript individual module.

Brief History of CommonJS

"CommonJS" initiative was started back in January 2009 by Kevin Dangoorwhen he was working at Mozilla with name "ServerJS"and later renamed it to "CommonJS"in the same year 2009 in the month of August.

Now it is widely used and well-known between JavaScript developers as CommonJS in Angular.

Keywords used in CommonJS

The two important and used keywords in CommonJS are "exports" and "require". The keyword "exports" will be used in the file which wants to get exposed to the external world. So with that it will get enabled to be readily available to the file who wants it.

Whereas the file who will be consuming those exposed file has to mention "require" keyword in order to make it usable. Below image is such an example where "Module Y" will be used by "Module X" i.e. in other words "Module X" will be consuming "Module Y". Within "Module Y" file we have to mention "exports" keywords while "Module X" has to implement the keyword "require" within "Module X" file.

Unless the "exports" keyword is used consumer or the file which is trying to use or consume it cannot get it.With the use of keywords we can define dependencies between modules.

Please Note: "exports" and "require" are not keyword they are more of CommonJS specification.

So for it sequence would be, whenever compiler goes through the file and if "require" keyword is found. Thenthe compiler understands that exiting file is having dependencies on other file and in order to complete that dependency it will start locating the file in whichit gets corresponding "exports" keyword using the same path which is mentioned next to "require" specification keyword in order to get its job done.

As "exports" and "require" are just specification keyword and they are not JavaScript keyword. Due to that you cannot directly create JavaScript objectsin other words direct implementation is not possible and for that we need something more.

Implementation ofCommonJS

Whenever you wish to implement CommonJS you have to use open source frameworks ES6 module loaders like SystemJS, RequireJS and etc. Module Loaders are the ones who understand how to utilize and use "exports" and "require" keywords thereafter it can create object and load JavaScript files

As promised do not forget to click on the following video link to learn CommonJS with practical code explanation in complete depth :-

+91 9967590707
questpond@questpond.com / questpond@gmail.com