Javascript part two: « very package oriented »

Find back articles from this serie...
1/ Javascript part one: "very object oriented"
2/ Javascript part two: "very package oriented"
2/ Javascript part three: "very component oriented"

Organize your code is quiet complicated when you are on a javascript project. (not speaking about snippets)

 

First thing to set up is the structure.

 

This is the most used common organization:

(file – folder)

./
./examples
./examples/css
./examples/images
./examples/js
./lib
./lib/class.js
./lib/d3.js
./lib/jquery.js
./mylib.js
./mylib-min.js
./src
./src/myobj1.js
./src/myobj2.js

 

Second thing, you will quickly want to concat all the files (including external libraries) and to minify it! Let’s go, this is a working Makefile.

To do it, create a file named ./Makefile in root’s directory of your project then execute shell command « make ».

[cc lang= »make »]NODE_PATH ?= ./node_modules
JS_COMPILER = $(NODE_PATH)/uglify-js/bin/uglifyjs
JS_BEAUTIFIER = $(NODE_PATH)/uglify-js/bin/uglifyjs -b -i 2 -nm -ns

all: \
lib.js \
lib.min.js

lib.js: \
lib/class.js \
lib/d3.js \
lib/jquery.js \
src/myobj1.js \
src/myobj2.js

%.min.js: %.js Makefile
@rm -f $@
$(JS_COMPILER) < $< > $@

lib.js: Makefile
@rm -f $@
cat $(filter %.js,$^) | $(JS_BEAUTIFIER) > $@
@chmod a-w $@[/cc]
Translation…

  • it « uglifies » (= obfuscate) each class.js , d3.js, jquery.js, myobj1.js, myobj2.js…
  • it concats all the files together
  • it renders final version like lib.js and lib.min.js
  • (lib.js is the one you can debug from browser)

 

In addition, to install uglifyjs with node packet manager (in your main project’s folder on Unix eg Ubuntu Fedora)
[cc lang= »bash »]aptitude install npm
npm install uglifyjs[/cc]

Another way to test your code is to create examples based directly on source files (not lib.js but including all external files)

 

You got now the possibility to publish your collection of snippet into a single minified library!