IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

https://carlosazaustre.es/blog/browserify-desarrollando-tu-frontend-como-en-node-js/

Browserify permet utilitzar els require('modules') de Node.js al navegador (browser) facilitant la gestió de dependències i el empaquetament d'aplicacions que utilitzant Javascript en entorn de navegadors (front-end development).

Creat per James Halliday.

Introducció

Amb Browserify es pot escriure codi que utilitzi require()' de la mateixa manera que s'utilitza a Node.js. Node.js i npm han popularitzat l'ús de require() definit inicialment a CommonJS com un estàndard de facto de com escriure modules per a Javascript. El problema és que els navegadors actuals (--acacha (discussió) 18:28, 31 oct 2015 (CET)) no tenen suport de sèrie per a Node.js/CommonJS. Amb browserify els desenvolupadors podem fer ús de la infinitat de mòduls npm al navegador.

Browserify i SPA

Vegeu SPA

Browserify en web no SPA:

  • Factor bundle
  • Carrega dinàmica d'script o no carregar script que no calen: és tan problemàtic? no afecta tant a la performance com ens podem pensar per tema cache navegadors (o cache forçada?). Podem carregar tots els Javascripts de co
  • AssetManager design pattern com Assetic. Es tracta d'utilitzar alguna eina a servidor per controlar els assets que es carreguen. Ho converteix en obsolet? Laravel no té AsetManager sinó que es basa en solucions Javascript/Gulp amb el suport de Laravel Elixir

Requeriments

Instal·lació

Instal·lació global:

$ sudo npm install -g browserify

Instal·lació local:

$ sudo npm install browserify

o si voleu que es guardi la dependència al fitxer packages.json:

$ sudo npm install browserify --save

Comanda browserify

Per tenir la comanda disponible heu d'instal·lar Browserify (vegeu apartat anterior anomenat instal·lació). Depenen de com feu la instal·lació la comanda pot estar instal·lada en diferents llocs, amb un node.js instal·lal manualment i havent instal·lat globalment la comanda browserify tindreu:

$ which browserify 
/usr/local/bin/browserify

Si heu instal·lat localment el tindreu a la carpeta node_modules.

La sintaxi és:

$ [[browserify]] 
Usage: browserify [entry files] {OPTIONS}

Standard Options:

    --outfile, -o  Write the browserify bundle to this file.
                   If unspecified, browserify prints to stdout.

    --require, -r  A module name or file to bundle.require()
                   Optionally use a colon separator to set the target.

      --entry, -e  An entry point of your app
  
     --ignore, -i  Replace a file with an empty stub. Files can be globs.
 
    --exclude, -u  Omit a file from the output bundle. Files can be globs.

   --external, -x  Reference a file from another bundle. Files can be globs.
  
  --transform, -t  Use a transform module on top-level files.
 
    --command, -c  Use a transform command on top-level files.
   
  --standalone -s  Generate a UMD bundle for the supplied export name.
                   This bundle works with other module systems and sets the name
                   given as a window global if no module system is found.
  
       --debug -d  Enable source maps that allow you to debug your files
                   separately.

       --help, -h  Show this message

For advanced options, type `browserify --help advanced`.

Specify a parameter.

Podeu consultar la versió amb:

$ browserify --version
12.0.1

Hello world

Extret de la documentació oficial (http://browserify.org/):

Podeu escriure un javascript per a navegador a l'estil de node.js i que pugui utilitzarllibreries nodejs, per exemple un fitxer main.js:

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

Instal·leu el mòdul uniq amb:

$ npm install uniq

Ara només falta que entri en acció browserify amb:

$ browserify main.js -o bundle.js

On bundle.js serà el javascript definitiu que utilitzareu a les vostres pàgines web.

Hello world anterior detallat pas a pas

En una carpeta buida creeu el fitxer main.js:

$ joe main.js

Amb el contingut:

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

Ara intenteu executar amb node:

$ node main.js 
module.js:338
    throw err;
          ^ 
Error: Cannot find module 'uniq'
....

Normal que falli si no tenim la dependència/mòdul uniq instal·lat, executeu:

$ npm install uniq

Això us genera la carpeta node_modules:

$ ls
main.js  node_modules
$ ls node_modules/
uniq

On hi ha una carpeta per cada mòdul instal·lat amb npm (a l'exemple només carpeta uniq). O molt possiblement si esteu fent una aplicació que vulgueu distribuir us interessarà guardar la dependència al vostre fitxer packages.json amb:

$ npm init
$ npm install uniq --save

Aleshores teniu un fitxer packages.json amb la dependència uniq afegida. Ara ja funciona:

$ node main.js 
[ 1, 2, 3, 4, 5, 6 ]

Un altre tema és utilitzar aquest js en un navegador (client side) mitjançant un fitxer HTML. Creeu un fitxer index.html amb el contingut:

<html lang="en">
 <head>
  <meta charset="utf-8">  
  <title>Title</title>
 </head>
 <body>                
 <script src="main.js"></script>      
 </body>
</html>  

Obriu el fitxer a un navegador, per exemple firefox:

$ firefox index.html

A la consola us donarà l'error:

ReferenceError: require is not defined

En canvi si executeu:

$ browserify main.js -o bundle.js

i canvieu al fitxer inde.html main.js per bundle.js:

$ editor index.html
... 
<body>
<script src="bundle.js"></script>
</body>

Executeu ara la web al navegador i wooala:

$ firefox index.html

A la consolta (firebug o consola integrada del vostre navegador, pestanya console) ja sortirà el missatge:

 [1, 2, 3, 4, 5, 6]

bundle.js

De l'anglès bundle (lote/bulto/paquete). Empaquetar és bundle up

bundle.js

Exemples

Demos a la pàgina oficial

http://browserify.org/demos.html

Laracast

Amb vue:

Mostrar el dependency graph d'un bundle

$ browserify --bundle-graph-list -e main.js -e worker1.js -e worker2.js

Recursos:

Eines extres

Watchify

Watchify permet la creació automàtica dels fitxers bundle.js a mesura que desenvolupem:

$ npm install watchify

o globalment

$ npm install -g watchify

I s'utilitza amb:

$ watchify main.js -o static/bundle.js

o verbose:

$ watchify main.js -o static/bundle.js -v

Ara el fitxer bundle.js s'anirà actualitzant a mida que modifiqueu main.js. Existeix una tasca per a Gulp (gulp-watchify)

Resources:

Source maps

L'opció --debug pot ser molt interessant per depurar el codi i sovint amb combinació amb exorcist:

 $ browserify main.js --debug | exorcist bundle.js.map > bundle.js

L'opció --debug afegeix els source maps a bundle.js i exorcist l'únic que fa és extreure d'un stream (observeu la pipe) el sources maps en un fitxer extern

Resources:

Beefy

Beefy permet realitzar un live reload o creació en directe del fitxer bundle.js cada cop que modifiquem el nostre codi Javascript. Un exemple:

$ npm install -g beefy

I ara podeu executar:

$ beefy index.js:bundle.js --live

Resources:

run-browser

run-browser

Check out tools like Beefy or run-browser which make automating browserify development easier.

Browser versions of Node core modules

Vegeu core modules

Get browser versions of the node core libraries events, stream, path, url, assert, buffer, util, querystring, http, vm, and crypto when you require() them

Testing

Vegeu testling-ci que permet comprovar automàticament en múltiples navegadors si funciona ok el vostre codi. Testing-cli badge

Transforms

Browserify transforms

Jquery

Jquery 2.1.0 o superior:

Instal·leu jquery a node_modules:

$ npm install jquery --save

NOTA: Versions anteriors vegeu paquet npm: jquery-browserify

I ara creem el window object:

var $ = require('jquery');

Ara ja com sempre el $ representa Jquery.

Utilitzeu Browserify:

$ npm install -g browserify
$ browserify whatever.js -o bundle.js

Recursos:

Build-tools

Browserify es pot integrar a diferents Build tools com Grunt o Gulp

Gulp

Vegeu l'article sobre Gulp i més concretament l'apartat Gulp i Browserify

Grunt

Vegeu Grunt

Vegeu també

Enllaços externs