JavaScript >> Javascript-Tutorial >  >> Tags >> npm

10 nützliche NPM-Pakete, die Sie kennen sollten (Ausgabe 2020)

Das Tolle daran, in dieser Ära als Webentwickler zu leben, ist, dass Sie viel Unterstützung von Entwicklergemeinschaften erhalten. Einer davon ist Node Package Manager (ab jetzt npm).

Wenn Sie sich mit Webentwicklungsprojekten (clientseitig, serverseitig, Full-Stack usw.) beschäftigen, ist npm für Sie eine alte Sache. Npm ist die weltweit größte Softwareregistrierung und hostet eine Reihe nützlicher Pakete, die Entwickler teilen und nutzen können.

In diesem Artikel werde ich über meine Lieblings-npm-Pakete sprechen, mit denen ich meiner Meinung nach gesegnet bin. Das Problem ist, dass die Liste sehr, sehr lang ist und ich Probleme habe, die Top-10 daraus auszuwählen! Daher habe ich beschlossen, nicht viel über die bekannten zu sprechen, sondern über wenige andere, die Sie vielleicht nicht kennen, aber kennen sollten. Ich hoffe, Sie finden das nützlich.

Bekannte Pakete

Hier sind einige, die den meisten von uns bekannt sind,

  • lodash:Das magische Paket macht alles Unmögliche möglich, indem es viele nützliche Methoden für JavaScript-Arrays, -Objekte und andere Datenstrukturen bereitstellt.
  • Requisiten-Typen:Wenn Sie an einem React-Projekt arbeiten, benötigen Sie dies für die Laufzeit-Typprüfung von React-Requisiten und ähnlichen Objekten.
  • chalk:Wenn Sie etwas mit Node CLI (Befehlszeilenschnittstelle) tun (oder planen), können Sie Chalk nicht verpassen. Hier ist ein Artikel, der Ihnen helfen kann, die Verwendung zu verstehen, zusammen mit einigen weiteren verwandten Paketen wie Figlet, Inquirer.
  • express:Zweifellos ein großartiges Webframework für node.
  • eslint:Es ist ein Tool zum Identifizieren und Melden von Mustern, die in ECMAScript/JavaScript-Code gefunden werden, ähnlich wie JSLink und JSHint.
  • moment:Wenn Sie etwas mit Datum und Uhrzeit machen, wird Moment wahrscheinlich in die Datei package.json hinzugefügt.
  • date-fns:Wenn nicht moment, könnte eine andere Alternative date-fns sein. Es ist mein persönlicher Favorit.
  • nodemon:Es unterstützt node.js-basierte Anwendungen, indem es die Node-Anwendung automatisch neu startet, wenn Dateiänderungen im Verzeichnis erkannt werden. So nützlich!

Ich habe nicht wirklich etwas mehr wie, reagieren, eckig, sehen usw. erwähnt, da sie allgegenwärtig sind. Hier ist die Liste der am meisten abhängigen Pakete, die auf npmjs.com erwähnt werden.

10 nützliche Pakete

Alles, was oben erwähnt wurde, habe ich sie so stark benutzt. Hier sind andere in meinen aktuellen Top-10 (allerdings nicht in einer bestimmten Reihenfolge), die Sie beachten sollten, wenn nicht bereits.

🌈 zufällige Farbe

Ein winziges Skript zum Generieren attraktiver Zufallsfarben. Ich habe dies verwendet, um Liniendiagramme mit verschiedenen Farben beim Laden von Seiten zu zeichnen. Es ist sehr einfach zu bedienen, hochgradig konfigurierbar und äußerst nützlich.

  • Verwendung:

     let randomColor = require('randomcolor');
     const COLOR_ARRAY = randomColor({
        count: 25,
        luminosity: 'bright',
        hue: 'random'
     });
    
     // Now you have an array of 25 random color.
    
  • Demo:https://randomcolor.llllllllllllllllll.com/
  • Weitere Informationen:https://www.npmjs.com/package/randomcolor

ٷ React-Loader-Spinner

react-spinner-loader bietet eine einfache React-SVG-Spinner-Komponente, die für den Ladevorgang implementiert werden kann, bevor Daten in die Ansicht abgerufen werden.

  • Verwendung:

    import Loader from 'react-loader-spinner'
    export default function App (){
    //other logic
      return() (
       return(
        <Loader
             type="ThreeDots"
             color="#00BFFF"
             height={100}
             width={100}
        />
       );
      )
    }
    
  • Demo:https://mhnpd.github.io/react-loader-spinner/
  • Weitere Informationen:https://www.npmjs.com/package/react-loader-spinner

🔢 shortid

Erinnern Sie sich, reagieren eindeutige Schlüsselfehler? shortid kann Ihnen dort viel Zeit sparen. Es erstellt erstaunlich kurze, nicht sequentielle URL-freundliche eindeutige IDs. Perfekt für URL-Shortener, Datenbank-IDs und/oder andere ID-bezogene Verwendungen.

  • Verwendung

     import shortid from "shortid";
    
     <Demo key={shortid.generate()}/>
    
  • Weitere Informationen:https://www.npmjs.com/package/shortid

📈 Recharts

Eine leistungsstarke Diagrammbibliothek, die mit React und D3 erstellt wurde. Sie können es wirklich verwenden, ohne die Teile unter der Haube zu verstehen, und es hilft bei schnelleren Implementierungen.

  • Verwendung

     <ResponsiveContainer width='100%' height={400}>
         <LineChart data={chartData}
              margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
              <XAxis dataKey="week" />
              <YAxis />
              <CartesianGrid strokeDasharray="3 3" />
              <Tooltip content={<CustomTooltip />} />
              <Legend />                                   
          </LineChart>
      </ResponsiveContainer>
    
  • Demo:https://recharts.org/en-US/examples
  • Weitere Informationen:https://www.npmjs.com/package/recharts

💲 reagieren-Währungsformat

Wenn Sie nach einer Reaktionskomponente suchen, um Zahlen in einer Eingabe oder als Text zu formatieren, sehen Sie sich diese an. Es hilft Ihnen bei der Währungsformatierung mit dem richtigen Präfix (wie $).

  • Verwendung

     import CurrencyFormat from 'react-currency-format';
    
     <CurrencyFormat 
           value={2456981} 
           displayType={'text'} 
           thousandSeparator={true} 
           prefix={'$'} 
           renderText={value => <div>{value}</div>} />
    
  • Weitere Informationen:https://github.com/mohitgupta8888/react-currency-format#readme

👀 pluralisieren

Haben Sie jemals die Pluralisierung von Zeichenfolgen wie 1 mango(s) geschafft oder 1 cars ? Wie wäre es, wenn die Sprache von Englisch zu etwas anderem wechselt? Das ist, wenn pluralize kommt. Es hilft Ihnen, Wörter zu pluralisieren und zu singularisieren.

  • Nutzung
    var pluralize = require('pluralize');
    pluralize('test') //=> "tests"
    pluralize('test', 1) //=> "test"
    pluralize('test', 5) //=> "tests"
    pluralize('蘋果', 2, true) //=> "2 蘋果"
    
  • Weitere Informationen:https://www.npmjs.com/package/pluralize

⚔️ cross-env

Wenn Sie Probleme beim Ausführen von NODE_ENV=production hatten Unter Windows kennen Sie wahrscheinlich cross-env schon. cross-env macht es einfach, einen einzigen Befehl zu haben, ohne sich Gedanken über die richtige Einstellung oder Verwendung der Umgebungsvariable für die Plattform machen zu müssen.

  • Verwendung:Einfach mit npm i installieren oder yarn add Befehle
  • Weitere Informationen:https://www.npmjs.com/package/cross-env

📧 Nodemailer

E-Mails aus Node.js versenden, so einfach ist das! Hier ist eine Schritt-für-Schritt-Anleitung zur Verwendung.

🔑 bcrypt

Eine Bibliothek, die Ihnen hilft, Passwörter zu hashen. Dies ist so sehr leistungsfähig mit verschiedenen Optionen.

  • Verwendung

    const bcrypt = require('bcrypt');
    const saltRounds = 10;
    const myPlaintextPassword = 'password'; 
    // never use 'password' as password :-)
    
    bcrypt.genSalt(saltRounds, function(err, salt) {
      bcrypt.hash(myPlaintextPassword, salt, function(err, hash) {
          // Do something with the hash.
      });
    });
    
  • Weitere Informationen:https://www.npmjs.com/package/bcrypt

✔️ Prüfer

Eine Bibliothek von String-Validatoren und -Sanitizern.

  • Verwendung

     import validator from 'validator';
     validator.isEmail('[email protected]'); //=> true
    
  • Weitere Informationen:https://www.npmjs.com/package/validator

Was sind deine Favoriten?

Die Liste endet hier nicht. Ich bin sicher, Sie haben bereits von einigen oder vielen aus der Liste gehört. Bitte lassen Sie mich wissen, wenn Sie ein Bündel haben, das Ihre Favoriten sind. Ich freue mich darauf, Ihre Liste von npm zu sehen Pakete im Kommentarbereich unten.

Wenn es für Sie nützlich war, liken/teilen Sie es bitte, damit es auch andere erreicht. Um E-Mail-Benachrichtigungen zu meinen neuesten Beiträgen zu erhalten, abonnieren Sie bitte meinen Blog, indem Sie auf Abonnieren klicken Schaltfläche oben auf der Seite. Sie können mir auch auf Twitter @tapasadhikary folgen.