Skvělá věc na životě v této době jako webový vývojář je, že máte spoustu podpory od vývojářských komunit v okolí. Jedním z nich je Node Package Manager (od této chvíle npm).

Pokud se zabýváte jakýmikoli projekty vývoje webu (na straně klienta, na straně serveru, full-stack atd.), npm je pro vás stará věc. Npm je největší světový softwarový registr, který nabízí řadu užitečných balíčků, které mohou vývojáři sdílet a používat.

V tomto článku budu mluvit o svých oblíbených balíčcích npm, které cítím, že jsem s nimi požehnán. Problém je, že seznam je velmi dlouhý a mám problém vybrat z něj 10 nejlepších! Proto jsem se rozhodl, že nebudu moc mluvit o těch dobře známých, ale o několika dalších, které možná neznáte, ale měli byste je znát. Doufám, že to pro vás bude užitečné.

Dobře známé balíčky

Zde jsou některé, o kterých většina z nás ví,

• lodash:Magický balíček dělá vše nemožné tím, že odhaluje mnoho užitečných metod na polích, objektech a dalších datových strukturách JavaScriptu.
• Typy rekvizit:Pokud jste na projektu React, potřebujete to pro kontrolu typu rekvizit React a podobných objektů za běhu.
• křída:Pokud děláte (nebo plánujete) něco s uzlem CLI (rozhraní příkazové řádky), nemůžete křídu vynechat. Zde je článek, který vám může pomoci pochopit použití spolu s několika dalšími souvisejícími balíčky, jako je Figlet, Inquirer.
• express:Nepochybně skvělý webový rámec pro uzel.
• eslint:Je to nástroj pro identifikaci a hlášení vzorů nalezených v kódu ECMAScript/JavaScript podobně jako nástroj JSLink a JSHint.
• moment:Pokud děláte něco s datem a časem, moment je pravděpodobně přidán do souboru package.json.
• date-fns:Pokud ne moment, další alternativou může být date-fns. Je to můj osobní favorit.
• nodemon:Pomáhá aplikacím založeným na node.js tím, že automaticky restartuje aplikaci uzlu, když jsou zjištěny změny souborů v adresáři. Tak užitečné!

Opravdu jsem se nezmínil o několika dalších like, reagovat, angular, vue atd., protože jsou všudypřítomné. Zde je seznam nejvíce závislých balíčků zmíněných na npmjs.com.

10 užitečných balíčků

Vše, co bylo uvedeno výše, jsem je tak intenzivně používal. Zde jsou další z mých aktuálních 10 nejlepších (ačkoli ne v žádném konkrétním pořadí), o kterých je dobré vědět, pokud ještě ne.

🌈 náhodná barva

Malý skript pro generování atraktivních náhodných barev. Použil jsem to k vykreslení spojnicových grafů s různými barvami při načtení stránky. Je velmi jednoduchý na používání, vysoce konfigurovatelný a mimořádně užitečný.

• Použití:

   let randomColor = require('randomcolor');
   const COLOR_ARRAY = randomColor({
      count: 25,
      luminosity: 'bright',
      hue: 'random'
   });
  
   // Now you have an array of 25 random color.
  

• Ukázka:https://randomcolor.lllllllllllllllll.com/
• Další informace:https://www.npmjs.com/package/randomcolor

„reagovat-loader-spinner

react-spinner-loader poskytuje jednoduchou komponentu React SVG spinner, kterou lze implementovat pro operaci načítání před načtením dat do zobrazení.

• Použití:

  import Loader from 'react-loader-spinner'
  export default function App (){
  //other logic
    return() (
     return(
      <Loader
           type="ThreeDots"
           color="#00BFFF"
           height={100}
           width={100}
      />
     );
    )
  }
  

• Ukázka:https://mhnpd.github.io/react-loader-spinner/
• Další informace:https://www.npmjs.com/package/react-loader-spinner

🔢 shortid

Pamatujete si, reagovat na jedinečnou chybu klíče? shortid tam vám může ušetřit spoustu času. Vytváří úžasně krátká, nesekvenční jedinečná ID vhodná pro adresy URL. Ideální pro zkracování adres URL, ID databází a/nebo jakákoli jiná použití související s ID.

• Použití

   import shortid from "shortid";
  
   <Demo key={shortid.generate()}/>
  

• Další informace:https://www.npmjs.com/package/shortid

📈 přepočítává

Výkonná knihovna grafů vytvořená pomocí React a D3. Opravdu jej můžete použít, aniž byste rozuměli kouskům pod kapotou, a pomáhá při rychlejších implementacích.

• Použití

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

• Ukázka:https://recharts.org/en-US/examples
• Další informace:https://www.npmjs.com/package/recharts

💲 reagovat-currency-format

Pokud hledáte komponentu reakce na číslo formátu ve vstupu nebo jako text, podívejte se na tuto. Pomáhá vám při formátování měny se správnou předponou (jako $).

• Použití

   import CurrencyFormat from 'react-currency-format';
  
   <CurrencyFormat 
         value={2456981} 
         displayType={'text'} 
         thousandSeparator={true} 
         prefix={'$'} 
         renderText={value => <div>{value}</div>} />
  

• Další informace:https://github.com/mohitgupta8888/react-currency-format#readme

👀 pluralize

Už jste někdy spravovali množné čísla řetězců jako 1 mango(s) nebo 1 cars ? Co když se jazyk změní z angličtiny na něco jiného? Tehdy pluralize přichází. Pomůže vám množit a singularizovat jakákoli slova.

• Využití

  var pluralize = require('pluralize');
  pluralize('test') //=> "tests"
  pluralize('test', 1) //=> "test"
  pluralize('test', 5) //=> "tests"
  pluralize('蘋果', 2, true) //=> "2 蘋果"
  

• Další informace:https://www.npmjs.com/package/pluralize

⚔️ cross-env

Pokud jste měli problémy se spuštěním NODE_ENV=production na Windows, pravděpodobně znáte cross-env již. cross-env usnadňuje používání jediného příkazu, aniž byste se museli starat o správné nastavení nebo použití proměnné prostředí pro platformu.

• Použití:Stačí jej nainstalovat pomocí npm i nebo yarn add příkazy
• Další informace:https://www.npmjs.com/package/cross-env

📧 nodemailer

Posílejte e-maily z Node.js, je to tak jednoduché! Zde je podrobný návod, jak jej používat.

🔑 bcrypt

Knihovna, která vám pomůže hashovat hesla. To je tak velmi výkonné s různými možnostmi.

• Použití

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

• Další informace:https://www.npmjs.com/package/bcrypt

✔️ validátor

Knihovna validátorů řetězců a dezinfekčních prostředků.

• Použití

   import validator from 'validator';
   validator.isEmail('[email protected]'); //=> true
  

• Další informace:https://www.npmjs.com/package/validator

Jaké jsou vaše oblíbené?

Tady výčet nekončí. Jsem si jistý, že jste o některých nebo mnoha ze seznamu již slyšeli. Prosím, dejte mi vědět, jestli máte partu, kterou máte rádi. Těšíme se na váš seznam npm balíčky v sekci komentářů níže.

Pokud vám to bylo užitečné, dejte like/sdílejte, aby se to dostalo i k ostatním. Chcete-li dostávat upozornění e-mailem na mé nejnovější příspěvky, přihlaste se k odběru mého blogu kliknutím na Přihlásit se k odběru tlačítko v horní části stránky. Můžete mě také sledovat na twitteru @tapasadhikary.