Modular JavaScript with CommonJS Compiler
5 likes2,510 views
The document discusses the CommonJS Compiler (cjsc) and its modular programming approach in JavaScript, emphasizing the benefits of breaking complex problems into independent modules. It explains the functionality, installation, and examples of using cjsc to compile JavaScript modules, access exported objects, and handle non-JavaScript resources. Additionally, it covers debugging, source maps, and build automation with Grunt, highlighting options for development and production builds.
![RUN-TIMECONFIGURATION
JSONconfigurationsyntax:
{
"<dependency-name>": {
"path": "<dependency-path>",
"globalProperty": "<global-property>",
exports: [ "<variable>", "<variable>" ],
require: [ "<dependency-name>", "<dependency-name>" ]
}
}](https://image.slidesharecdn.com/modularjavascriptwithcommonjscompiler-140407040711-phpapp02/85/Modular-JavaScript-with-CommonJS-Compiler-36-320.jpg)
Modular JavaScript with CommonJS Compiler
- 2. separates the functionality of a program into independent modules MODULARPROGRAMMING
- 3. encapsulates everything required to implement a single aspect of the desired functionality MODULE
- 7. MODULEPATTERN var bar = (function(){ // Functionality return exportObj; }()), foo = (function( bar ){ // Functionality }( bar ));
- 10. HOWABOUTTHIS?
- 13. AMDIMPROVESPERFORMANCEOF WEBAPPLICATIONby bypassing module loading along with the rest of the page content
- 19. INSTALLINGCOMMONJSCOMPILER $sudo npm i cjsc -g
- 20. EXAMPLE1 `foo.js`: console.log( "foo.js: Hello World" ); `bar.js`: require( "./foo" ); console.log( "bar.js: Hello World" );
- 21. EXAMPLE1 Compiling`bar.js`: $cjsc bar.js build.js Outputof `build.js`: foo.js: Hello World bar.js: Hello World
- 22. WHATHAVEWEJUSTDONE? We loaded one module in another. Both are executed in the compiled code
- 23. EXAMPLE2 `foo.js`: var privateState = “lorem“; module.exports = { name: "foo.js" }; `bar.js`: console.log( require( "./foo" ) ); console.log(“privateState:" + typeof privateState );
- 24. EXAMPLE2 Outputof `build.js`: { name: "foo.js" } privateState: undefined
- 25. WHATHAVEWEJUSTDONE? We accessed an exported object and made certain that private state isn't available outside the module.
- 26. EXAMPLE3 `foo.js`: console.log( "foo.js: constructing" ); module.exports = { name: "foo.js" }; `bar.js`: console.log( require( "./foo" ) ); console.log( require( "./foo" ) );
- 27. EXAMPLE3 Outputof `build.js`: foo.js: constructing { name: "foo.js" } { name: "foo.js" }
- 28. WHATHAVEWEJUSTDONE? We checked that loading a module URL multiple times results in a single cached instance.
- 29. EXAMPLE4 `foo.tpl`: Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet `bar.js`: var tpl = require( "./foo.tpl" ); console.log( "foo:" + tpl );
- 30. EXAMPLE4 Outputof `build.js`: foo: Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet
- 31. WHATHAVEWEJUSTDONE? We found out that while resolving module dependencies CommonJS Compiler exports any content of non-JavaScript or JSON syntax as a string.
- 32. EXAMPLE5 `foo.tpl`: {{title}} spends {{calc}} `bar.js`: var mustache = require( "./mustache" ), tpl = require( "./foo.tpl" ), view = { title: "Joe", calc: function () { return 2 + 4;}}; console.log( mustache.render( tpl, view ) );
- 34. WHATHAVEWEJUSTDONE? We leveraged loading of plain text resource to obtain a template for further use with a template engine (mustache.js).
- 35. DEBUGGINGCOMPILEDCODE Generatingsourcemap: $cjsc bar.js build.js --source-map=build.js.map JavaScriptconsolereferstooriginalsources:
- 36. RUN-TIMECONFIGURATION JSONconfigurationsyntax: { "<dependency-name>": { "path": "<dependency-path>", "globalProperty": "<global-property>", exports: [ "<variable>", "<variable>" ], require: [ "<dependency-name>", "<dependency-name>" ] } }
- 37. RUN-TIMECONFIGURATIONEXAMPLE { "jQuery": { "globalProperty": "jQuery" }, "plugin": { "path": "./config/vendors/jquery.plugin.js", "require": "jQuery", "exports": "jQuery" } }
- 38. ENABLINGCONFIGURATION $cjsc foo.js build.js --config=config.json
- 39. BUILDAUTOMATIONWITHGRUNT Gruntfile.js: grunt.loadNpmTasks( "grunt-contrib-cjsc" ); grunt.initConfig({ cjsc:{ debug: { options: { sourceMap: "./wwwroot/build/js/*.map", config: { "backbone": { "path": "./wwwroot/vendors/backbone/backbone" }}}, files: { "./wwwroot/build/js/app.js": "./wwwroot/js/app.js" }},
- 40. BUILDAUTOMATIONWITHGRUNT Gruntfile.js: build: { options: { minify: true, banner: "/* License */", config: { "backbone": { "path": "path": "./wwwroot/vendors/backbone/backbone" }}}, files: { "./wwwroot/build/js/app.js": "./wwwroot/js/app.js" }}}
- 41. BUILDAUTOMATIONWITHGRUNT It gives us two options: cjsc:debug and cjsc:build. The first one we run during development; it provides source maps for debugging and doesn't compress output. The second option we use when preparing production build.