Vraag NPM versus Bower versus Browserify versus Gulp versus Grunt versus Webpack


Ik probeer mijn kennis over de populairste JavaScript-pakketbeheerders, -bundelaars en taaklopers samen te vatten. Corrigeer me als ik het fout heb:

  • npm & bower zijn pakketbeheerders. Ze downloaden alleen de afhankelijkheden en weten niet hoe ze zelfstandig projecten kunnen bouwen. Wat ze weten is bellen webpack/gulp/grunt na het ophalen van alle afhankelijkheden.
  • bower is als npm, maar bouwt afgevlakte afhankelijkheden van bomen (in tegenstelling tot npm die het recursief doen). Betekenis npm haalt de afhankelijkheden op voor elke afhankelijkheid (kan dit een paar keer hetzelfde ophalen), terwijl bower verwacht dat u handmatig subafhankelijkheden opneemt. Soms bower en npm worden samen gebruikt voor respectievelijk het front-end en back-end (aangezien elke megabyte van belang kan zijn aan de voorkant).
  • grunt en gulp zijn task runners om alles te automatiseren dat kan worden geautomatiseerd (dat wil zeggen CSS / Sass compileren, afbeeldingen optimaliseren, een bundel maken en deze verkleinen / transponeren).
  • grunt vs. gulp (is als maven vs. gradle of configuratie versus code). Grunt is gebaseerd op het configureren van afzonderlijke, onafhankelijke taken, elke taak opent / verwerkt / sluit bestand. Gulp vereist minder hoeveelheid code en is gebaseerd op knooppuntstreams, waardoor het pijpkettingen kan bouwen (zonder hetzelfde bestand opnieuw te openen) en sneller wordt.
  • webpack (webpack-dev-server) - voor mij is het een taakrunner met het warm opnieuw laden van wijzigingen waarmee je alle JS / CSS-watchers kunt vergeten.
  • npm/bower + plug-ins kunnen taaklopers vervangen. Hun vaardigheden kruisen elkaar vaak, dus er zijn verschillende implicaties als je ze moet gebruiken gulp/grunt over- npm + plug-ins. Maar taaklopers zijn zeker beter voor complexe taken (bijvoorbeeld "op elke build-bundel maken, transponeren van ES6 naar ES5, het uitvoeren op alle emulators van browsers, screenshots maken en deployen naar dropbox via ftp").
  • browserify maakt het mogelijk knoopmodules te verpakken voor browsers. browserify vs node's require is eigenlijk AMD tegen CommonJS.

vragen:

  1. Wat is webpack & webpack-dev-server? Officiële documentatie zegt dat het een modulebundelaar is, maar voor mij is het gewoon een taakloper. Wat is het verschil?
  2. Waar zou je gebruiken? browserify? Kunnen we niet hetzelfde doen met de import van node / ES6? 
  3. Wanneer zou je gebruiken? gulp/grunt over- npm + plug-ins?
  4. Geef voorbeelden wanneer u een combinatie moet gebruiken

1505
2018-01-28 13:28


oorsprong


antwoorden:


Webpack en Browserify

Webpack en Browserify doen vrijwel hetzelfde werk het verwerken van uw code voor gebruik in een doelomgeving (voornamelijk browser, hoewel u zich op andere omgevingen zoals Node kunt richten). Het resultaat van een dergelijke verwerking is een of meer bundels - geassembleerde scripts geschikt voor een doelgerichte omgeving.

Stel dat u bijvoorbeeld een ES6-code hebt geschreven die is onderverdeeld in modules en die u in de browser wilt kunnen uitvoeren. Als die modules knoopmodules zijn, begrijpt de browser ze niet omdat ze alleen in de knooppuntomgeving bestaan. ES6-modules werken ook niet in oudere browsers zoals IE11. Bovendien had je misschien experimentele taalkenmerken (ES volgende voorstellen) gebruikt die browsers nog niet implementeren, dus zou het uitvoeren van zo'n script gewoon fouten veroorzaken. Die tools zoals Webpack en Browserify lossen deze problemen op het vertalen van zo'n code naar een formulierbrowser kan worden uitgevoerd. Bovendien maken ze het mogelijk om een ​​grote verscheidenheid aan optimalisaties toe te passen op die bundels.

Webpack en Browserify verschillen echter op verschillende manieren, Webpack biedt standaard vele hulpprogramma's (bijvoorbeeld code splitsen), terwijl Browserify dit alleen kan doen na het downloaden van plug-ins, maar beide leads gebruiken voor zeer vergelijkbare resultaten. Het komt neer op persoonlijke voorkeur (Webpack is trendier). Tussen haakjes, Webpack is geen taakloper, het is gewoon een processor van je bestanden (het verwerkt ze door zogenaamde loaders en plug-ins) en het kan (onder andere manieren) worden uitgevoerd door een taakloper.


Webpack Dev Server

Webpack Dev Server biedt een soortgelijke oplossing voor Browsersync - een ontwikkelingsserver waarmee u uw app snel kunt implementeren terwijl u eraan werkt en uw ontwikkelingsvoortgang direct kunt verifiëren, waarbij de dev-server de browser automatisch vernieuwt bij het wijzigen van code of zelfs gewijzigde code doorgeeft aan browser zonder opnieuw te laden met de vervanging van de zogenaamde hotmodule.


Taaklopers versus NPM-scripts

Ik heb Gulp gebruikt vanwege de bondigheid en het gemakkelijk schrijven van taken, maar heb later ontdekt dat ik Gulp en Grunt helemaal niet nodig heb. Alles wat ik ooit nodig had, had met NPM-scripts kunnen worden gedaan om hulpprogramma's van derden via hun API uit te voeren. Kiezen tussen Gulp, Grunt of NPM-scripts hangt af van de smaak en ervaring van uw team.

Hoewel taken in Gulp of Grunt gemakkelijk te lezen zijn, zelfs voor mensen die niet zo bekend zijn met JS, is het nog een ander hulpmiddel om te vereisen en te leren en persoonlijk verklein ik mijn afhankelijkheden en maak ik dingen eenvoudig. Aan de andere kant, deze taken vervangen door de combinatie van NPM-scripts en (waarlijk JS) scripts die deze 3rd party tools uitvoeren (bijv. Node script configureren en uitvoeren rimraf voor schoonmaakdoeleinden) kan een grotere uitdaging zijn. Maar in de meeste gevallen die drie zijn gelijk in termen van resultaten.


Voorbeelden

Wat de voorbeelden betreft, stel ik voor dat je dit eens bekijkt Reactiestartproject, die je een mooie combinatie van NPM- en JS-scripts laat zien die het hele build- en deploy-proces beslaan. U kunt die NPM-scripts vinden in package.json in de hoofdmap, in een eigenschap met de naam scripts. Daar kom je vooral opdrachten tegen zoals babel-node tools/run start. Babel-node is een CLI-tool (niet bedoeld voor productiegebruik), die eerst het ES6-bestand compileert tools/run (bestand run.js bevindt zich in gereedschap) - eigenlijk een runner-utility. Deze runner neemt een functie als een argument en voert deze uit, wat in dit geval het geval is start - een ander hulpprogramma (start.js) dat verantwoordelijk is voor het bundelen van bronbestanden (zowel client als server) en het starten van de applicatie- en ontwikkelingsserver (de dev-server zal waarschijnlijk ofwel Webpack Dev Server of Browsersync zijn).

Preciezer gezegd, start.js maakt zowel client- als serverzijbundels, start express server en na succesvolle start inits Browser-sync, die op het moment van schrijven er zo uitzag (raadpleeg reageren startproject voor de nieuwste code).

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)

Het belangrijke deel is proxy.target, waar ze het serveradres instellen dat ze willen proxyen, wat zou kunnen zijn http: // localhost: 3000en Browsersync start een server waarop wordt geluisterd http: // localhost: 3001, waar de gegenereerde assets worden bediend met automatische detectie van wijzigingen en vervanging van hotmodule. Zoals u kunt zien, is er nog een configuratie-eigenschap files met individuele bestanden of patronen Browser-sync kijkt naar veranderingen en laadt de browser opnieuw als sommige zich voordoen, maar zoals de opmerking zegt, Webpack zorgt ervoor dat hij js-bronnen zelf bekijkt met HMR, dus werken ze daar samen.

Nu heb ik geen gelijkwaardig voorbeeld van zo'n Grunt of Gulp-configuratie, maar met Gulp (en enigszins vergelijkbaar met Grunt) zou je individuele taken schrijven in gulpfile.js zoals

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

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

waar je in wezen vrijwel dezelfde dingen zou doen als in de starterskit, dit keer met taakrunner, die een aantal problemen voor je oplost, maar zijn eigen problemen en wat moeilijkheden presenteert tijdens het leren van het gebruik, en zoals ik zeg, de meer afhankelijkheden die je hebt, hoe meer er mis kan gaan. En dat is de reden dat ik graag van dergelijke hulpmiddelen af ​​ben.


795
2018-01-28 14:34



Update juni 2018

Het leren van modern JavaScript is moeilijk als je er sinds het begin niet meer bent geweest. Als u de nieuwkomer bent, vergeet dan niet om deze uitstekende tekst te controleren om een ​​beter overzicht te krijgen.

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

Update juli 2017

Onlangs vond ik een zeer uitgebreide gids van het Grab-team over hoe je de front-end ontwikkeling in 2017 kunt benaderen. Je kunt het hieronder bekijken.

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


Ik ben hier al geruime tijd naar op zoek, omdat er veel tools beschikbaar zijn en ze ons allemaal op een ander aspect ten goede komen. De community is verdeeld over tools zoals Browserify, Webpack, jspm, Grunt and Gulp. U kunt ook over horen Yeoman or Slush. Dat is niet echt een probleem, het is gewoon verwarrend voor iedereen die een duidelijk pad voorwaarts probeert te begrijpen.

Maar goed, ik zou graag iets willen bijdragen.

1. Pakketmanager 

Pakketbeheerders vereenvoudigen het installeren en bijwerken van projectafhankelijkheden, zoals bibliotheken zoals: jQuery, Bootstrap, enz. - alles wat op uw site wordt gebruikt en niet door u is geschreven.

Bladeren door alle bibliotheekwebsites, downloaden en uitpakken van de archieven, kopiëren van bestanden naar de projecten - dit alles wordt vervangen door een paar opdrachten in de terminal.

  • NPM betekent: Node JS package manager helpt u bij het beheer van alle bibliotheken waar uw software op vertrouwt. U zou uw behoeften definiëren in een bestand met de naam package.json en loop npm install in de opdrachtregel ... en vervolgens BANG, zijn uw pakketten gedownload en klaar voor gebruik. Kan zowel voor worden gebruikt front-end and back-end bibliotheken.

  • Bower: voor front-end pakketbeheer is het concept hetzelfde met NPM. Al uw bibliotheken worden opgeslagen in een bestand met de naam bower.json en ren dan bower install in de opdrachtregel.

Het grootste verschil tussen Bower en NPM is dat NPM genest is   afhankelijkheidsboom terwijl Bower een flat-dependency-structuur vereist, zoals hieronder.

Citeren van Wat is het verschil tussen Bower en 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

Prieel

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

Er zijn enkele updates over npm 3 Duplication and Deduplication,   open het document voor meer informatie.

  • Yarn: Een nieuwe pakketbeheerder voor JavaScript  gepubliceerd door Facebook onlangs met wat meer voordelen vergeleken met NPM. En met Yarn kun je beide nog steeds gebruiken NPMen Bower register om het pakket op te halen. Als je eerder een pakket hebt geïnstalleerd, yarn maakt een gecachte kopie die vergemakkelijkt offline package installs.

  • jspm: is een pakketbeheerder voor de SystemJS universele module-lader, gebouwd op de top van de dynamiek ES6 module-lader. Het is niet een geheel nieuwe pakketbeheerder met eigen regels, maar werkt eerder bovenop bestaande pakketbronnen. Out of the box, het werkt met GitHub en npm. Zoals de meeste van de Bower gebaseerde pakketten zijn gebaseerd op GitHub, we kunnen die pakketten installeren met behulp van jspm ook. Het heeft een register dat de meeste veelgebruikte front-end pakketten opsomt voor eenvoudige installatie.

Zie het verschil tussen Bower en jspm:    Pakketbeheer: Bower vs jspm


2. Module-lader / bundeling

Bij de meeste projecten van elke schaal wordt de code verdeeld tussen een aantal bestanden. U kunt elk bestand gewoon bij een persoon opnemen <script> tag, echter, <script> maakt een nieuwe http-verbinding en voor kleine bestanden - wat een doel van modulariteit is - kan de tijd voor het opzetten van de verbinding aanzienlijk langer duren dan de overdracht van de gegevens. Terwijl de scripts aan het downloaden zijn, kan er geen inhoud op de pagina worden gewijzigd.

  • Het probleem van de downloadtijd kan grotendeels worden opgelost door een groep eenvoudige modules samen te voegen tot één bestand en het te verkleinen.

bijv

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • De uitvoering gaat echter ten koste van de flexibiliteit. Als uw modules onderling afhankelijk zijn, kan dit gebrek aan flexibiliteit een showstopper zijn.

bijv

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

Computers kunnen dat beter dan u kunt, en daarom zou u een hulpmiddel moeten gebruiken om alles automatisch in één bestand te bundelen.

Toen hoorden we over RequireJS, Browserify, Webpack en SystemJS

  • RequireJS: is een JavaScript bestands- en module-lader. Het is geoptimaliseerd voor in de browser, maar het kan ook in andere JavaScript-omgevingen worden gebruikt Node.

bijv: 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, we kunnen importeren myModule.js als afhankelijkheid en gebruik het.

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

En dan in onze HTML, we kunnen verwijzen naar gebruik met RequireJS.

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

Lees meer over CommonJS en AMD om gemakkelijk begrip te krijgen.    Relatie tussen CommonJS, AMD en RequireJS?

  • Browserify: uiteengezet om gebruik van te toestaan CommonJS geformatteerde modules in de browser. Bijgevolg, Browserify is niet zozeer een module-loader als een module-bundler: Browserify is volledig een build-time tool, het produceren van een bundel van code die vervolgens kan worden geladen client-side.

Begin met een buildmachine waarop node & npm is geïnstalleerd en haal het pakket op:

npm install -g –save-dev browserify

Schrijf uw modules in CommonJSformaat

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

En als het goed is, geeft u het commando om te bundelen:

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

Browserify vindt recursief alle afhankelijkheden van het startpunt en zet ze samen in één bestand:

<script src=”bundle-name.js”></script>
  • Webpack: Het bundelt al uw statische activa, inclusief JavaScript, afbeeldingen, CSS en meer, in een enkel bestand. Het stelt u ook in staat om de bestanden te verwerken via verschillende soorten laders. Je zou je kunnen schrijven JavaScript met CommonJS of AMD modules syntaxis. Het valt het bouwprobleem aan op een fundamenteel meer geïntegreerde en eigenzinnige manier. In Browserify je gebruikt Gulp/Grunt en een lange lijst van transformaties en plug-ins om de klus te klaren. Webpack biedt voldoende stroom uit de doos die u normaal gesproken niet nodig hebt Grunt of Gulp helemaal niet.

Eenvoudig gebruik is eenvoudig. Installeer Webpack zoals Browserify:

npm install -g –save-dev webpack

En geef de opdracht een beginpunt en een uitvoerbestand door:

webpack ./entry-point.js bundle-name.js
  • SystemJS: is een module-lader die kan modules tijdens runtime importeren in een van de populaire formaten vandaag gebruikt (CommonJS, UMD, AMD, ES6). Het is bovenop de ES6 module loader polyfill en is slim genoeg om het gebruikte formaat te detecteren en op de juiste manier te gebruiken. SystemJS kan ook ES6-code transp. (met Babel of Traceur) of andere talen zoals TypeScript en CoffeeScript met behulp van plug-ins.

Wil je weten wat is het node module en waarom het niet goed is aangepast aan in-browser.

Handiger artikel:


Waarom jspm en SystemJS?

Een van de belangrijkste doelen van ES6 modulariteit is om het echt eenvoudig te maken   om een ​​JavaScript-bibliotheek te installeren en te gebruiken vanaf elke locatie op de   Internet (Github, npm, enz.). Er zijn slechts twee dingen nodig:

  • Een enkele opdracht om de bibliotheek te installeren
  • Eén regel code om de bibliotheek te importeren en te gebruiken

Dus met jspm, je kunt het.

  1. Installeer de bibliotheek met een opdracht: jspm install jquery
  2. Importeer de bibliotheek met een enkele regel code, geen behoefte aan externe referentie in uw HTML-bestand.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Vervolgens configureert u deze dingen binnenin System.config({ ... }) voor   het importeren van uw module. Normaal gesproken als het wordt uitgevoerd jspm init, er zal een bestand zijn   genaamd config.js Voor dit doeleinde.

  2. Om deze scripts te laten werken, moeten we laden system.js en config.js op de HTML-pagina. Daarna laden we de display.js bestand gebruiken   de SystemJS module-lader.

index.html

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

Opgemerkt: u kunt ook gebruiken npm met Webpack omdat Angular 2 het heeft toegepast. Sinds jspm is ontwikkeld om te integreren met SystemJS en het werkt bovenop het bestaande npm bron, dus jouw antwoord is aan jou.


3. Taak loper

Taaklopers en build-tools zijn voornamelijk commandoregel-tools. Waarom we ze moeten gebruiken: in één woord: automatisering. Hoe minder werk je hoeft te doen bij het uitvoeren van repetitieve taken zoals minificatie, compilatie, testen van eenheden, pluizenwat ons voorheen veel tijd kostte om te doen met de opdrachtregel of zelfs handmatig.

  • Grunt: U kunt automatisering voor uw ontwikkelomgeving maken om codes vooraf te verwerken of build-scripts te maken met een configuratiebestand en het lijkt erg moeilijk om met een complexe taak om te gaan. Populair in de laatste paar jaar.

Elke taak in Grunt is een reeks verschillende plug-inconfiguraties, die eenvoudig na elkaar worden uitgevoerd, op een strikt onafhankelijke en sequentiële manier.

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: Automatisering net als Grunt maar in plaats van configuraties, kunt u schrijven JavaScript met streams alsof het een knooppunttoepassing is. Geef de voorkeur aan deze dagen.

Dit is een Gulp voorbeeldtaakverklaring.

//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);
});

Bekijk meer: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri


4. Steigermiddelen

  • Slush and Yeoman: U kunt startprojecten met hen maken. U bent bijvoorbeeld van plan om een ​​prototype te bouwen met HTML en SCSS, in plaats van handmatig een map te maken zoals scss, css, img, fonts. Je kunt het gewoon installeren yeoman en voer een eenvoudig script uit. Dan is alles hier voor jou.

Vind meer hier.

npm install -g yo
npm install --global generator-h5bp
yo h5bp

Bekijk meer: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express


Mijn antwoord is niet echt afgestemd op de inhoud van de vraag, maar wanneer ik op zoek ben naar deze kennis op Google, zie ik altijd de vraag bovenaan zodat ik besloot om deze in samenvatting te beantwoorden. Ik hoop dat jullie het nuttig hebben gevonden.


550
2017-10-03 06:23



U kunt een technische vergelijking vinden op npmcompare

Browserify vergeleken met grunt versus gulp versus webpack

Zoals u kunt zien is webpack zeer goed onderhouden, met een nieuwe versie die gemiddeld om de 4 dagen uitkomt. Maar Gulp lijkt de grootste gemeenschap van allemaal te hebben (met meer dan 20.000 sterren op Github) Grunt lijkt een beetje verwaarloosd (in vergelijking met de anderen)

Dus als het nodig is om de ene boven de andere te kiezen, zou ik bij Gulp gaan


45
2018-05-01 09:04



OK, ze hebben allemaal een aantal overeenkomsten, ze doen dezelfde dingen voor jou op verschillende en vergelijkbare manieren, ik deel ze in 3 hoofdgroepen zoals hieronder:


1) Modulebundlers 

webpack en browserify als populaire, werk als taaklopers, maar met meer flexibiliteit, en het zal alles samen bundelen als uw instelling, zodat u naar het resultaat kunt wijzen als bundle.js bijvoorbeeld in een enkel bestand inclusief de CSS en Javascript, voor meer details van elk, bekijk de details hieronder:

webpack

webpack is een modulebundelaar voor moderne JavaScript-toepassingen. Wanneer   webpack verwerkt je applicatie, het bouwt recursief een afhankelijkheid op   grafiek die elke module bevat die uw toepassing nodig heeft, en vervolgens pakketten   al die modules in een klein aantal bundels - vaak slechts één -   om te worden geladen door de browser.

Het is ongelooflijk configureerbaar, maar om te beginnen hoeft u het alleen maar te doen   Four Core Concepts begrijpen: invoer, uitvoer, laders en plug-ins.

Dit document is bedoeld om hier een overzicht op hoog niveau van te geven   concepten, terwijl ze links bieden naar gedetailleerde conceptspecifieke   use-cases.

meer hier

browserify

Browserify is een ontwikkelingshulpmiddel waarmee we node.js-stijl kunnen schrijven   modules die compileren voor gebruik in de browser. Net als een knooppunt, schrijven we   onze modules in afzonderlijke bestanden, externe methoden exporteren en   eigenschappen met behulp van de variabelen module.exports en exports. We kunnen zelfs   andere modules vereisen die de vereiste functie gebruiken, en als we de. weglaten   relatieve pad zal het oplossen naar de module in de node_modules   directory.

meer hier


2) Taaklopers 

gulp en grunt zijn taaklopers, eigenlijk wat ze doen, taken maken en uitvoeren wanneer je maar wilt, bijvoorbeeld je installeert een plug-in om je CSS te verkleinen en voert het elke keer uit om te miniseren, meer details over elk:

slok

gulp.js is een open-source JavaScript-toolkit van Fractal Innovations   en de open source-community op GitHub, gebruikt als een streaming-build   systeem in front-end webontwikkeling. Het is een taakloper die is gebouwd   Node.js en Node Package Manager (npm), gebruikt voor automatisering van   tijdrovende en repetitieve taken die betrokken zijn bij webontwikkeling zoals   minificatie, concatenatie, cachebusting, testen van eenheden, pluizen,   optimalisatie etc. gulp gebruikt een code-over-configuratie-benadering voor   definieer zijn taken en vertrouwt op zijn kleine, single-purpose plug-ins   voer ze uit. gulp-ecosysteem heeft 1000+ dergelijke plug-ins beschikbaar gemaakt   kiezen uit.

meer hier

knorren

Grunt is een JavaScript-taakrunner, een tool die automatisch wordt gebruikt   voer veelgebruikte taken uit, zoals minificatie, compilatie, eenheid   testen, pluizen, etc. Het gebruikt een opdrachtregelinterface om op maat te werken   taken gedefinieerd in een bestand (bekend als Gruntfile). Grunt is gemaakt door   Ben Alman en is geschreven in Node.js. Het wordt verspreid via npm.   Momenteel zijn er meer dan vijfduizend plug-ins beschikbaar in de   Grunt-ecosysteem.

meer hier


3) Pakketmanagers 

pakketbeheerders, wat zij doen is het beheren van plug-ins die u nodig hebt in uw toepassing en deze voor u installeren via github enz. met behulp van package.json, erg handig om uw modules bij te werken, te installeren en uw app te delen, meer details voor elk:

NPM

npm is een pakketbeheerder voor de JavaScript-programmeertaal. Het   is de standaard pakketbeheerder voor de JavaScript runtime-omgeving   Node.js. Het bestaat uit een opdrachtregelclient, ook wel npm genoemd, en een   online database van openbare pakketten, het npm-register genoemd. De   register is toegankelijk via de client en de beschikbare pakketten kunnen zijn   gebladerd en gezocht via de npm-website.

meer hier

prieel

Bower kan componenten beheren die HTML, CSS, JavaScript, lettertypen bevatten   of zelfs afbeeldingsbestanden. Bower is geen code aaneenschakelen of indelen of doen   iets anders - het installeert gewoon de juiste versies van de pakketten   je hebt en hun afhankelijkheden nodig.   Om te beginnen werkt Bower door pakketten op te halen en te installeren   overal, zorgend voor het jagen, vinden, downloaden en opslaan van de   dingen die je zoekt. Bower houdt deze pakketten bij in een   manifest bestand, bower.json.

meer hier

en de meest recente pakketmanager die niet gemist mag worden, het is jong en snel in echte werkomgevingen in vergelijking met npm, dat ik eerder voornamelijk gebruikte, voor het opnieuw installeren van modules, controleert het de map node_modules dubbel om het bestaan ​​van de module te controleren, lijkt ook het installeren van de modules minder tijd kost:

garen

Yarn is een pakketbeheerder voor uw code. Hiermee kunt u en gebruiken   deel code met andere ontwikkelaars van over de hele wereld. Garen doet dit   snel, veilig en betrouwbaar, zodat u zich nooit zorgen hoeft te maken.

Met garen kunt u de oplossingen van andere ontwikkelaars voor verschillende gebruiken   problemen, waardoor het voor u eenvoudiger wordt om uw software te ontwikkelen. als jij   problemen ondervindt, kunt u problemen melden of een bijdrage leveren, en wanneer   probleem is opgelost, kunt u garen gebruiken om alles up-to-date te houden.

Code wordt gedeeld door iets dat een pakket wordt genoemd (soms verwezen   naar als een module). Een pakket bevat ook alle code die wordt gedeeld   als een package.json-bestand dat het pakket beschrijft.

meer hier



42
2018-05-21 03:43



Een kleine opmerking over npm: npm3 probeert afhankelijkheden op een vlakke manier te installeren

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


40
2018-04-14 15:53



Wat is webpack & webpack-dev-server? Officiële documentatie zegt dat het een modulebundelaar is, maar voor mij is het gewoon een taakloper. Wat is het verschil?

webpack-dev-server is een live herladende webserver die webpack ontwikkelaars gebruiken om onmiddellijke feedback te krijgen wat ze doen. Het mag alleen tijdens de ontwikkeling worden gebruikt.

Dit project is sterk geïnspireerd door de nof5 unit testtool.

webpack zoals de naam al aangeeft, maakt u een SINGLE  pakleeftijd voor de web. Het pakket wordt geminimaliseerd en gecombineerd tot een enkel bestand (we leven nog steeds in de leeftijd van HTTP 1.1). webpack doet de magie van het combineren van de middelen (JavaScript, CSS, afbeeldingen) en injecteert ze als volgt: <script src="assets/bundle.js"></script>.

Het kan ook worden genoemd modulebundler omdat het de module-afhankelijkheden moet begrijpen, en hoe de afhankelijkheden moeten worden verzameld en samen kunnen worden gebundeld.

Waar zou je browserify gebruiken? Kunnen we niet hetzelfde doen met de import van node / ES6?

Je zou kunnen gebruiken Browserify op precies dezelfde taken waar u zou gebruiken webpack. - webpack is echter compacter.

Merk op dat de ES6-moduleladerfuncties in Webpack2 gebruiken System.import, die geen enkele browser native ondersteunt.

Wanneer gebruik je gulp / grunt over npm + plug-ins?

Jij kan vergeten  Gulp, Grunt, Brokoli, Brunch en Bower. Gebruik in plaats hiervan direct npm-scripts voor opdrachtregels en u kunt hier extra pakketten zoals deze verwijderen Slok:

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

Je kunt waarschijnlijk gebruiken Slok en knorren configuratiebestand generators bij het maken van configuratiebestanden voor uw project. Op deze manier hoeft u niet te installeren eigenerfde of soortgelijke tools.


10
2017-11-22 01:23



Garen is een recente pakketmanager die het waarschijnlijk verdient om genoemd te worden. Dus er : https://yarnpkg.com/

Afaik, het kan zowel npm- als bower-afhankelijkheden ophalen en heeft andere gewaardeerde functies.


9
2017-10-14 15:58