Prosty przykład wykorzystania npm + Browserify + Bower + Babel.js do pisaniu uporządkowanego nowoczesnego JavaScriptu (EcmaScript 6) pod przeglądarki obsługujące przynajmniej ES5 (IE9+).

• łaczenie cat'em kilku długich plików .js to dobra, ale nie najlepsza metoda budowania skryptów na produkcję,
• VanillaJS i globalne zmienne są świetne, ale czasem zaciągamy jakieś zależności, wtedy dobrze mieć je pod kontrolą,
• dobrze też trzymać je poza projektem,

• zainstalowany node.js,
  • v0.10 powinno wystarczyć, ale...
  • instalacja v0.12 na Ubuntu
• zainstalowany npm,

1. Klonujemy repo i wchodimy do katalogu
2. Wklepujemy $ npm install

$ npm run build-dev

• dzięki Browserify sprawdza rekurencyjnie wszystkie zależności pliku js/main.js i łączy je w jeden js-dist/bundle.js,
• każdy moduł ma swoje prywatne var i publiczne module.exports,
• dzięki Babel.js transpiluje znalezione w modułach konstrukcje w ES6 do ES5
  • ECMAScript 6 equivalents in ES5,
• generuje plik source map, dzięki któremu w Chrome DevTools widzimy kod poszczególnych modułów w ES6 zamiast załączonego do index.html bundla w ES5,

$ npm run watch

• nasłuchuje na zmianach wszystkich modułów, od kótrych zależy main.js i przebudowuje tak samo jak build-dev,

commit: d14666f2cf9890e11298ec14b7d7af586cbba626

$ npm install --save jquery

var jQuery, $;
// private binding - this module only
jQuery = $ = require("jquery");
// global binding form dev tools
window.jQuery = window.$ = jQuery;

• przykład dodania zależności via npm (jQuery),
• przykład dodania zależności via Bower
  • https://github.com/eugeneware/debowerify,
• taski build-dev i watch powinny korzystać z tej samej konfiguracji bundli,
• rozwiązać problem niedziałającego watch na OS X,
• dopisać task build-prod