Downloaded 30 times
![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)
![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/75/Modular-JavaScript-with-CommonJS-Compiler-36-2048.jpg)
Uploaded byDmitry Sheiko
Modular JavaScript with CommonJS Compiler
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.
Modular JavaScript with CommonJS Compiler
- 1.
- 2. separates the functionalityof a program into independent modules MODULARPROGRAMMING
- 3. encapsulates everything requiredto implement a single aspect of the desired functionality MODULE
- 4.
- 5.
- 6.
- 7. MODULEPATTERN var bar = (function(){ //Functionality return exportObj; }()), foo = (function( bar ){ // Functionality }( bar ));
- 8.
- 10.
- 12.
- 13. AMDIMPROVESPERFORMANCEOF WEBAPPLICATIONby bypassing module loadingalong with the rest of the page content
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. EXAMPLE1 `foo.js`: console.log( "foo.js: HelloWorld" ); `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 onemodule 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 anexported 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 thatloading a module URL multiple times results in a single cached instance.
- 29. EXAMPLE4 `foo.tpl`: Lorem ipsum dolorsit amet, Lorem ipsum dolor sit amet `bar.js`: var tpl = require( "./foo.tpl" ); console.log( "foo:" + tpl );
- 30. EXAMPLE4 Outputof `build.js`: foo: Loremipsum dolor sit amet, Lorem ipsum dolor sit amet
- 31. WHATHAVEWEJUSTDONE? We found outthat 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`: varmustache = require( "./mustache" ), tpl = require( "./foo.tpl" ), view = { title: "Joe", calc: function () { return 2 + 4;}}; console.log( mustache.render( tpl, view ) );
- 33.
- 34. WHATHAVEWEJUSTDONE? We leveraged loadingof 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 ustwo 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.
- 42.
- 43.