Skip to content

Commit d272963

Browse files
author
Jonas Bandi
committed
Examples for Modularization
1 parent bc25cac commit d272963

26 files changed

+10247
-0
lines changed

‎04-Toolchain/03-Modularization/Jakefile.js

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
(function () {
2+
"use strict";
3+
4+
var fs = require("fs");
5+
var shell = require("shelljs");
6+
var uglify = require("uglify-js");
7+
var browserify = require("browserify"); // CommonJS
8+
var requirejs = require("requirejs"); // AMD
9+
10+
var lint = require("./build/utils/lint_runner.js");
11+
12+
var DISTRIBUTION_DIR = "dist";
13+
var DISTRIBUTION_VENDOR_DIR = DISTRIBUTION_DIR + "/vendor";
14+
var DISTRIBUTION_CSS_DIR = DISTRIBUTION_DIR + "/css";
15+
16+
var DISTRIBUTION_COMMONJS_DIR = DISTRIBUTION_DIR + "/js-commonjs";
17+
var DISTRIBUTION_AMD_DIR = DISTRIBUTION_DIR + "/js-amd";
18+
19+
desc("Default Build");
20+
task("default", ["clean", "lint", "commonjs", "amd"], function() {
21+
console.log("\n\nOK");
22+
});
23+
24+
desc("Clean");
25+
task("clean", function() {
26+
console.log("* Build Step: Clean");
27+
shell.rm("-rf", DISTRIBUTION_DIR);
28+
})
29+
30+
desc("Lint everything");
31+
task("lint", [], function () {
32+
console.log("* Build Step: Linting");
33+
var passed = lint.validateFileList(javascriptFiles(), browserLintOptions(), browserGlobals());
34+
if (!passed) fail("Lint failed");
35+
});
36+
37+
desc("Build CommonJS example");
38+
task("commonjs", ["lint", "create_package_structure", "commonjs_dist"]);
39+
40+
task("commonjs_clean", [], function() {
41+
shell.rm("-rf", DISTRIBUTION_COMMONJS_DIR + "/*");
42+
shell.cp("-R", "src/js-commonjs/*.html", DISTRIBUTION_COMMONJS_DIR);
43+
shell.cp("-R", "src/js-commonjs/main.js", DISTRIBUTION_COMMONJS_DIR);
44+
});
45+
46+
task("commonjs_dist", ["commonjs_clean"], function() {
47+
console.log("* Build Step: Building CommonJS distribution");
48+
var b = browserify();
49+
b.require("./src/js-commonjs/rating_widget.js",{expose: "./rating_widget.js"} );
50+
b.bundle({ debug: true }, function(err, bundle) {
51+
if (err) fail(err);
52+
fs.writeFileSync(DISTRIBUTION_COMMONJS_DIR + "/bundle.js", bundle);
53+
complete();
54+
});
55+
}, {async: true});
56+
57+
desc("Build AMD example");
58+
task("amd", ["lint", "create_package_structure", "amd_dist"]);
59+
60+
task("amd_clean", [], function() {
61+
shell.rm("-rf", DISTRIBUTION_AMD_DIR + "/*");
62+
shell.cp("-R", "src/js-amd/*.html", DISTRIBUTION_AMD_DIR);
63+
shell.cp("-R", "src/js-amd/main.js", DISTRIBUTION_AMD_DIR);
64+
});
65+
66+
task("amd_dist", ["amd_clean"], function() {
67+
console.log("* Build Step: Building AMD distribution");
68+
var config = {
69+
baseUrl: "src/js-amd",
70+
name: "rating_widget",
71+
out: DISTRIBUTION_AMD_DIR + "/rating_widget.js"
72+
};
73+
requirejs.optimize(config, complete, function(err) {
74+
console.log("AMD fail", err);
75+
fail();
76+
});
77+
}, {async: true});
78+
79+
desc("create package structure");
80+
task("create_package_structure", function(){
81+
shell.mkdir("-p", DISTRIBUTION_DIR);
82+
shell.mkdir("-p", DISTRIBUTION_VENDOR_DIR);
83+
shell.mkdir("-p", DISTRIBUTION_CSS_DIR);
84+
shell.mkdir("-p", DISTRIBUTION_COMMONJS_DIR);
85+
shell.mkdir("-p", DISTRIBUTION_AMD_DIR);
86+
87+
shell.cp('-Rf', 'src/vendor/*', DISTRIBUTION_VENDOR_DIR);
88+
shell.cp('-Rf', 'src/css/*', DISTRIBUTION_CSS_DIR);
89+
})
90+
91+
function javascriptFiles() {
92+
var files = new jake.FileList();
93+
files.include("src/**/*.js");
94+
files.exclude("src/vendor/*.js");
95+
return files.toArray();
96+
}
97+
98+
function globalLintOptions() {
99+
return {
100+
bitwise:true,
101+
curly:false,
102+
eqeqeq:true,
103+
forin:true,
104+
immed:true,
105+
latedef:false,
106+
newcap:true,
107+
noarg:true,
108+
noempty:true,
109+
nonew:true,
110+
regexp:true,
111+
undef:true,
112+
strict:true,
113+
trailing:true
114+
//globalstrict: true
115+
};
116+
}
117+
118+
function browserLintOptions() {
119+
var options = globalLintOptions();
120+
options.browser = true;
121+
return options;
122+
}
123+
124+
function browserGlobals() {
125+
return {
126+
// CommonJS
127+
require: false,
128+
module: false,
129+
exports: false,
130+
131+
// AMD
132+
define: false,
133+
134+
// Jasmine
135+
describe: false,
136+
beforeEach: false,
137+
afterEach: false,
138+
it: false,
139+
expect: false
140+
};
141+
}
142+
143+
}());

‎04-Toolchain/03-Modularization/jake.sh

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
3+
[ ! -f node_modules/.bin/jake ] && npm rebuild
4+
node_modules/.bin/jake $*

‎04-Toolchain/03-Modularization/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "CourseRater",
3+
"description": "A demo project showing modularization",
4+
"author": "Jonas Bandi",
5+
"dependencies": {},
6+
"engine": "node 0.4.1",
7+
"devDependencies": {
8+
"shelljs": ">= 0.2.1",
9+
"uglify-js": "~2.4.0",
10+
"browserify": "~2.29.0",
11+
"jshint": "~2.1.10",
12+
"jake": "~0.6.11",
13+
"requirejs": "~2.1.8"
14+
}
15+
}

‎04-Toolchain/03-Modularization/readme.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Course Rater JavaScript Demo
2+
3+
This demo show three approaches how to modularize JavaScript code:
4+
5+
1. Using the module pattern implemented in plain JavaScript
6+
2. Using CommonJS modules with [Browserify](http://browserify.org/)
7+
3. Using AMD modules with [Require.js](http://requirejs.org/)
8+
9+
## How to build
10+
The second approach (browserify) needs a build step before you can run the example. The third approach (require.js) has an optional build step.
11+
12+
To execute the build you need node and npm, then do the following:
13+
14+
* `npm install` -> this installs all the needed npm packages as specified in package.json
15+
* `.\jake.sh`-> this runs the complete build as specified in Jakefile.js the result is the `dist` directory (sorry there is no Windows script yet...)
16+
17+
18+
## How to run
19+
1. Plain modules: just open `/src/js-namespace/index.html` in your browser
20+
2. CommonJS with browserify: open `/dist/js-commonjs/index.html` in your browser
21+
3. AMD with Require.js:
22+
* Unoptimized: Open `/src/js-amd/index.html` in your browser
23+
* Optimized: Open `/dist/js-amd/index.html` in your browser

0 commit comments

Comments
 (0)