Git Product home page Git Product logo

js-dev-stack's Introduction

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 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 jQuery

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;

TODO:

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

js-dev-stack's People

Contributors

czterystaczwarty avatar

Watchers

sigviper avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.