Update Oktober 2018
Wenn Sie sich über Front-End-Entwickler noch nicht sicher sind, können Sie hier einen kurzen Blick auf eine hervorragende Ressource werfen.
https://github.com/kamranahmedse/developer-roadmap
Update Juni 2018
Das Erlernen von modernem JavaScript ist schwierig, wenn Sie von Anfang an nicht dort waren. Wenn Sie der Neuling sind, denken Sie daran, diese ausgezeichnete Schrift zu überprüfen, um einen besseren Überblick zu erhalten.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Update Juli 2017
Kürzlich habe ich vom Grab-Team einen wirklich umfassenden Leitfaden gefunden, wie man sich der Front-End-Entwicklung im Jahr 2017 nähert. Sie können ihn wie folgt überprüfen.
https://github.com/grab/front-end-guide
Ich habe auch schon seit einiger Zeit danach gesucht, da es viele Tools gibt, von denen jedes in einem anderen Aspekt für uns von Vorteil ist. Die Community ist aufgeteilt in Tools wie Browserify, Webpack, jspm, Grunt and Gulp. Sie könnten auch davon hören Yeoman or Slush. Das ist nicht wirklich ein Problem, es ist nur verwirrend für alle, die versuchen, einen klaren Weg vorwärts zu verstehen.
Jedenfalls möchte ich etwas beitragen.
1. Paketmanager
Paketmanager vereinfachen die Installation und Aktualisierung von Projektabhängigkeiten, bei denen es sich um Bibliotheken wie: jQuery, Bootstrapusw. handelt - alles, was auf Ihrer Site verwendet wird und nicht von Ihnen geschrieben wurde.
Durchsuchen aller Bibliothekswebsites, Herunterladen und Entpacken der Archive, Kopieren von Dateien in die Projekte - all dies wird durch einige Befehle im Terminal ersetzt.
NPMsteht für: Node JS package managerHilft Ihnen bei der Verwaltung aller Bibliotheken, auf die sich Ihre Software stützt. Sie würden Ihre Anforderungen in einer Datei definieren, die aufgerufen package.jsonund npm installin der Befehlszeile ausgeführt wird. Dann werden Ihre Pakete heruntergeladen und können verwendet werden. Könnte beide für front-end and back-endBibliotheken verwendet werden.
Bower: Für das Front-End-Paketmanagement ist das Konzept mit NPM identisch. Alle Ihre Bibliotheken werden in einer Datei mit dem Namen gespeichert bower.jsonund dann bower installin der Befehlszeile ausgeführt.
Der größte Unterschied zwischen Bowerund NPMbesteht darin, dass NPM einen verschachtelten Abhängigkeitsbaum ausführt, während Bower einen flachen Abhängigkeitsbaum wie unten benötigt.
Zitat aus Was ist der Unterschied zwischen Bower und 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
Laube
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Es gibt einige Updates zu npm 3 Duplication and Deduplication, bitte öffnen Sie das Dokument für weitere Details.
Yarn: Ein neuer Paket - Manager für JavaScript veröffentlicht durch Facebookeinige weitere Vorteile vor kurzem im Vergleich zu NPM. Und mit Yarn können Sie weiterhin beide NPMund die BowerRegistrierung verwenden, um das Paket abzurufen. Wenn Sie zuvor ein Paket installiert haben, yarnwird eine zwischengespeicherte Kopie erstellt, die dies erleichtert offline package installs.
jspm: ist ein Paketmanager für den SystemJSuniversellen Modullader, der auf dem dynamischen ES6Modullader aufbaut. Es ist kein völlig neuer Paketmanager mit eigenen Regeln, sondern funktioniert zusätzlich zu vorhandenen Paketquellen. Standardmäßig funktioniert es mit GitHubund npm. Da die meisten Bowerbasierten Pakete auf basieren GitHub, können wir diese Pakete auch mit installieren jspm. Es verfügt über eine Registrierung, in der die meisten häufig verwendeten Front-End-Pakete zur einfacheren Installation aufgelistet sind.
Sehen Sie den Unterschied zwischen Bowerund jspm:
Paketmanager: Bower vs jspm
2. Modullader / Bündelung
Bei den meisten Projekten jeder Größenordnung wird der Code auf mehrere Dateien aufgeteilt. Sie können einfach jede Datei mit einem einzelnen <script>Tag versehen, jedoch <script>eine neue http-Verbindung herstellen. Bei kleinen Dateien - was ein Ziel der Modularität ist - kann die Zeit zum Einrichten der Verbindung erheblich länger dauern als das Übertragen der Daten. Während die Skripte heruntergeladen werden, kann kein Inhalt auf der Seite geändert werden.
- Das Problem der Downloadzeit kann weitgehend gelöst werden, indem eine Gruppe einfacher Module zu einer einzigen Datei verkettet und minimiert wird.
Z.B
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Die Leistung geht jedoch zu Lasten der Flexibilität. Wenn Ihre Module voneinander abhängig sind, kann dieser Mangel an Flexibilität ein Showstopper sein.
Z.B
<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>
Computer können das besser als Sie, und deshalb sollten Sie ein Tool verwenden, um alles automatisch in einer einzigen Datei zu bündeln.
Dann hörten wir von RequireJS, Browserify, WebpackundSystemJS
RequireJS: ist ein JavaScriptDatei- und Modullader. Es ist für die Verwendung im Browser optimiert, kann jedoch auch in anderen JavaScript-Umgebungen verwendet werden Node.
ZB: 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.jskönnen wir myModule.jsals Abhängigkeit importieren und verwenden.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
Und dann HTMLkönnen wir in unserem auf die Verwendung mit verweisen RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
Lesen Sie mehr darüber CommonJSund machen Sie AMDsich leicht verständlich.
Beziehung zwischen CommonJS, AMD und RequireJS?
Browserify: Legen Sie fest, dass CommonJSformatierte Module im Browser verwendet werden sollen. Folglich Browserifyist es nicht so sehr ein Modullader wie ein Modulbündler: Es Browserifyhandelt sich ausschließlich um ein Tool zur Erstellung, das ein Codebündel erzeugt, das dann clientseitig geladen werden kann.
Beginnen Sie mit einer Build-Maschine, auf der Node & npm installiert ist, und holen Sie sich das Paket:
npm install -g –save-dev browserify
Schreiben Sie Ihre Module im CommonJSFormat
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
Und wenn Sie zufrieden sind, geben Sie den Befehl zum Bündeln ein:
browserify entry-point.js -o bundle-name.js
Browserify findet rekursiv alle Abhängigkeiten des Einstiegspunkts und fasst sie zu einer einzigen Datei zusammen:
<script src=”bundle-name.js”></script>
Webpack: Es bündelt alle Ihre statischen Assets, einschließlich JavaScriptBilder, CSS und mehr, in einer einzigen Datei. Außerdem können Sie die Dateien über verschiedene Arten von Ladern verarbeiten. Sie können Ihre JavaScriptWith- CommonJSoder AMDModule-Syntax schreiben . Es greift das Build-Problem grundlegend integrierter und einfühlsamer an. In verwenden BrowserifySie Gulp/Gruntund eine lange Liste von Transformationen und Plugins, um die Arbeit zu erledigen. Webpackbietet sofort genug Strom, den Sie normalerweise nicht Gruntoder überhaupt nicht benötigen Gulp.
Die grundlegende Verwendung ist nicht einfach. Installieren Sie Webpack wie Browserify:
npm install -g –save-dev webpack
Und übergeben Sie dem Befehl einen Einstiegspunkt und eine Ausgabedatei:
webpack ./entry-point.js bundle-name.js
SystemJS: ist ein Modullader, der Module zur Laufzeit in einem der heute verwendeten gängigen Formate importieren kann ( CommonJS, UMD, AMD, ES6). Es basiert auf der ES6Polyfill des Modulladers und ist intelligent genug, um das verwendete Format zu erkennen und entsprechend zu handhaben. SystemJSkann auch ES6-Code (mit Babeloder Traceur) oder andere Sprachen wie TypeScriptund CoffeeScriptmithilfe von Plugins transpilieren.
Möchten Sie wissen, was das ist node moduleund warum es nicht gut für den Browser geeignet ist?
Weitere nützliche Artikel:
Warum jspmund SystemJS?
Eines der Hauptziele der ES6Modularität ist es wirklich einfach zu machen zu installieren und zu nutzen jede Javascript - Bibliothek von überall im Internet ( Github, npmusw.). Es werden nur zwei Dinge benötigt:
- Ein einzelner Befehl zum Installieren der Bibliothek
- Eine einzige Codezeile zum Importieren und Verwenden der Bibliothek
Mit jspmkönnen Sie es also tun.
- Installieren Sie die Bibliothek mit einem Befehl:
jspm install jquery
- Importieren Sie die Bibliothek mit einer einzigen Codezeile, ohne dass in Ihrer HTML-Datei ein externer Verweis erforderlich ist.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Anschließend konfigurieren Sie diese Elemente innerhalb von, System.config({ ... })bevor Sie Ihr Modul importieren. Normalerweise wird beim Ausführen jspm initeine Datei mit config.jsdiesem Namen benannt .
Um diese Skripte ausgeführt werden zu können, müssen wir zu laden system.jsund config.jsauf der HTML - Seite. Danach laden wir die display.jsDatei mit dem SystemJSModullader.
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Hinweis: Sie können auch npmmit verwenden, Webpackda Angular 2 es angewendet hat. Da jspmes für die Integration entwickelt wurde SystemJSund auf der vorhandenen npmQuelle funktioniert , liegt Ihre Antwort bei Ihnen.
3. Task Runner
Task-Runner und Build-Tools sind in erster Linie Befehlszeilen-Tools. Warum wir sie verwenden müssen: Mit einem Wort: Automatisierung . Je weniger Arbeit Sie leisten müssen, wenn Sie sich wiederholende Aufgaben wie Minimieren, Kompilieren, Komponententests oder Flusen ausführen , die uns früher viel Zeit gekostet haben, um mit der Befehlszeile oder sogar manuell zu arbeiten.
Grunt: Sie können eine Automatisierung für Ihre Entwicklungsumgebung erstellen, um Codes vorzuverarbeiten oder Build-Skripte mit einer Konfigurationsdatei zu erstellen, und es scheint sehr schwierig zu sein, eine komplexe Aufgabe zu erledigen. Beliebt in den letzten Jahren.
Jede Aufgabe Gruntbesteht aus einer Reihe verschiedener Plugin-Konfigurationen, die einfach nacheinander streng unabhängig und sequentiell ausgeführt werden.
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: Automatisierung genau wie, Gruntaber anstelle von Konfigurationen können Sie JavaScriptmit Streams schreiben, als wäre es eine Knotenanwendung. Bevorzugen Sie diese Tage.
Dies ist eine GulpBeispielaufgabendeklaration.
//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);
});
Weitere Informationen: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. Gerüstwerkzeuge
Slush and Yeoman: Mit ihnen können Sie Starterprojekte erstellen. Sie planen beispielsweise, einen Prototyp mit HTML und SCSS zu erstellen und dann manuell Ordner wie scss, css, img und fonts zu erstellen. Sie können einfach yeomanein einfaches Skript installieren und ausführen. Dann alles hier für dich.
Mehr hier .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Weitere Informationen: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Meine Antwort stimmt nicht wirklich mit dem Inhalt der Frage überein. Wenn ich jedoch bei Google nach diesem Wissen suche, wird die Frage immer oben angezeigt, sodass ich mich entschlossen habe, sie zusammenfassend zu beantworten. Hoffe ihr fand es hilfreich.