NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

Próbuję podsumować moją wiedzę na temat najpopularniejszych menedżerów pakietów JavaScript, programów pakujących i osób wykonujących zadania. Proszę popraw mnie jeżeli się mylę:

• npmi bowersą menedżerami pakietów. Po prostu pobierają zależności i nie wiedzą, jak samodzielnie budować projekty. Wiedzą, że mogą zadzwonić webpack/ gulp/ gruntpo pobraniu wszystkich zależności.
• bowerjest podobny npm, ale buduje spłaszczone drzewa zależności (w przeciwieństwie do npmtego, co rekurencyjnie). Znaczenie npmpobiera zależności dla każdej zależności (może pobrać ją kilka razy), a jednocześnie boweroczekuje ręcznego uwzględnienia zależności zależnych. Czasami boweri npmsą używane razem dla odpowiednio frontonu i back-endu (ponieważ każdy megabajt może mieć znaczenie w front-endie).
• grunti gulpwykonują zadania, aby zautomatyzować wszystko, co można zautomatyzować (tj. skompilować CSS / Sass, zoptymalizować obrazy, utworzyć pakiet oraz zminimalizować / przetransponować).
• gruntvs. gulp(jest jak mavenvs. gradlelub konfiguracja vs. kod). Grunt polega na konfigurowaniu osobnych niezależnych zadań, każde zadanie otwiera / obsługuje / zamyka plik. Gulp wymaga mniejszej ilości kodu i jest oparty na strumieniach węzłów, co pozwala mu budować łańcuchy potoków (bez ponownego otwierania tego samego pliku) i przyspiesza.
• webpack( webpack-dev-server) - dla mnie jest to runner z gorącym przeładowaniem zmian, który pozwala zapomnieć o wszystkich obserwatorach JS / CSS.
• npmbowerWtyczki / + mogą zastąpić moduły uruchamiające zadania. Ich umiejętności często się krzyżują, więc istnieją różne implikacje, jeśli potrzebujesz użyć gulp/ gruntover npm+ pluginów. Ale programy uruchamiające zadania są zdecydowanie lepsze w przypadku złożonych zadań (np. „Na każdym kompilacji stwórz pakiet, transpiluj z ES6 do ES5, uruchom go we wszystkich emulatorach przeglądarek, twórz zrzuty ekranu i wdrażaj w Dropbox przez ftp”).
• browserifyumożliwia pakowanie modułów węzłów dla przeglądarek. browserifyvs node„s requirejest rzeczywiście AMD vs CommonJS .

Pytania:

1. Co to jest webpack& webpack-dev-server? Oficjalna dokumentacja mówi, że jest to moduł do pakowania modułów, ale dla mnie to tylko program do wykonywania zadań. Co za różnica?
2. Gdzie byś użył browserify? Czy nie możemy zrobić tego samego z importem węzła / ES6?
3. Kiedy użyjesz wtyczek gulp/ gruntover npm+?
4. Podaj przykłady, gdy potrzebujesz użyć kombinacji

Webpack i Browserify

Webpack i Browserify wykonują prawie to samo zadanie, polegające na przetwarzaniu kodu w celu użycia go w środowisku docelowym (głównie w przeglądarce, chociaż można kierować reklamy do innych środowisk, takich jak Node). Wynikiem takiego przetwarzania jest jeden lub więcej pakietów - skompilowane skrypty odpowiednie dla docelowego środowiska.

Załóżmy na przykład, że napisałeś kod ES6 podzielony na moduły i chcesz móc go uruchomić w przeglądarce. Jeśli te moduły są modułami Node, przeglądarka ich nie zrozumie, ponieważ istnieją tylko w środowisku Node. Moduły ES6 również nie będą działać w starszych przeglądarkach, takich jak IE11. Co więcej, być może korzystałeś z eksperymentalnych funkcji języka (następne propozycje ES), których przeglądarki jeszcze nie implementują, więc uruchomienie takiego skryptu spowodowałoby tylko błędy. Narzędzia takie jak Webpack i Browserify rozwiązują te problemy, tłumacząc taki kod na formę, którą przeglądarka jest w stanie wykonać . Ponadto umożliwiają stosowanie wielu różnych optymalizacji w tych pakietach.

Jednak Webpack i Browserify różnią się na wiele sposobów, Webpack oferuje domyślnie wiele narzędzi (np. Dzielenie kodu), podczas gdy Browserify może to zrobić tylko po pobraniu wtyczek, ale użycie obu prowadzi do bardzo podobnych wyników . Wszystko sprowadza się do osobistych preferencji (Webpack jest bardziej modny). Btw, Webpack nie jest programem uruchamiającym zadania, jest jedynie procesorem plików (przetwarza je za pomocą tak zwanych programów ładujących i wtyczek) i może być uruchamiany (między innymi) przez program uruchamiający zadania.

Web Dev Dev Server

Webpack Dev Server zapewnia podobne rozwiązanie do Browsersync - serwera programistycznego, w którym można szybko wdrożyć aplikację podczas pracy nad nią i natychmiast sprawdzić jej postęp, a serwer programistów automatycznie odświeża przeglądarkę po zmianach kodu, a nawet propaguje zmieniony kod do przeglądarki bez ponownego ładowania z tzw. wymianą modułu na gorąco.

Biegacze zadań a skrypty NPM

Używałem Gulp ze względu na zwięzłość i łatwość pisania zadań, ale później odkryłem, że nie potrzebuję ani Gulpa, ani Grunta. Wszystko, czego kiedykolwiek potrzebowałem, można było zrobić za pomocą skryptów NPM do uruchamiania narzędzi innych firm za pośrednictwem ich interfejsu API. Wybór między skryptami Gulp, Grunt lub NPM zależy od gustu i doświadczenia twojego zespołu.

Podczas gdy zadania w Gulp lub Grunt są łatwe do odczytania, nawet dla osób niezbyt zaznajomionych z JS, jest to kolejne narzędzie do wymagania i nauki, a ja osobiście wolę zawęzić moje zależności i uprościć sprawy. Z drugiej strony zastąpienie tych zadań kombinacją skryptów NPM i (prawdopodobnie JS), które uruchamiają narzędzia innych firm (np. Konfigurowanie i uruchamianie rimrafa w celu czyszczenia), może być trudniejsze. Ale w większości przypadków te trzy są równe pod względem wyników.

Przykłady

Jeśli chodzi o przykłady, proponuję rzucić okiem na ten projekt startowy React , który pokazuje ładne połączenie skryptów NPM i JS obejmujących cały proces kompilacji i wdrażania. Możesz znaleźć te skrypty NPM w package.jsonfolderze głównym we właściwości o nazwie scripts. Tam najczęściej napotykasz polecenia takie jak babel-node tools/run start. Babel-node to narzędzie CLI tools/run(nieprzeznaczone do użytku produkcyjnego), które najpierw kompiluje plik ES6 (plik run.js znajdujący się w narzędziach ) - w zasadzie narzędzie uruchamiające . Ten moduł uruchamiający przyjmuje funkcję jako argument i wykonuje ją, co w tym przypadku jest start- innym narzędziem (start.js) odpowiedzialna za łączenie plików źródłowych (zarówno klienta, jak i serwera) oraz uruchamianie serwera aplikacji i programowania (serwer deweloperów to prawdopodobnie albo Webpack Dev Server, albo Browsersync).

Mówiąc dokładniej, start.jstworzy zarówno pakiety po stronie klienta, jak i serwera, uruchamia serwer ekspresowy i po udanym uruchomieniu inicjuje synchronizację przeglądarki, która w momencie pisania wyglądała tak (proszę odnieść się do projektu startera, aby uzyskać najnowszy kod).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

Ważną częścią jest to proxy.target, że gdy ustawiają adres serwera, który chcą proxy, może to być http: // localhost: 3000 , a Browsersync uruchamia serwer nasłuchując na http: // localhost: 3001 , gdzie wygenerowane zasoby są obsługiwane z automatyczną zmianą wykrywanie i wymiana modułu na gorąco. Jak widać, istnieje inna właściwość konfiguracyjna filesz indywidualnymi plikami lub wzorcami. Synchronizacja przeglądarki sprawdza zmiany i przeładowuje przeglądarkę, jeśli takie wystąpią, ale jak mówi komentarz, Webpack sam zajmuje się oglądaniem źródeł js z HMR, więc współpracują tam.

Teraz nie mam równoważnego przykładu takiej konfiguracji Grunta lub Gulpa, ale z Gulpem (i nieco podobnym z Gruntem) pisałbyś pojedyncze zadania w gulpfile.js, takie jak

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

gdzie robilibyście w zasadzie te same rzeczy, co w zestawie startowym, tym razem z programem uruchamiającym zadania, który rozwiązuje dla was pewne problemy, ale przedstawia swoje własne problemy i pewne trudności w nauce użytkowania, i jak mówię, im więcej masz zależności, tym więcej może pójść nie tak. I dlatego lubię się pozbywać takich narzędzi.

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ł:

• https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4
• http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/
• https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

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ć.

1. Zainstaluj bibliotekę za pomocą polecenia: jspm install jquery
2. 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!");

3. Następnie skonfiguruj te rzeczy System.config({ ... })przed zaimportowaniem modułu. Zwykle po uruchomieniu jspm initpojawi się plik nazwany config.jsw tym celu.

4. 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.

OK, wszystkie mają pewne podobieństwa, robią to samo dla ciebie na różne i podobne sposoby, dzielę je na 3 główne grupy, jak poniżej:

webpack i przeglądaj jako popularne, działają jak programy uruchamiające zadania, ale z większą elastycznością, a także połączy wszystko razem jako twoje ustawienie, dzięki czemu możesz wskazać wynik jako bundle.js na przykład w jednym pliku, w tym CSS i JavaScript, dla więcej szczegółów każdego z nich, spójrz na szczegóły poniżej:

paczka internetowa

webpack to pakiet modułów dla nowoczesnych aplikacji JavaScript. Gdy webpack przetwarza aplikację, rekurencyjnie tworzy wykres zależności, który obejmuje każdy moduł, którego potrzebuje Twoja aplikacja, a następnie spakowuje wszystkie te moduły w niewielką liczbę pakietów - często tylko jeden - do załadowania przez przeglądarkę.

Jest niezwykle konfigurowalny, ale aby rozpocząć, musisz zrozumieć tylko cztery podstawowe pojęcia: wejście, wyjście, programy ładujące i wtyczki.

Niniejszy dokument ma na celu przedstawienie ogólnego przeglądu tych pojęć, a także łącza do szczegółowych przypadków użycia określonych pojęć.

więcej tutaj

przeglądaj

Browserify to narzędzie programistyczne, które pozwala nam pisać moduły w stylu node.js, które kompilują się do użycia w przeglądarce. Podobnie jak węzeł, piszemy nasze moduły w osobnych plikach, eksportując zewnętrzne metody i właściwości za pomocą modułu. Eksportuje i eksportuje zmienne. Możemy nawet wymagać innych modułów za pomocą funkcji wymaganej, a jeśli pominiemy ścieżkę względną, zostanie ona przetłumaczona na moduł w katalogu node_modules.

więcej tutaj

2) Biegacze zadań

gulp i chrząknięcie to osoby wykonujące zadania, w zasadzie to, co robią, tworzenie zadań i uruchamianie ich w dowolnym momencie, na przykład instalujesz wtyczkę w celu zminimalizowania CSS, a następnie uruchamiasz ją za każdym razem, aby wykonać minimalizację, więcej szczegółów na temat każdego z nich:

łyk

gulp.js to zestaw narzędzi JavaScript typu open source opracowany przez Fractal Innovations i społeczność open source w GitHub, używany jako system kompilacji strumieniowej w tworzeniu aplikacji internetowych. Jest to program uruchamiający zadania oparty na Node.js i Node Package Manager (npm), wykorzystywany do automatyzacji czasochłonnych i powtarzalnych zadań związanych z tworzeniem stron internetowych, takich jak minimalizacja, konkatenacja, pomijanie pamięci podręcznej, testowanie jednostkowe, lintowanie, optymalizacja itp. Używa gulp podejście polegające na konfigurowaniu kodu w celu zdefiniowania jego zadań i do ich realizacji wykorzystuje małe, jednofunkcyjne wtyczki. ekosystem gulp ma ponad 1000 takich wtyczek udostępnionych do wyboru.

więcej tutaj

chrząknięcie

Grunt jest programem uruchamiającym zadania JavaScript, narzędziem służącym do automatycznego wykonywania często używanych zadań, takich jak minimalizacja, kompilacja, testowanie jednostkowe, linting itp. Używa interfejsu wiersza poleceń do uruchamiania niestandardowych zadań zdefiniowanych w pliku (zwanych Gruntfile) . Grunt został stworzony przez Bena Almana i jest napisany w Node.js. Jest dystrybuowany przez npm. Obecnie w ekosystemie Grunt dostępnych jest ponad pięć tysięcy wtyczek.

więcej tutaj

3) Menedżerowie pakietów

menedżerowie pakietów, zarządzają wtyczkami, których potrzebujesz w aplikacji i instalują je za pośrednictwem github itp. za pomocą package.json, bardzo przydatne do aktualizacji modułów, instalacji i udostępniania aplikacji, więcej szczegółów dla każdego z nich:

npm

npm to menedżer pakietów dla języka programowania JavaScript. Jest to domyślny menedżer pakietów dla środowiska wykonawczego JavaScript Node.js. Składa się z klienta wiersza poleceń, zwanego także npm, oraz internetowej bazy danych publicznych pakietów, zwanej rejestrem npm. Rejestr jest dostępny za pośrednictwem klienta, a dostępne pakiety można przeglądać i wyszukiwać za pośrednictwem strony internetowej npm.

więcej tutaj

altana

Bower może zarządzać komponentami zawierającymi HTML, CSS, JavaScript, czcionki, a nawet pliki obrazów. Bower nie konkatenuje, nie modyfikuje kodu ani nie robi nic innego - po prostu instaluje odpowiednie wersje potrzebnych pakietów i ich zależności. Aby rozpocząć, Bower działa, pobierając i instalując pakiety z całego świata, dbając o polowanie, znajdowanie, pobieranie i zapisywanie rzeczy, których szukasz. Bower śledzi te pakiety w pliku manifestu, bower.json.

więcej tutaj

i najnowszego menedżera pakietów, którego nie należy przegapić, jest młody i szybki w prawdziwym środowisku pracy w porównaniu do npm, którego najczęściej używałem wcześniej, w celu ponownej instalacji modułów, sprawdza dwukrotnie folder node_modules, aby sprawdzić istnienie modułu, wydaje się również, że instalacja modułów zajmuje mniej czasu:

przędza

Yarn jest menedżerem pakietów dla twojego kodu. Pozwala na używanie i udostępnianie kodu innym programistom z całego świata. Przędza robi to szybko, bezpiecznie i niezawodnie, więc nigdy nie musisz się martwić.

Yarn pozwala korzystać z rozwiązań innych programistów dotyczących różnych problemów, ułatwiając ci tworzenie oprogramowania. Jeśli masz problemy, możesz zgłaszać problemy lub przekazywać je z powrotem, a gdy problem zostanie rozwiązany, możesz użyć Yarn, aby zachować aktualność.

Kod jest współdzielony przez coś zwanego pakietem (czasami nazywanym modułem). Pakiet zawiera cały dzielony kod, a także plik package.json, który opisuje pakiet.

więcej tutaj

Możesz znaleźć techniczne porównanie na npmcompare

Porównując Browserify vs. chrząknięcie vs. gulp vs. webpack

Jak widać webpack jest bardzo dobrze utrzymany, a nowa wersja wychodzi średnio co 4 dni. Ale Gulp wydaje się mieć największą społeczność ze wszystkich (z ponad 20 tysiącami gwiazd na Githubie) Grunt wydaje się nieco zaniedbany (w porównaniu do innych)

Więc jeśli trzeba wybrać jedną z drugiej, wybrałbym Gulpa

Mała uwaga na temat npm: npm3 próbuje zainstalować zależności w płaski sposób

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

Co to jest webpack i webpack-dev-server? Oficjalna dokumentacja mówi, że jest to moduł do pakowania modułów, ale dla mnie to tylko program do wykonywania zadań. Co za różnica?

webpack-dev-server to serwer przeładowujący na żywo, z którego korzystają programiści Webpack, aby uzyskać natychmiastową informację zwrotną o tym, co robią. Należy go używać tylko podczas programowania.

Ten projekt jest mocno zainspirowany narzędziem testowym jednostki nof5 .

Pakiet Web, jak sama nazwa wskazuje, utworzy POJEDYNCZY pakiet dla sieci . Pakiet zostanie zminimalizowany i połączony w jeden plik (wciąż żyjemy w wieku HTTP 1.1). WebPACK czyni magię łączenie zasobów (JavaScript, CSS, obrazy) i wstrzykując im tak: <script src="assets/bundle.js"></script>.

Można go również nazwać programem pakującym moduły, ponieważ musi zrozumieć zależności między modułami, a także sposób chwytania zależności i łączenia ich w pakiety.

Gdzie skorzystasz z Browserify? Czy nie możemy zrobić tego samego z importem węzła / ES6?

Możesz użyć Browserify do tych samych zadań, w których używałbyś pakietu Webpack . - Webpack jest jednak bardziej kompaktowy.

Zauważ, że funkcje modułu ładującego ES6 w Webpack2 używają System.import , który natywnie nie obsługuje żadnej przeglądarki.

Kiedy użyjesz gulp / grunt na npm + wtyczki?

Możesz zapomnieć o Gulp, Grunt, Brokoli, Brunch i Bower . Zamiast tego użyj bezpośrednio skryptów wiersza polecenia npm i możesz wyeliminować dodatkowe pakiety takie jak tutaj dla Gulp :

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

Prawdopodobnie możesz użyć generatorów plików konfiguracyjnych Gulp i Grunt podczas tworzenia plików konfiguracyjnych dla swojego projektu. W ten sposób nie musisz instalować Yeoman ani podobnych narzędzi.

Yarn to najnowszy menedżer pakietów, który prawdopodobnie zasługuje na wzmiankę.
Oto on: https://yarnpkg.com/

O ile mi wiadomo, może pobierać zarówno zależności npm, jak i altany i ma inne cenione funkcje.

Webpackjest pakietem. Jak Browserfywygląda w bazie kodu dla żądań modułów ( requirelub import) i rozwiązuje je rekurencyjnie. Co więcej, możesz skonfigurować Webpackrozwiązanie nie tylko modułów podobnych do JavaScript, ale CSS, obrazów, HTML, dosłownie wszystkiego. Co mnie szczególnie ekscytuje Webpack, możesz łączyć zarówno skompilowane, jak i dynamicznie ładowane moduły w tej samej aplikacji. W ten sposób uzyskuje się prawdziwy wzrost wydajności, szczególnie w przypadku HTTP / 1.x. Jak dokładnie to robisz, opisałem tutaj przykładami http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Jako alternatywę dla bundlera można pomyśleć Rollup.js( https://rollupjs.org/ ) , co optymalizuje kod podczas kompilacji, ale usuwa wszystkie nieużywane fragmenty.

Bo AMDzamiast RequireJSjednego można przejść z rodzimym ES2016 module system, ale załadowanym System.js( https://github.com/systemjs/systemjs )

Poza tym wskazałbym, że npmjest często używany jako narzędzie automatyzujące, takie jak gruntlub gulp. Sprawdź https://docs.npmjs.com/misc/scripts . Teraz osobiście korzystam ze skryptów npm, unikając innych narzędzi automatyzacji, chociaż w przeszłości byłem bardzo zainteresowany grunt. Z innymi narzędziami musisz polegać na niezliczonych wtyczkach do pakietów, które często nie są dobrze napisane i nie są aktywnie utrzymywane. npmzna jego pakiety, więc wywołujesz dowolne z lokalnie zainstalowanych pakietów według nazwy, np .:

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

Właściwie to z reguły nie potrzebujesz żadnej wtyczki, jeśli pakiet obsługuje CLI.