/js-dev-stack

Simple example of --modern-- js frontend development stack

Primary LanguageJavaScript

Java Script Frontend Development Stack

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+).

Po co?

  • ł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,

Wymagania

Instalacja

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

Funckje

Task build-dev

$ 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
  • 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,

Task build-example-es6

$ 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.

Task watch

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

praca z modułami npm

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;

praca z modułami Bower'a

commit: 0b19a45c81a291e3dd241abb2b8f135a1b532cfc

$ bower install --save lodash
var lodash = require("lodash");
var _ = lodash;

var arrayDiff = _.difference([1, 2, 3], [4, 2]);

TODO:

  • przykład dodania zależności via npm (jQuery),
  • przykład dodania zależności via Bower (Lodash)
  • 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