英文 | https://javascript.plainenglish.io/31-awesome-javascript-libraries-c8bdd78ed1dc

翻译 | web前端开发

现在，NPM充满了从小型到大型，从有用到有趣，从伟大到惊人的软件包。这是我使用过的所有软件包的清单，从实用程序库到框架。

请你花些时间将这些库添加到你的书签中，以便以后使用它们或者现在使用也可以。我希望你可以从中学习到一些新的库。

你可以ctrl+f在列表中搜索，搜索任何你需要的库或包类型。我将尽力在说明中为每个库包括某种通用类别。

1、Chalk

Chalk是一个终端样式库。它可以用来风格化你在终端中所做的所有事情，例如，记录和显示错误。Chalk函数可以被链接，Chalk还支持带标签的模板文字语法。

示例如下：

log(chalk.blue('Hello') + ' World' + chalk.red('!'));console.log(chalk`    There are {bold 5280 feet} in a mile.    In {bold ${miles} miles}, there are {green.bold ${calculateFeet(miles)} feet}.`);

2、Micro

Micro是Vercel构建的小型微服务框架，提供创建微服务所需的所有基本功能。它具有异步HTTP微服务所需的一切，并支持异步/等待。

module.exports = (req, res) => {  res.end('Hello, World!')}

3、NanoID

创建不仅仅是自动递增的ID可能会很麻烦。ShortID可以帮助你。但由于已弃用，因此，我们将使用NanoID。它创建一个小于UUID且仍然安全的字母数字ID。该库本身可以最小化并压缩为仅108个字节（！）。那真是太小了。

import { nanoid } from 'nanoid'model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

4、jQuery

OG实用程序库之一。当不使用React之类的库时，jQuery是一个易于使用的DOM操作的著名且广泛使用的库。它仍然可以使用，并且在NPM中可用。

let elem = $( "#banner" );$( "#button button" ).on( "click", function( e ) {  elem.show();});

5、Nodemon

在开发Node应用程序时，Nodemon不会错过。Nodemon使开发Node网站更加容易。当它检测到文件中的更改时，它将自动重新启动服务器。这省去了必须重新启动服务器的麻烦。

6、Pug

Pug，以前称为Jade，是一种可与Express等框架一起使用的模板语言。它是从YAML语法派生的，并具有诸如mixins和条件语句之类的功能。

div.container  div.header    button#home.btn-primary Click me!    p This is a sample from Pug

7、Dotenv

使用任何类型的API时，环境变量都非常重要。Dotenv使你可以轻松安全地存储可在代码中使用的环境变量。

DB_HOST=localhostDB_USER=rootDB_PASS=passw0rd

8、Mongoose

Mongoose是用于MongoDB数据库的对象建模库。如果你正在查找有关MongoDB和JavaScript的教程，则很可能会以一种或另一种方式偶然进入该库。

const mongoose = require('mongoose');mongoose.connect('mongodb://localhost:27017/db-url', {useNewUrlParser: true, useUnifiedTopology: true});const Cat = mongoose.model('Cat', { name: String });const kitty = new Cat({ name: 'Taco' });kitty.save().then(() => console.log('Cat added'));

9、Express

Express是一个Node服务器框架，提供创建良好服务器所需的功能。由于其是极简主义的性质，它有一个庞大的社区，可以为你可以使用的各种任务创建库，并且可以从此列表中列出很多。

onst express = require('express')const app = express()const port = 3000app.get('/', (req, res) => {  res.send('Hello, World!')})app.listen(port, () => {  console.log(`Listening at http://localhost:${port}`)})

10、Bootstrap

每个人都知道Bootstrap。Bootstrap是一个前端UI样式框架，用于创建具有简单样式和良好外观的自适应网站优势。许多网站都使用Bootstrap，一些网站将其与另一个主题一起使用，而另一些网站则将其用于一些组件。它还具有一些JavaScript组件，可以轻松创建一个不错的站点。

    
  
     
    
      Email address    
          
      We'll never share your email.  
     
  
     
    
      Password    
        
     
  
     
    
          
      Check me out  
     
  
     Submit
    

11、GraphQL

GraphQL是HTTP请求的查询语言。它希望添加REST API的基本功能，但要增加查询语言可能添加的灵活性。它由Facebook开发，默认情况下随GatsbyJS一起提供，用于检索数据。

graphql`{  person {    name  }}`// Returns:{  "person": {    "name": "John Doe"  }}

12、Morgan

Morgan以我们在电视上最喜欢的“杀手”而得名，是一种常用在Express或类似Node服务器上的日志记录中间件。它可以记录你想要的任何内容。这在调试生产服务器时可能很有用。

let morgan = require('morgan')// setup the loggerapp.use(morgan('combined', { stream: accessLogStream }))

13、Sequelize

Sequelize是用于关系数据库（例如PostgreSQL，SQLite和MariaDB）的基于承诺的ORM。它是众所周知的，因此，许多教程都使用此库。

// Create a new userconst jane = await User.create({ firstName: "Jane", lastName: "Doe" });// Find all usersconst users = await User.findAll();console.log(users.every(user => user instanceof User)); // true

14、Passport

Passport是使用最广泛的身份验证库之一。它是一种身份验证中间件，已在Node应用程序中广泛使用。它支持各种身份验证，例如OAuth和社交登录。

app.post（'/ login'，passport.authenticate（'local'，{   successRedirect：“ /”，  failureRedirect：'/ login' }））;

15、Preact

Preact是最小的React克隆，可提供较小的文件大小和更快的速度。它的语法非常相似，如果你知道React，就会知道Preact。Preact的大小只有3kb，因此对于大小很重要的地方非常有用。和React一样，它是一个前端和DOM操作库。

function Counter() {  const [value, setValue] = useState(0);  return (    <>      
    
     Counter: {value}
    
       setValue(value + 1)}>Increment       setValue(value - 1)}>Decrement      )}

16、Lodash

Lodash是一个非常流行的实用程序库。它提供了用于数组，字符串和数字操作的功能，因此，你不必自己编写它们。该库在几乎所有项目中都可能有用。

_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });// → { 'a': 1, 'b': 2 }_.partition([1, 2, 3, 4], n => n % 2);// → [[1, 3], [2, 4]]

17、TailwindCSS

我一直以来最喜欢的一个库。TailwindCSS是用于前端开发的样式库。它提供了大量的实用程序类，你可以使用它们来代替CSS。它提供的功能可以在开发过程中利用所有类的灵活性来最小化用于生产的文件大小。

    
  
     
    
      
       Some Text
      
  
    

18、Axios

Axios是一个著名的基于异步承诺的HTTP请求库。它易于学习，易于使用，可以设置任何你不想发送的内容。我目前还没有发现比这个库更好使用的库。

axios.get('/profile?id=12345')  .then(function (response) {    // handle success    console.log(response);  })  .catch(function (error) {    // handle error    console.log(error);  })

19、Adonis

像Express一样，Adonis是Node服务器框架。不过，它更侧重于微服务方面。它具有你需要的一切，并且具有包含文档和示例的强大站点。

const Helpers = use('Helpers')Route.get('download/:fileId', async ({ params, response }) => {  const file = await Files.findorFail(params.fileId)  response.download(Helpers.tmpPath('uploads/${file.path}'))})

20、Realm

创建数据库并与ORM连接可能很烦人。Realm与数据库工具Mongoose相似，但是它也提供数据库。它是基于对象的数据库或NoSQL数据库。我在手机上将它与React Native结合使用，效果很好。

const studentSchema = {  name: "Student",  properties: {    name: "string",    grades: "int[]"  }}

21、GatsbyJS

GatsbyJS是遵循JamStack的框架。它是静态站点生成器，对于创建营销和博客页面非常有用。编译后，它提供了超快的速度。它是基于React的，并且具有GraphQL以便从开箱即用的文件中检索数据。

import React from "react"export default function Home() {  return (    
    
      
     
Hello Gatsby!
      
     
What a world.
    
    
  );}

22、Luxon

日期和时间是一些最讨厌的对象。这就是为什么你应该使用Moment或Luxon的原因。

dt.toISOWeekDate();dt.toMillis();dt.toLocaleString({ month: 'long', day: 'numeric' });

23、Faker

无论何时创建原型，都需要伪造的数据。Faker提供了虚假数据。从名字和姓氏到伪造的比特币地址和电子邮件地址。它易于学习且易于使用。

let randomName = faker.name.findName(); // Caitlyn Kerlukelet randomEmail = faker.internet.email(); // Rusty@arne.info

24、ESLint

编写漂亮的代码很难。我们都使用制表符或空格，两个或四个，有些在括号和方括号之间添加空格，有些则没有。为了使代码更加统一，可以使用ESLint。

25、Marked

我们所有人可能都知道Markdown很棒。无需使用鼠标即可快速创建富文本格式。已标记可帮助我们解析此文本并输出实际呈现它所需的HTML。

26、Pluralize

如果你曾经使用动态数据，则可能需要正确地进行多元化处理。具有相同名称的库提供了该功能。他们甚至允许自定义复数规则。

pluralize('test') //=> "tests"pluralize('test', 0) //=> "tests"pluralize('test', 1) //=> "test"pluralize('test', 5) //=> "tests"pluralize.plural('regex') //=> "regexes"pluralize.addPluralRule(/gex$/i, 'gexii')pluralize.plural('regex') //=> "regexii"

27、Concurrently

允许并发运行任务，实际上可以同时运行任务，具体取决于你的系统。具体来说，它允许你同时运行多个NPM任务，例如捆绑或编译CSS文件。

28、Svelte

在React，Vue和其他模板框架中，还有Svelte。Svelte允许开发人员创建组件并在你的网页中使用它们。

These styles...
    

29、Mustache

Mustache是一种无逻辑的模板语言，适用于需要最少动态内容的Express应用程序。

Hello {
   {name}}You have just won {
   {value}} dollars!{
   {#in_ca}}  Well, {
   {taxed_value}} dollars, after taxes.{
   {/in_ca}}

30、UUID

如果你对NanoID不满意，或者需要实际的UUID或GUID，则UUID适合你。它使用最少的代码创建有效的UUID。这些可以在某些数据库中使用，并且比自动增量ID更安全。

import { v4 as uuidv4 } from 'uuid';uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

31、 HTML缩小器

最终的库是一个缩小器。HTML-minifier使网页需要加载的代码量最小化，并且可以大大提高加载速度，从而带来更好的用户体验。你可以为某些最小化的样式或规则添加选项，以便该库可以适合每个项目。

结论

我今天例举的这些库，都是由开源社区以爱心制作的，我要感谢他们的工作。

希望你能从这些列表库中，了解并学习到一些新库，如果你还有其他使用过一些比较好的库，也欢迎你跟我们一起来分享。

感谢你的阅读，编程快乐！

学习更多技能

请点击下方web前端开发