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,
- zainstalowany bower
- Klonujemy repo i wchodimy do katalogu
- Wklepujemy
$ npm install
$ npm run build-dev
- dzięki Browserify sprawdza rekurencyjnie wszystkie zależności pliku
js/main.js
i łączy je w jedenjs-dist/bundle.js
, - każdy moduł ma swoje prywatne
var
i publicznemodule.exports
, - dzięki Babel.js transpiluje znalezione w modułach konstrukcje w ES6 do 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 build-example-es6
Task budujący przykładowe użycie klas ES6 oraz konwencji exportów CommonJS. Wynikowe pliki:
- example-es6.js
- example-es6.js.map
Wynik dziąłania skryptu można zobaczyć w przeglądarce.
$ npm run watch
- nasłuchuje na zmianach wszystkich modułów, od kótrych zależy
main.js
i przebudowuje tak samo jakbuild-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;
commit: 0b19a45c81a291e3dd241abb2b8f135a1b532cfc
$ bower install --save lodash
var lodash = require("lodash");
var _ = lodash;
var arrayDiff = _.difference([1, 2, 3], [4, 2]);
- przykład dodania zależności via npm (jQuery),
- przykład dodania zależności via Bower (Lodash)
- taski
build-dev
iwatch
powinny korzystać z tej samej konfiguracji bundli, - rozwiązać problem niedziałającego
watch
na OS X, - dopisać task
build-prod