Aggiornamento ottobre 2018
Se non sei ancora sicuro dello sviluppo del front-end, puoi dare un'occhiata veloce a una risorsa eccellente qui.
https://github.com/kamranahmedse/developer-roadmap
Aggiornamento giugno 2018
Imparare JavaScript moderno è difficile se non ci sei stato dall'inizio. Se sei il nuovo arrivato, ricordati di controllare questo eccellente scritto per avere una migliore visione d'insieme.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Aggiornamento luglio 2017
Recentemente ho trovato una guida davvero completa del team Grab su come affrontare lo sviluppo front-end nel 2017. Puoi verificarlo come di seguito.
https://github.com/grab/front-end-guide
Ho anche cercato questo da un po 'di tempo poiché ci sono molti strumenti là fuori e ognuno di loro ci avvantaggia in un aspetto diverso. La comunità è divisa in strumenti come Browserify, Webpack, jspm, Grunt and Gulp. Potresti anche sentirne parlare Yeoman or Slush. Questo non è davvero un problema, è solo confuso per tutti coloro che cercano di capire un chiaro percorso in avanti.
Ad ogni modo, vorrei contribuire con qualcosa.
1. Gestore pacchetti
I gestori pacchetti semplificano l'installazione e l'aggiornamento delle dipendenze del progetto, che sono librerie come:, jQuery, Bootstrapecc., Tutto ciò che viene utilizzato sul tuo sito e non è stato scritto da te.
Navigare in tutti i siti Web delle biblioteche, scaricare e decomprimere gli archivi, copiare i file nei progetti: tutto questo viene sostituito con alcuni comandi nel terminale.
NPMsta per: Node JS package managerti aiuta a gestire tutte le librerie su cui si basa il tuo software. Definiresti le tue esigenze in un file chiamato package.jsoned eseguito npm installnella riga di comando ... quindi BANG, i tuoi pacchetti vengono scaricati e pronti per l'uso. Potrebbe essere usato sia per le front-end and back-endbiblioteche.
Bower: per la gestione dei pacchetti front-end, il concetto è lo stesso con NPM. Tutte le librerie vengono archiviate in un file denominato bower.jsone quindi eseguite bower installnella riga di comando.
La differenza più grande tra Bowere NPMè che NPM fa un albero delle dipendenze nidificato mentre Bower richiede un albero delle dipendenze piatto come di seguito.
Citando da Qual è la differenza tra Bower e npm?
NPM
project root
[node_modules] // default directory for dependencies
-> dependency A
-> dependency B
[node_modules]
-> dependency A
-> dependency C
[node_modules]
-> dependency B
[node_modules]
-> dependency A
-> dependency D
pergolato
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Ci sono alcuni aggiornamenti npm 3 Duplication and Deduplication, per favore apri il documento per maggiori dettagli.
Yarn: Un nuovo gestore di pacchetti JavaScript pubblicato di Facebookrecente con alcuni più vantaggi rispetto a NPM. E con Filati, è ancora possibile utilizzare entrambi NPMe BowerRegistro di sistema per recuperare il pacchetto. Se hai già installato un pacchetto in precedenza, yarncrea una copia cache che facilita offline package installs.
jspm: è un gestore di pacchetti per il SystemJScaricatore di moduli universale, costruito sopra il ES6caricatore di moduli dinamici . Non è un gestore di pacchetti completamente nuovo con un proprio set di regole, ma funziona al di sopra delle fonti di pacchetti esistenti. Fuori dalla scatola, funziona con GitHube npm. Poiché la maggior parte dei Bowerpacchetti basati si basa GitHub, possiamo installare anche quei pacchetti jspm. Ha un registro che elenca la maggior parte dei pacchetti front-end comunemente usati per una più facile installazione.
Guarda le differenze tra Bowere jspm:
Package Manager: Bower vs jspm
2. Caricatore / raggruppamento di moduli
La maggior parte dei progetti di qualsiasi scala avrà il proprio codice suddiviso tra un numero di file. Puoi semplicemente includere ogni file con un singolo <script>tag, tuttavia <script>stabilisce una nuova connessione http e per i file di piccole dimensioni - che è un obiettivo di modularità - il tempo necessario per impostare la connessione può richiedere molto più tempo rispetto al trasferimento dei dati. Durante il download degli script, nessun contenuto può essere modificato sulla pagina.
- Il problema del tempo di download può essere in gran parte risolto concatenando un gruppo di moduli semplici in un singolo file e minimizzandolo.
Per esempio
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- La prestazione viene però a scapito della flessibilità. Se i tuoi moduli hanno interdipendenza, questa mancanza di flessibilità potrebbe essere uno spettacolo.
Per esempio
<head>
<title>Skateboard</title>
<script src=“connectors/axle.js”></script>
<script src=“frames/board.js”></script>
<!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
<script src=“rolling-things/abstract-rolling-thing.js”></script>
<script src=“rolling-things/wheels/skateboard-wheel.js”></script>
<!-- but if skateboard-wheel also depends on ball-bearing -->
<!-- then having this script tag here could cause a problem -->
<script src=“rolling-things/ball-bearing.js”></script>
<!-- connect wheels to axle and axle to frame -->
<script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>
I computer possono farlo meglio di te ed è per questo che dovresti usare uno strumento per raggruppare automaticamente tutto in un singolo file.
Poi abbiamo sentito parlare RequireJS, Browserify, WebpackeSystemJS
RequireJS: è un JavaScriptcaricatore di file e moduli. È ottimizzato per l'uso nel browser, ma può essere utilizzato in altri ambienti JavaScript, come Node.
Ad esempio: myModule.js
// package/lib is a dependency we require
define(["package/lib"], function (lib) {
// behavior for our module
function foo() {
lib.log( "hello world!" );
}
// export (expose) foo to other modules as foobar
return {
foobar: foo
}
});
In main.js, possiamo importare myModule.jscome dipendenza e usarlo.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
E poi nel nostro HTML, possiamo fare riferimento all'uso con RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
Maggiori informazioni su CommonJSe AMDper capire facilmente.
Relazione tra CommonJS, AMD e RequireJS?
Browserify: impostato per consentire l'uso di CommonJSmoduli formattati nel browser. Di conseguenza, Browserifynon è tanto un modulo loader quanto un modulo bundler: Browserifyè interamente uno strumento di build-time, che produce un pacchetto di codice che può quindi essere caricato sul lato client.
Inizia con un computer di build su cui sono installati node & npm e ottieni il pacchetto:
npm install -g –save-dev browserify
Scrivi i tuoi moduli in CommonJSformato
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
E quando sei felice, emetti il comando per raggruppare:
browserify entry-point.js -o bundle-name.js
Browserify trova ricorsivamente tutte le dipendenze del punto di ingresso e le assembla in un singolo file:
<script src=”bundle-name.js”></script>
Webpack: Raggruppa tutte le risorse statiche, tra cui JavaScriptimmagini, CSS e altro, in un unico file. Inoltre, consente di elaborare i file attraverso diversi tipi di caricatori. È possibile scrivere la sintassi JavaScriptcon CommonJSo dei AMDmoduli. Attacca il problema della costruzione in modo sostanzialmente più integrato e supponente. In Browserifyte usi Gulp/Grunte un lungo elenco di trasformazioni e plugin per portare a termine il lavoro. Webpackoffre abbastanza potenza pronta all'uso che in genere non è necessaria Grunto Gulpaffatto.
L'uso di base è oltre la semplice. Installa Webpack come Browserify:
npm install -g –save-dev webpack
E passa al comando un punto di ingresso e un file di output:
webpack ./entry-point.js bundle-name.js
SystemJS: è un caricatore di moduli che può importare moduli in fase di esecuzione in uno dei formati più utilizzati oggi ( CommonJS, UMD, AMD, ES6). È costruito sulla parte superiore del ES6polyfill del caricatore del modulo ed è abbastanza intelligente da rilevare il formato utilizzato e gestirlo in modo appropriato. SystemJSpuò anche trascrivere il codice ES6 (con Babelo Traceur) o altre lingue come TypeScripte CoffeeScriptusando plugin.
Vuoi sapere cos'è node modulee perché non è ben adattato al browser.
Articolo più utile:
Perché jspme SystemJS?
Uno dei principali obiettivi di ES6modularità è quello di rendere davvero semplice da installare e utilizzare qualsiasi libreria JavaScript da qualsiasi luogo su Internet ( Github, npm, ecc). Sono necessarie solo due cose:
- Un singolo comando per installare la libreria
- Una singola riga di codice per importare la libreria e utilizzarla
Quindi con jspm, puoi farlo.
- Installa la libreria con un comando:
jspm install jquery
- Importa la libreria con una singola riga di codice, senza bisogno di riferimenti esterni all'interno del tuo file HTML.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Quindi configurare queste cose all'interno System.config({ ... })prima di importare il modulo. Normalmente quando eseguito jspm init, ci sarà un file chiamato config.jsper questo scopo.
Per eseguire questi script, è necessario caricare system.jse config.jsnella pagina HTML. Successivamente cariceremo il display.jsfile utilizzando il SystemJScaricatore del modulo.
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Nota: puoi anche usarlo npmcon WebpackAngular 2. Dal momento che è jspmstato sviluppato per integrarsi con SystemJSe funziona sulla npmfonte esistente , quindi la tua risposta dipende da te.
3. Task runner
I gestori di attività e gli strumenti di creazione sono principalmente strumenti da riga di comando. Perché dobbiamo usarli: in una parola: automazione . Meno lavoro devi fare quando esegui attività ripetitive come la minificazione, la compilazione, il test delle unità, i peli che in precedenza ci sono costati molte volte da fare con la riga di comando o anche manualmente.
Grunt: Puoi creare automazione per il tuo ambiente di sviluppo per pre-elaborare codici o creare script di compilazione con un file di configurazione e sembra molto difficile gestire un'attività complessa. Popolare negli ultimi anni.
Ogni attività in Gruntè una matrice di diverse configurazioni di plugin, che vengono semplicemente eseguite una dopo l'altra, in modo strettamente indipendente e sequenziale.
grunt.initConfig({
clean: {
src: ['build/app.js', 'build/vendor.js']
},
copy: {
files: [{
src: 'build/app.js',
dest: 'build/dist/app.js'
}]
}
concat: {
'build/app.js': ['build/vendors.js', 'build/app.js']
}
// ... other task configurations ...
});
grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
Gulp: L'automazione è come, Gruntma invece delle configurazioni, puoi scrivere JavaScriptcon flussi come se fosse un'applicazione nodo. Preferisco questi giorni.
Questa è una Gulpdichiarazione di attività di esempio.
//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//declare the task
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
Scopri di più: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. Strumenti per ponteggi
Slush and Yeoman: È possibile creare progetti di avvio con loro. Ad esempio, stai pianificando di costruire un prototipo con HTML e SCSS, quindi invece di creare manualmente alcune cartelle come scss, css, img, fonts. Puoi semplicemente installare yeomaned eseguire uno script semplice. Quindi tutto qui per te.
Scopri di più qui .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Vedi di più: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
La mia risposta non è realmente abbinata al contenuto della domanda, ma quando cerco queste informazioni su Google, vedo sempre la domanda in cima, così ho deciso di rispondere in sintesi. Spero che abbiate trovato utile.