Last active
December 15, 2015 14:29
-
-
Save elijahmanor/5275285 to your computer and use it in GitHub Desktop.
Angry Birds of JavaScript: Yellow Bird - RequireJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="utf-8"> | |
| <title>Angry Birds</title> | |
| <link rel="stylesheet" href="./css/style.css"> | |
| </head> | |
| <body> | |
| <script src="./libs/jquery.min.js"></script> | |
| <script src="./libs/postal.min.js"></script> | |
| <script src="./libs/underscore.min.js"></script> | |
| <script> | |
| var channel = postal.channel(); | |
| channel.subscribe( "pig.collide", function() { | |
| console.log( "Pig Down!" ); | |
| }); | |
| channel.publish( "pig.collide" ); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| appDir: ".", // The main root URL | |
| dir: "../dist", // Directory that we build to | |
| mainConfigFile: "main.js", // Location of main.js | |
| name: "main", // Name of the module that we are loading | |
| optimizeCss: "standard", // Standard optimization for CSS | |
| removeCombined: true, // Temporary combined files will be removed | |
| paths : { | |
| "jquery": "libs/jquery.min", | |
| "underscore": "libs/underscore.min", | |
| "postal": "libs/postal.min" | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // File Name: my-first-module.js | |
| // The name of the module defaults to the name of the file by convention | |
| define( | |
| [ "underscore", "jquery" ], // Array of dependencies needed for this module | |
| function( _, $ ) { // Callback with parameters matching dependencies requested | |
| // Underscore and jQuery have both been loaded and are available for use with | |
| // the `_` & `$` variables | |
| return { // This will be available in callback of whoever requires this module | |
| message: "Hello World!" | |
| }; | |
| } | |
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* main.js */ | |
| // Let RequireJS know where all the scripts are | |
| require.config({ | |
| paths: { | |
| "jquery": "../libs/jquery.min", | |
| "underscore": "../libs/underscore.min", | |
| "postal": "../libs/postal.min" | |
| }, | |
| shim: { | |
| // Underscore.js doesn't know about AMD, so you have to shim it | |
| underscore: { | |
| exports: "_" | |
| } | |
| } | |
| }); | |
| // The postal.js library internally defined that it needs the underscore library | |
| // so RequireJS will load postal, which in turn will load its underscore | |
| require([ "postal" ], function( postal ) { | |
| var channel = postal.channel(); | |
| channel.subscribe( "pig.collide", function() { | |
| console.log( "Pig Down!" ); | |
| }); | |
| channel.publish( "pig.collide" ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ r.js -o build.js | |
| Optimizing (standard) CSS file: C:/Users/Elijah/Desktop/demo/dist/css/style.css | |
| Tracing dependencies for: main | |
| Uglifying file: C:/Users/Elijah/Desktop/demo/dist/build.js | |
| Uglifying file: C:/Users/Elijah/Desktop/demo/dist/libs/jquery.min.js | |
| Uglifying file: C:/Users/Elijah/Desktop/demo/dist/libs/postal.min.js | |
| Uglifying file: C:/Users/Elijah/Desktop/demo/dist/libs/require.min.js | |
| Uglifying file: C:/Users/Elijah/Desktop/demo/dist/libs/underscore.min.js | |
| Uglifying file: C:/Users/Elijah/Desktop/demo/dist/main.js | |
| Uglifying file: C:/Users/Elijah/Desktop/demo/dist/r.js | |
| css/style.css | |
| ---------------- | |
| css/style.css | |
| C:/Users/Elijah/Desktop/demo/src/main.js | |
| ---------------- | |
| C:/Users/Elijah/Desktop/demo/src/main.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| require( | |
| [ "my-first-module" ], // Array of dependencies that are needed | |
| function( firstModule ) { // Callback with parameters matching dependencies | |
| console.log( firstModule.message ); | |
| } | |
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="utf-8"> | |
| <title>Angry Birds</title> | |
| <link rel="stylesheet" href="./css/style.css"> | |
| </head> | |
| <body> | |
| <!-- | |
| You'll notice that the markup is cleaned up dramatically | |
| The data-main HTML5 attribute defines where to kick things off | |
| --> | |
| <script src="./libs/require.min.js" data-main="./js/main"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment