Zaktualizuj październik 2018 r
Jeśli nadal nie masz pewności co do dewelopera Front-end, możesz szybko zapoznać się z doskonałym źródłem informacji tutaj.
https://github.com/kamranahmedse/developer-roadmap
Aktualizacja z czerwca 2018 r
Nauka nowoczesnego JavaScript jest trudna, jeśli nie byłeś tam od samego początku. Jeśli jesteś nowym przybyszem, pamiętaj, aby sprawdzić ten znakomity napisany, aby mieć lepszy przegląd.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Zaktualizuj lipiec 2017 r
Niedawno znalazłem naprawdę obszerny przewodnik od zespołu Grab, w jaki sposób podejść do rozwoju frontonu w 2017 roku. Możesz to sprawdzić, jak poniżej.
https://github.com/grab/front-end-guide
Szukałem tego również od dłuższego czasu, ponieważ istnieje wiele narzędzi i każde z nich przynosi korzyści w innym aspekcie. Społeczność jest podzielona na narzędzia takie jak Browserify, Webpack, jspm, Grunt and Gulp. Możesz także usłyszeć o Yeoman or Slush. To naprawdę nie jest problem, jest po prostu mylące dla wszystkich, którzy próbują zrozumieć jasną ścieżkę naprzód.
W każdym razie chciałbym coś wnieść.
1. Menedżer pakietów
Menedżerowie pakietów upraszczają instalowanie i aktualizowanie zależności projektu, które są bibliotekami takimi jak: jQuery, Bootstrapitp. - wszystko, co jest używane w Twojej witrynie i nie jest napisane przez Ciebie.
Przeglądanie wszystkich stron bibliotek, pobieranie i rozpakowywanie archiwów, kopiowanie plików do projektów - wszystko to jest zastępowane kilkoma poleceniami w terminalu.
NPMoznacza: Node JS package managerpomaga zarządzać wszystkimi bibliotekami, na których opiera się twoje oprogramowanie. Zdefiniujesz swoje potrzeby w pliku o nazwie package.jsoni uruchomisz npm installw wierszu poleceń ... następnie BANG, twoje pakiety zostaną pobrane i gotowe do użycia. Może być używany zarówno do front-end and back-endbibliotek.
Bower: w przypadku zarządzania pakietami front-end koncepcja jest taka sama jak w przypadku NPM. Wszystkie twoje biblioteki są przechowywane w pliku o nazwie, bower.jsona następnie uruchamiane bower installw wierszu poleceń.
Największa różnica między Boweri NPMpolega na tym, że NPM wykonuje zagnieżdżone drzewo zależności, podczas gdy Bower wymaga płaskiego drzewa zależności, jak poniżej.
Cytując z Jaka jest różnica między Bower a 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
Altana
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Istnieje kilka aktualizacji npm 3 Duplication and Deduplication, proszę otworzyć dokument, aby uzyskać więcej szczegółów.
Yarn: Nowy menedżer pakietów JavaScript opublikowany przez Facebookostatnio z kilkoma dodatkowymi zaletami w porównaniu do NPM. A dzięki Yarn nadal możesz używać zarówno rejestru, jak NPMi Bowerrejestru, aby pobrać pakiet. Jeśli wcześniej zainstalowałeś pakiet, yarntworzy kopię w pamięci podręcznej, co ułatwia offline package installs.
jspm: to menedżer pakietów dla SystemJSuniwersalnego modułu ładującego, zbudowany na bazie ES6modułu dynamicznego modułu ładującego. Nie jest to całkowicie nowy menedżer pakietów z własnym zestawem reguł, a raczej działa na istniejących źródłach pakietów. Po wyjęciu z pudełka działa z GitHubi npm. Ponieważ większość Bowerpakietów opartych jest na tych GitHub, możemy je również zainstalować jspm. Posiada rejestr, który zawiera listę najczęściej używanych pakietów frontonu dla łatwiejszej instalacji.
Zobacz różnice pomiędzy Boweri jspm:
Menedżer pakietów: Bower vs jspm
2. Moduł ładujący / pakietowy
W większości projektów dowolnej skali kod będzie podzielony na kilka plików. Możesz po prostu dołączyć każdy plik z indywidualnym <script>znacznikiem, jednak <script>ustanawia nowe połączenie HTTP, a dla małych plików - co jest celem modułowości - czas na ustanowienie połączenia może potrwać znacznie dłużej niż przesłanie danych. Podczas pobierania skryptów nie można zmieniać treści na stronie.
- Problem czasu pobierania można w dużej mierze rozwiązać, łącząc grupę prostych modułów w jeden plik i zmniejszając go.
Na przykład
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Wydajność odbywa się jednak kosztem elastyczności. Jeśli twoje moduły są współzależne, ten brak elastyczności może być przeszkodą.
Na przykład
<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>
Komputery mogą to zrobić lepiej niż Ty, dlatego powinieneś użyć narzędzia do automatycznego pakowania wszystkiego w jeden plik.
Potem usłyszeliśmy o RequireJS, Browserify, WebpackiSystemJS
RequireJS: to JavaScriptmoduł ładujący pliki i moduły. Jest zoptymalizowany do użytku w przeglądarce, ale może być używany w innych środowiskach JavaScript, takich jak Node.
Np .: 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
}
});
W main.jsmożemy zaimportować myModule.jsjako zależność i wykorzystać ją.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
A potem w naszym HTMLmożemy odwołać się do użycia z RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
Przeczytaj więcej na temat CommonJSi AMDłatwo zrozumieć.
Związek między CommonJS, AMD i RequireJS?
Browserify: określono, aby umożliwić korzystanie ze CommonJSsformatowanych modułów w przeglądarce. W związku z tym Browserifynie jest tyle modułem ładującym moduły, co modułem pakującym: Browserifyjest całkowicie narzędziem do kompilacji, wytwarzającym pakiet kodu, który można następnie załadować po stronie klienta.
Zacznij od kompilacji z zainstalowanym węzłem i npm, a otrzymasz pakiet:
npm install -g –save-dev browserify
Napisz swoje moduły w CommonJSformacie
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
A gdy będzie szczęśliwy, wydaj polecenie, aby dołączyć:
browserify entry-point.js -o bundle-name.js
Browserify rekurencyjnie znajduje wszystkie zależności punktu wejścia i łączy je w jeden plik:
<script src=”bundle-name.js”></script>
Webpack: Łączy wszystkie Twoje statyczne zasoby, w tym JavaScriptobrazy, CSS i więcej, w jednym pliku. Umożliwia także przetwarzanie plików przez różne typy programów ładujących. Możesz napisać swoją składnię za JavaScriptpomocą CommonJSlub AMDmodułów. Atakuje problem kompilacji w sposób zasadniczo bardziej zintegrowany i opiniotwórczy. W Browserifyużyciu Gulp/Grunti długa lista transformacji i wtyczek do wykonania zadania. Webpackzapewnia wystarczającą moc po wyjęciu z pudełka, której zwykle nie potrzebujesz Gruntlub wcale nie potrzebujesz Gulp.
Podstawowe użycie nie jest proste. Zainstaluj Webpack jak Browserify:
npm install -g –save-dev webpack
I przekaż polecenie punkt wejścia i plik wyjściowy:
webpack ./entry-point.js bundle-name.js
SystemJS: to moduł ładujący, który może importować moduły w czasie wykonywania w dowolnym z popularnych obecnie używanych formatów ( CommonJS, UMD, AMD, ES6). Jest zbudowany na górnej części ES6modułu wypełniającego moduł napełniania i jest wystarczająco inteligentny, aby wykryć używany format i odpowiednio go obsługiwać. SystemJSmoże również przenosić kod ES6 (z Babellub Traceur) lub innymi językami, takimi jak TypeScripti CoffeeScriptprzy użyciu wtyczek.
Chcesz wiedzieć, co to jest node modulei dlaczego nie jest dobrze dostosowane do przeglądarki.
Bardziej przydatny artykuł:
Dlaczego jspmi SystemJS?
Jednym z głównych celów ES6modułowości jest, aby to naprawdę proste do zainstalowania i korzystania z biblioteki JavaScript z dowolnego miejsca w Internecie ( Github, npm, itd.). Potrzebne są tylko dwie rzeczy:
- Jedno polecenie, aby zainstalować bibliotekę
- Jeden wiersz kodu do zaimportowania biblioteki i korzystania z niej
Tak więc jspmmożesz to zrobić.
- Zainstaluj bibliotekę za pomocą polecenia:
jspm install jquery
- Zaimportuj bibliotekę za pomocą jednego wiersza kodu, bez potrzeby odwoływania się do pliku HTML.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Następnie skonfiguruj te rzeczy System.config({ ... })przed zaimportowaniem modułu. Zwykle po uruchomieniu jspm initpojawi się plik nazwany config.jsw tym celu.
Aby uruchomić te skrypty, musimy załadować system.jsi config.jsna stronie HTML. Następnie załadujemy display.jsplik za pomocą SystemJSmodułu ładującego.
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Uwaga: Możesz także używać npmz tym, Webpackże Angular 2 go zastosował. Ponieważ jspmzostał opracowany w celu integracji SystemJSi działa na istniejącym npmźródle, więc Twoja odpowiedź zależy od Ciebie.
3. Runner zadań
Programy uruchamiające zadania i narzędzia do budowania to przede wszystkim narzędzia wiersza polecenia. Dlaczego musimy ich używać: Jednym słowem: automatyzacja . Mniej pracy musisz wykonywać podczas powtarzających się zadań, takich jak minimalizacja, kompilacja, testowanie jednostkowe, szuflowanie, które wcześniej kosztowały nas wiele razy z wiersza poleceń lub nawet ręcznie.
Grunt: Możesz stworzyć automatyzację dla swojego środowiska programistycznego, aby wstępnie przetwarzać kody lub tworzyć skrypty kompilacji z plikiem konfiguracyjnym, a wykonywanie skomplikowanego zadania wydaje się bardzo trudne. Popularne w ostatnich latach.
Każde zadanie Gruntto szereg różnych konfiguracji wtyczek, które po prostu są wykonywane jeden po drugim, w ściśle niezależny i sekwencyjny sposób.
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: Automatyzacja podobnie jak, Gruntale zamiast konfiguracji, możesz pisać JavaScriptstrumieniami, jak w przypadku aplikacji węzłowej. Wolę te dni.
To jest Gulpprzykładowa deklaracja zadania.
//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);
});
Zobacz więcej: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. Narzędzia do rusztowań
Slush and Yeoman: Możesz z nimi tworzyć projekty początkowe. Na przykład planujesz zbudować prototyp z HTML i SCSS, a następnie zamiast ręcznie utworzyć folder, taki jak scss, css, img, czcionki. Możesz po prostu zainstalować yeomani uruchomić prosty skrypt. Więc wszystko tutaj dla ciebie.
Znajdź więcej tutaj .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Zobacz więcej: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Moja odpowiedź nie jest tak naprawdę zgodna z treścią pytania, ale kiedy szukam tej wiedzy w Google, zawsze widzę pytanie na górze, więc postanowiłem odpowiedzieć na nie w skrócie. Mam nadzieję, że uznaliście to za pomocne.