Nástroj browserify existuje již několik let, ale nevšiml jsem si toho, dokud jsem nezačal vyvíjet s node.js. Tehdy jsem ocenil svižnost a výkon, které přináší psaní modulárního JavaScriptu.
Browserify lze použít v jakékoli webové aplikaci bez ohledu na jazyk na straně serveru a v tomto rychlém tipu vám ukážu, jak jej můžete použít k modularizaci kódu, a zároveň vám ukážu některé výhody, které s tím souvisí.
Za prvé, co je modul?
Základní myšlenkou modulu je, že se jedná o izolovaný a libovolně složitý kus kódu. Může nebo nemusí obsahovat další moduly a explicitně exportuje objekty nebo funkce do kódu, který je obsahuje. Je to lepší než jednoduše rozdělovat váš zdroj do samostatných souborů js a zahrnout je do značek skriptu, protože moduly vám umožňují znovu použít kód způsoby, které jinak nejsou možné, neznečišťují váš globální rozsah a snáze se testují. Další výhody naleznete zde.
JavaScript (zatím) nemá nativní způsob definování modulů, takže komunita zasáhla a vymyslela několik způsobů, jak to udělat. Dvě nejoblíbenější jsou specifikace CommonJS, kterou používají node.js a browserify, a AMD, kterou používají asynchronní knihovny jako require.js.
V tomto článku probereme CommonJS a browserify.
Co je browserify?
Webové prohlížeče nejsou schopny načíst moduly CommonJS přímo, protože by to vyžadovalo zamrznutí celé stránky při stahování modulu, což by pro uživatele bylo hrozné. Browserify je nástroj, který vám umožní psát váš JavaScript, jako by moduly byly podporovány prohlížečem, a když přijde čas na nasazení, zkompiluje váš kód spolu s moduly, které jste použili, do jediného souboru js, který zahrnete jako skript. na vaší stránce.
S browserify můžete snadno modularizovat své aplikace, a což je ještě lepší – umožňuje vám používat všechny ty úžasné knihovny napsané pro node.js v podstatě stejným způsobem.
Instalace
Chcete-li používat browserify, musíte mít nainstalované node.js a npm. Napsal jsem zde pár pokynů. Poté musíte nainstalovat browserify a volitelně minify, abyste mohli snížit velikost souborů js. Napište tyto příkazy do svého terminálu/příkazového řádku:
npm install -g browserify minify
Tím se stáhne balíčky a nastaví se za vás příkazy browserify a minify.
Rychlý příklad
Pojďme napsat malou modulární aplikaci, která načte soubor JSON s filmy přes AJAX a umožní uživatelům zakoupit vstupenky do kina psaním příkazů do dev nástrojů jejich prohlížeče. Abych demonstroval, jak Browserify pracuje s knihovnami, zahrnu knihovnu superagenta AJAX.
Chcete-li nainstalovat superagenta, zadejte do terminálu tento příkaz:
npm install superagent
Tím se stáhnou soubory knihovny a všechny ostatní závislé balíčky. Na npm je k dispozici mnoho knihoven na straně klienta, včetně jQuery. Takže kromě dalších výhod, které vám browserify poskytuje, bude také mnohem snazší načítat a stahovat knihovny ze sítě.
Nyní jsme připraveni napsat nějaký skutečný kód! První soubor, který napíšeme, je modul, který definuje běžné metody, které budou uživatelé naší aplikace pro kino používat.
assets/js/api.js
module.exports = function(global, movies){
var tickets = [];
global.showMovies = function(){
movies.forEach(function(m){
console.log(m.id + ') ' + m.name + ' | $' + m.price.toFixed(2));
});
};
global.buyTicket = function(id){
id = id || 0;
id -= 1;
if(movies[id] !== undefined){
tickets.push(id);
console.log('You bought a ticket for "' + movies[id].name + '"!')
}
else{
console.error('No such movie!');
}
};
global.showTickets = function(){
tickets.forEach(function(id){
console.log('Ticket for "' + movies[id].name + '" | $' + movies[id].price.toFixed(2));
});
};
global.totalCost = function(){
var total = 0;
tickets.forEach(function(id){
total += movies[id].price;
});
console.log('You have to pay $' + total.toFixed(2));
};
}
Tento modul exportuje funkci, která bere objekt a pole filmů jako argumenty. Jak uvidíte v našem hlavním programu, pole načteme přes ajax a globální objekt bude nastaven na window . Rozhodl jsem se neodkazovat na window přímo v tomto modulu, protože jeho přijetí jako argument usnadní opětovné použití kódu v jiné situaci (nebo na straně serveru, pokud používáme node.js).
Zde je hlavní soubor:
assets/js/main.js
// Require the superagent library
var request = require('superagent');
// Require our own module
var api = require('./api.js');
// Send a GET AJAX request
request('assets/movies.json', function(res){
if(res.ok){
// Initialize the API
api(window, res.body.movies);
}
else{
throw new Error('An AJAX error occured: ' + res.text);
}
}); Protože prohlížeče nativně moduly nepodporují, potřebujeme browserify, aby nám tento kód převedl do jediného souboru. To lze provést pomocí následujících příkazů:
browserify assets/js/main.js > assets/js/include.js minify assets/js/include.js assets/js/include.min.js
První příkaz zkompiluje váš main.js soubor na include.js . Druhý soubor bude obsahovat váš kód spolu se všemi moduly, které používáte. Druhý příkaz jej minimalizuje (odstraní mezery, komentáře a přejmenuje proměnné), aby se zkrátila velikost souboru skriptu a jeho stahování bylo rychlejší.
Poskytl jsem skript shellu - build.sh , který můžete spustit pod Unix/Linux/OSX tímto příkazem:
bash build.sh
Pokud používáte Windows, pravděpodobně byste mohli vytvořit dávkový soubor se stejným obsahem a spustit jej z příkazového řádku.
Vše, co zbývá, je přidat include.min.js soubor na vaši stránku:
z index.html
<script src="assets/js/include.min.js"></script>
Můžete vidět movies.json soubor a další zdroje v souboru zip ke stažení, na který odkazuje výše uvedené tlačítko.
Máme hotovo!
Tímto končí dnešní rychlý tip. Doufám, že vám náš malý experiment byl užitečný a že začnete své dobrodružství v zemi modulárního JavaScriptu!