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.
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.
Vegeu SPA
Browserify en web no SPA:
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
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:
Acacha Wiki$ [[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
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.
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]
De l'anglès bundle (lote/bulto/paquete). Empaquetar és bundle up
http://browserify.org/demos.html
Amb vue:
$ browserify --bundle-graph-list -e main.js -e worker1.js -e worker2.js
Recursos:
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:
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 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:
Check out tools like Beefy or run-browser which make automating browserify development easier.
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
Vegeu testling-ci que permet comprovar automàticament en múltiples navegadors si funciona ok el vostre codi. Testing-cli badge
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:
Browserify es pot integrar a diferents Build tools com Grunt o Gulp
Vegeu l'article sobre Gulp i més concretament l'apartat Gulp i Browserify
Vegeu Grunt