Javascript Bundler

Browserify, Webpack, Rollup, Fuse-box, Parcel

Pourquoi ?

Au début tout était simple


$(document).ready(function(){
	$('a[href^=#]').click(function() {
		cible=$(this).attr('href');
		scrollTo(cible);
		return false;
	});
});

function scrollTo(cible){
	if($(cible).length>=1){
		hauteur=$(cible).offset().top;
	}
	else{
		hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
	}
	hauteur -= (windowH()-$(cible).height())/2;
	$('html,body').animate({scrollTop: hauteur}, 1000,'easeOutQuint');
	return false;
}

function  windowH(){
	if (window.innerHeight) return window.innerHeight  ;
	else{return $(window).height();}
}

Diviser pour mieux régner

// app.js
$(document).ready(function(){
	$('a[href^=#]').click(function() {
		cible=$(this).attr('href');
		scrollTo(cible);
		return false;
	});
});

// functions.js
function scrollTo(cible){
	if($(cible).length>=1){
		hauteur=$(cible).offset().top;
	}
	else{
		hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
	}
	hauteur -= (windowH()-$(cible).height())/2;
	$('html,body').animate({scrollTop: hauteur}, 1000,'easeOutQuint');
	return false;
}

function  windowH(){
	if (window.innerHeight) return window.innerHeight  ;
	else{return $(window).height();}
}

// functions.js
function scrollTo(cible){
	if($(cible).length>=1){
		hauteur=$(cible).offset().top;
	}
	else{
		hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
	}
	hauteur -= (windowH()-$(cible).height())/2;
	$('html,body').animate({scrollTop: hauteur}, 1000,'easeOutQuint');
	return false;
}

function  windowH(){
	if (window.innerHeight) return window.innerHeight  ;
	else{return $(window).height();}
}

NodeJS est arrivé

// app.js
var http = require('http');
var dt = require('./date');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write("The date and time are currently: " + dt.myDateTime());
    res.end();
}).listen(8080);

// date.js
exports.myDateTime = function () {
    return Date();
};

Pourquoi ne pas faire pareil

// app.js
var scrollTo = require('./functions/scrollto');
var $ = require('jquery');

$(document).ready(function(){
	$('a[href^=#]').click(function() {
		cible=$(this).attr('href');
		scrollTo(cible);
		return false;
	});
});

Mais pour le front ?

// scrollto.js
module.exports = function (cible){
	if($(cible).length>=1){
		hauteur=$(cible).offset().top;
	}
	else{
		hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
	}
	hauteur -= (windowH()-$(cible).height())/2;
	$('html,body').animate({scrollTop: hauteur}, 1000,'easeOutQuint');
	return false;
}

function  windowH(){
	if (window.innerHeight) return window.innerHeight  ;
	else{return $(window).height();}
}

ECMAScript 2015

// app.js
import scrollTo from './functions/scrollto'
import $ from 'jquery'

$(document).ready(function(){
	$('a[href^=#]').click(function() {
		let cible = $(this).attr('href');
		scrollTo(cible);
		return false;
	});
});

Standardise l'utilisation des modules

// scrollto.js
export default function (cible){
    // ...
}

// app.js
import { scrollTo } from './functions/scrollto'
import $ from 'jquery'

$(document).ready(function(){
	$('a[href^=#]').click(function() {
		let cible = $(this).attr('href');
		scrollTo(cible);
		return false;
	});
});

// scrollto.js
export function scrollTo (cible){
    // ...
}


export function windowH () {
	if (window.innerHeight) return window.innerHeight  ;
	else{return $(window).height();}
}

Browserify, Webpack, Rollup, Fuse-box, Parcel