NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack

Aktualizacja Czerwiec 2018

Nauka współczesnego JavaScript jest trudna, jeśli nie byłeś tam od początku. Jeśli jesteś nowym przybyszem, pamiętaj, aby sprawdzić to doskonałe napisane, aby mieć lepszy przegląd.

Https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

Aktualizacja Lipiec 2017

Https://github.com/grab/front-end-guide

Szukałem tego od dłuższego czasu, ponieważ istnieje wiele narzędzi i każdy z nich przynosi nam korzyści w innym aspekcie. Społeczność jest podzielona na narzędzia takie jak Browserify, Webpack, jspm, Grunt and Gulp. Można również usłyszeć o Yeoman or Slush. To nie jest naprawdę problem, to jest po prostu mylące dla wszystkich próbujących zrozumieć oczyścić drogę do przodu.

W każdym razie, chciałbym coś wnieść.

1. Menedżer Pakietów

Menedżery pakietów upraszczają instalowanie i aktualizowanie zależności projektu, które są bibliotekami takimi jak: jQuery, Bootstrap, itp. - wszystko, co jest używane na twojej stronie i nie jest napisane przez Ciebie.

Przeglądanie wszystkich stron biblioteki, pobieranie i rozpakowywanie archiwów, kopiowanie plików do projektów - wszystko to jest zastępowane kilkoma poleceniami w terminal.

• NPM oznacza: Node JS package manager pomaga zarządzać wszystkimi bibliotekami, na których opiera się Twoje oprogramowanie. Można zdefiniować swoje potrzeby w pliku o nazwie package.json i uruchomić npm install w wierszu poleceń... następnie BANG, twoje pakiety są pobierane i gotowe do użycia. Może być używany zarówno dla front-end and back-end bibliotek.

• Bower: W przypadku zarządzania pakietami front-end koncepcja jest taka sama w przypadku NPM. Wszystkie biblioteki są przechowywane w pliku o nazwie bower.json następnie uruchom bower install w wierszu poleceń.

Największą różnicą między Bower a NPM jest to, że NPM nie 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 Bowerem 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

Bower

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Są pewne aktualizacje na npm 3 Duplication and Deduplication, proszę otworzyć dokument, aby uzyskać więcej szczegółów.

• Yarn: nowy menedżer pakietów dla JavaScript opublikowany przez Facebook ostatnio z pewnymi dodatkowymi zaletami w porównaniu do NPM. I z włóczki, nadal można używać zarówno NPMoraz Bower rejestr, aby pobrać pakiet. Jeśli wcześniej zainstalowałeś pakiet, yarn tworzy kopię w pamięci podręcznej, która ułatwia offline package installs.

• jspm: jest menedżerem pakietów do uniwersalnej ładowarki modułowej SystemJS, zbudowanej na bazie dynamicznej ładowarki modułowej ES6. Nie jest to całkowicie nowy menedżer pakietów z własnym zestawem reguł, raczej działa na bazie istniejących źródeł pakietów. Po wyjęciu z pudełka działa z GitHub i npm. Ponieważ większość pakietów {[26] } bazuje na GitHub, możemy zainstalować te pakiety również używając jspm. Posiada rejestr, który zawiera listę większości powszechnie używanych pakietów front-end dla łatwiejszego instalacja.

Zobacz inne Bower oraz jspm: Menedżer pakietów: Bower vs jspm

2. Module Loader / Bundling

Większość projektów w dowolnej skali będzie miała swój kod dzielony między kilka plików. Możesz po prostu dołączyć każdy plik z indywidualnym tagiem <script>, jednak <script> ustanawia nowe połączenie http, a dla małych plików - co jest celem modułowości – czas na skonfigurowanie połączenia może potrwać znacznie dłużej niż przesyłanie danych. Podczas pobierania skryptów Żadna zawartość nie może być zmieniana na stronie.

• problem czasu pobierania można w dużej mierze rozwiązać, łącząc grupę prostych modułów w jeden plik i minifikując go.

E. g

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>

[154]}wydajność jest kosztem elastyczności. Jeśli Twoje moduły mają wzajemne zależności, ten brak elastyczność może być showstopperem.

E. g

<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, aby automatycznie połączyć wszystko w jeden plik.

Potem usłyszeliśmy o RequireJS, Browserify, Webpack oraz SystemJS

• RequireJS: jest JavaScript programem do ładowania plików i modułów. 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.js, możemy importować myModule.js jako zależność i używać jej.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

A następnie w naszym HTML, możemy odnieść się do użycia z RequireJS.

<script src=“app/require.js” data-main=“main.js” ></script>

Przeczytaj więcej o CommonJS i AMD aby łatwo zrozumieć. związek między CommonJS, AMD i RequireJS?

• Browserify: ustawione, aby umożliwić korzystanie z CommonJS sformatowanych modułów w przeglądarce. W związku z tym, Browserify nie jest tak samo czytnikiem modułów, jak bundlerem modułów: Browserify jest całkowicie narzędziem w czasie kompilacji, produkującym pakiet kodu, który może być załadowany po stronie klienta.

Zacznij od maszyny zbudowanej z zainstalowanym node & npm i pobierz pakiet:

npm install -g –save-dev browserify

Zapisz swoje moduły w formacie CommonJS

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

I kiedy będzie szczęśliwy, wydaj polecenie do bundle:

browserify entry-point.js -o bundle-name.js

Browserify rekurencyjnie wyszukuje wszystkie zależności punktu wejścia i montuje ich w jednym pliku:

<script src=”bundle-name.js”></script>

• Webpack: łączy wszystkie twoje zasoby statyczne, w tym JavaScript, obrazy, CSS i inne, w jeden plik. Umożliwia również przetwarzanie plików za pomocą różnych typów ładowarek. Możesz napisać swój JavaScript za pomocą składni CommonJS lub AMD. Atakuje problem budowania w zasadniczo bardziej zintegrowany i opiniotwórczy sposób. W Browserify używasz Gulp/Grunt i długiej listy przekształceń i wtyczek, aby wykonać zadanie. Po wyjęciu z pudełka zapewnia wystarczającą moc, której zazwyczaj nie potrzebujesz.

Podstawowe użycie nie jest proste. Zainstaluj Webpack jak Browserify:

npm install -g –save-dev webpack

I przekazać polecenie punkt wejścia i plik wyjściowy:

webpack ./entry-point.js bundle-name.js

• SystemJS: jest to moduł ładujący, który może importować Moduły w czasie pracy w dowolnym z popularnych formatów używanych obecnie (CommonJS, UMD, AMD, ES6). Zbudowany jest na bazie modułu Ładowarki ES6 polyfill i jest wystarczająco inteligentny, aby wykryć używany format i odpowiednio go obsłużyć. SystemJS może również transpile kod ES6 (z Babel lub Traceur) lub innych języków, takich jak TypeScript i CoffeeScript za pomocą wtyczek.

Chcesz wiedzieć, co to jest node module i dlaczego nie jest dobrze przystosowany do in-browser.

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 jspm i SystemJS?

Jednym z głównych celów ES6 modułowości jest uczynienie go naprawdę prostym aby zainstalować i używać dowolnej biblioteki Javascript z dowolnego miejsca na Internet (Github, npm, itd.). Tylko dwie rzeczy są potrzebne:

• pojedyncze polecenie instalacji biblioteki
• jedna linijka kodu do zaimportowania biblioteki i użycia jej

Więc z jspm, możesz to zrobić.

1. zainstaluj bibliotekę poleceniem: jspm install jquery
2. Importuj bibliotekę za pomocą jednej linii kodu, bez potrzeby zewnętrznego odniesienia wewnątrz pliku HTML.

Wyświetlacz.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");

1. Wtedy ty skonfigurować te rzeczy w System.config({ ... }) przed importowanie modułu. Zwykle po uruchomieniu jspm init pojawi się plik nazwane config.js w tym celu.

2. Aby Skrypty działały, musimy załadować system.js i config.js na stronę HTML. Następnie załadujemy plik display.js używając Ładowarka modułu SystemJS.

Indeks.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

Zauważono: Możesz również użyć npm z Webpack, ponieważ Angular 2 zastosował go. Od jspm został opracowany do integracji z SystemJS i działa na podstawie istniejącego źródła npm, więc Twoja odpowiedź zależy od Ciebie.

3. Task runner

Biegacze zadań i narzędzia budowania to przede wszystkim narzędzia wiersza poleceń. Dlaczego musimy ich używać: jednym słowem: automatyzacja . Mniej pracy trzeba wykonać podczas wykonywania powtarzalnych zadań, takich jak minifikacja, kompilacja, testowanie jednostkowe, linting, które wcześniej kosztowały nas wiele razy do wykonaj z wiersza poleceń lub nawet ręcznie.

• Grunt: możesz stworzyć automatyzację dla swojego środowiska programistycznego, aby wstępnie przetworzyć kody lub utworzyć Skrypty kompilacji z plikiem konfiguracyjnym i wydaje się to bardzo trudne do obsługi złożonego zadania. Popularny w ostatnich latach.

Każde zadanie w Grunt jest szeregiem różnych konfiguracji wtyczek, które po prostu są wykonywane jedna po drugiej, w ściśle niezależnej i sekwencyjnej Moda.

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 tak jak Grunt, ale zamiast konfiguracji, możesz pisać JavaScript ze strumieniami, jakby to była aplikacja węzła. Wolę te dni.

To jest Gulp przykładowa deklaracja zadań.

//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. Rusztowania narzędzia

• Slush and Yeoman: możesz za ich pomocą tworzyć projekty startowe. Na przykład planujesz zbudować prototyp z HTML i SCSS, a następnie zamiast ręcznie utworzyć jakiś folder, taki jak scss, css, img, czcionki. Możesz po prostu zainstalować yeoman i uruchomić prosty skrypt. Potem wszystko 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ę dopasowana do treści pytania, ale kiedy szukam tej wiedzy w Google, zawsze widzę pytanie na górze, więc postanowiłem odpowiedzieć w podsumowaniu. Mam nadzieję, że to wam pomogło.

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

Porównanie browserify vs. grunt 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ść z nich wszystkich (z ponad 20K gwiazd na Github) Grunt wydaje się nieco zaniedbany (w porównaniu do innych)

Więc jeśli trzeba wybrać jeden nad drugim, to pójdę z Gulp

OK, wszystkie mają pewne podobieństwa, robią to samo dla Ciebie w inny i podobny sposób, dzielę je na 3 główne grupy Jak Poniżej:

Webpack i browserify jako popularne, działają jak biegacze zadań, ale z większą elastycznością, a także połączy wszystko razem jako ustawienie, dzięki czemu możesz wskazać wynik jako pakiet.js na przykład w jednym pliku, w tym CSS i Javascript, aby uzyskać więcej szczegółów każdy, spójrz na szczegóły poniżej:

Webpack

Webpack jest pakietem modułów dla nowoczesnych aplikacji JavaScript. Kiedy webpack przetwarza Twoją aplikację, rekurencyjnie buduje zależność wykresu, który zawiera każdy moduł potrzebny Twojej aplikacji, a następnie Pakiety wszystkie te moduły w niewielkiej liczbie pakietów-często tylko jeden - do załadowania przez przeglądarkę.

Jest to niewiarygodnie konfigurowalne, ale aby rozpocząć, wystarczy zrozumieć Cztery podstawowe pojęcia: wejście, wyjście, Ładowarki i wtyczki.

Niniejszy dokument ma na celu przedstawienie przeglądu tych pojęć, przy jednoczesnym podawaniu linków do szczegółowych pojęć specyficznych przypadki użycia.

Więcej tutaj

Browserify

Browserify jest narzędziem programistycznym, które pozwala nam pisać węzeł.js-style moduły, które kompilują się do użytku w przeglądarce. Tak jak node, piszemy nasze moduły w osobnych plikach, eksportując metody zewnętrzne i właściwości za pomocą modułu.eksport i zmienne eksportowe. Możemy nawet wymagać innych modułów za pomocą funkcji require, a jeśli pominiemy ścieżka względna zostanie rozwiązana do modułu w node_modules katalog.

Więcej tutaj

2) task runners

Gulp i grunt to biegacze zadań, w zasadzie to co robią, tworzenie zadań i uruchamianie ich kiedy tylko chcesz, np. instalujesz wtyczkę do minifigurki CSS i następnie uruchom go za każdym razem, aby zrobić minifying, więcej szczegółów na temat każdego:

Gulp

Łyk.js to open-source JavaScript toolkit firmy Fractal Innovations i społeczności open source na Githubie, używanej jako streaming build system W front-end web development. Jest to zadanie zbudowane na Węzeł.JS i Node Package Manager (npm), wykorzystywane do automatyzacji czasochłonne i powtarzalne zadania związane z tworzeniem stron internetowych, takie jak minifikacja, konkatenacja, burzenie pamięci podręcznej, testy jednostkowe, linting, optymalizacja itp. gulp wykorzystuje podejście code-over-configuration do definiować swoje zadania i polega na małych, jednostronnych wtyczkach do Wyprowadźcie ich. gulp ekosystem ma 1000 + takich wtyczek udostępnionych do wyboru.

Więcej tutaj

Grunt

Grunt to JavaScript task runner, narzędzie służące do automatycznego wykonywać często używane zadania, takie jak minifikacja, kompilacja, Jednostka testowanie, linting itp. Używa interfejsu wiersza poleceń do uruchamiania niestandardowych zadania zdefiniowane w pliku (znany jako Gruntfile). Grunt został stworzony przez Ben Alman i jest napisane w Node.js. Jest dystrybuowany za pośrednictwem npm. Obecnie dostępnych jest ponad pięć tysięcy wtyczek w Grunt ekosystem.

Więcej tutaj

3) Zarządzanie pakietami

Menedżerowie pakietów, to co robią to zarządzanie wtyczkami, których potrzebujesz w swojej aplikacji i instalowanie ich za ciebie przez github itp korzystanie z pakietu.json, bardzo przydatny do aktualizacji modułów, zainstalowania ich i udostępniania aplikacji w całej, więcej szczegółów dla każdego:

Npm

Npm jest menedżerem pakietów dla języka programowania JavaScript. Informatyka jest domyślnym menedżerem pakietów dla środowiska uruchomieniowego JavaScript Węzeł.js. Składa się z klienta wiersza poleceń, zwanego również npm, oraz internetowa baza pakietów publicznych, zwana rejestrem npm. Na rejestr jest dostępny za pośrednictwem klienta, a dostępne pakiety mogą być przeglądane i wyszukiwane za pośrednictwem strony internetowej npm.

Więcej tutaj

Bower

Bower może zarządzać komponentami zawierającymi HTML, CSS, JavaScript, czcionki lub nawet plików graficznych. Bower nie łączy ani nie minifikuje kodu ani nie cokolwiek innego-po prostu instaluje odpowiednie wersje pakietów potrzebujesz i ich zależności. Aby rozpocząć, Bower działa pobierając i instalując pakiety z / align = "left" / polowania, znajdowania, pobierania i ratowania rzeczy, których szukasz. Bower śledzi te pakiety w plik manifestu, bower.json.

Więcej tutaj

I najnowszy menedżer pakietów, którego nie należy przegapić, jest młody i szybki w prawdziwym środowisku pracy w porównaniu do npm, którego głównie używałem wcześniej, do ponownej instalacji modułów, sprawdza dwukrotnie folder node_modules, aby sprawdzić istnienie modułu, wydaje się również instalować Moduły zajmuje mniej czasu:

Przędza

Yarn jest menedżerem pakietów dla Twojego kodu. Pozwala na wykorzystanie i udostępniaj kod innym programistom z całego świata. Yarn does this szybko, bezpiecznie i niezawodnie, dzięki czemu nigdy nie musisz się martwić.

Yarn pozwala na wykorzystanie rozwiązań innych programistów do różnych problemy, ułatwiając rozwój oprogramowania. Jeśli masz problemy, możesz zgłaszać problemy lub przyczyniać się do nich, a gdy problem jest naprawiony, możesz użyć przędzy, aby utrzymać to wszystko na bieżąco.

Kod jest współdzielony przez coś, co nazywa się pakietem (czasami określanym jako moduł). Pakiet zawiera również cały kod udostępniany w pakiecie.plik json opisujący pakiet.

Więcej tutaj

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

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

Czym jest webpack & webpack-dev-server? Oficjalna dokumentacja mówi, że jest to moduł bundler, ale dla mnie to tylko zadanie runner. Co za różnica?

Webpack-dev-server jest serwerem WWW do przeładowywania na żywo, który Webpack jest używany przez programistów, aby uzyskać natychmiastową informację zwrotną o tym, co robią. Należy go stosować tylko podczas opracowywania produktu.

Ten projekt jest mocno inspirowany nof5 jednostkowym narzędziem testowym.

Webpack jak sama nazwa wskazuje utworzy pojedynczy packwiek dla www. Pakiet zostanie zminimalizowany i połączony w jeden plik(nadal żyjemy w epoce HTTP 1.1). Webpack robi magię łączenia zasobów (JavaScript, CSS, obrazy) i wstrzykiwania ich w następujący sposób: <script src="assets/bundle.js"></script>.

Może być również nazywany module bundler ponieważ musi rozumieć zależności modułów oraz jak je przechwytywać i łączyć ze sobą.

Gdzie używasz browserify? Czy nie możemy zrobić tego samego z importem node/ES6?

Możesz użyć Browserify do dokładnie tych samych zadań, w których chcesz użyćWebpack . - Webpack jest jednak bardziej kompaktowy.

Zauważ, że Funkcje modułu ES6 W Webpack2 używają systemu .import , którego natywnie nie obsługuje Żadna przeglądarka.

Kiedy użyłbyś gulp / grunt nad wtyczkami npm+?

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'),

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

Yarn jest najnowszym menedżerem pakietów, który prawdopodobnie zasługuje na wzmiankę. Tak, tam: https://yarnpkg.com/

Afaik, może pobierać zarówno zależności npm, jak i bower i ma inne cenione funkcje.

StackShare zapewnia side-by-side (lub stos) trzech narzędzi jednocześnie.

Oto dla npm vs. Bower vs. Browserify i dla gulp vs. Webpack vs. Grunt

Na tych stronach porównawczych można znaleźć:

• liczba głosów, które każdy otrzymał od społeczności StackShare
• które firmy używają ich w swoim stosie technologii
• poziom oprocentowania dla każdego okresu
• plusy dla każdego narzędzie

Webpack to bundler. Podobnie jak {[2] } wygląda w bazie kodowej dla żądań modułów (require lub import) i rozwiązuje je rekurencyjnie. Co więcej, możesz skonfigurować Webpack, aby rozwiązywać nie tylko Moduły podobne do JavaScript, ale także CSS, obrazy, HTML, dosłownie wszystko. 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 można uzyskać rzeczywisty wzrost wydajności, szczególnie przez HTTP / 1.x. jak dokładnie to robisz opisałem z przykłady tutaj http://dsheiko.com/weblog/state-of-javascript-modules-2017 / Jako alternatywę dla bundlera można pomyśleć o Rollup.js (https://rollupjs.org/), który optymalizuje kod podczas kompilacji, ale usuwa wszystkie znalezione nieużywane kawałki.

Dla AMD, zamiast RequireJS można wybrać natywne ES2016 module system, ale ładowane z System.js (https://github.com/systemjs/systemjs )

Poza tym, chciałbym zauważyć, że npm jest często używany jako narzędzie automatyzujące jak grunt lub gulp. Sprawdź https://docs.npmjs.com/misc/scripts . ja osobiście chodzę teraz ze skryptami npm, unikając tylko innych narzędzi automatyzacji, choć kiedyś bardzo lubiłem 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. npm zna swoje pakiety, więc wywołujesz dowolny z lokalnie zainstalowanych pakietów po nazwie, jak:

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

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