推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > web前端开发 > 31个很棒的JavaScript库

31个很棒的JavaScript库

web前端开发 2021-04-08

英文 | 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 = 3000
app.get('/', (req, res) => { res.send('Hello, World!')})
app.listen(port, () => { console.log(`Listening at http://localhost:${port}`)})

10、Bootstrap

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

<form> <div class="form-group"> <label for="exampleInputEmail">Email address</label> <input type="email" class="form-control" id="exampleInputEmail"> <small id="emailHelp" class="form-text text-muted">We'll never share your email.</small> </div> <div class="form-group"> <label for="exampleInputPassword">Password</label> <input type="password" class="form-control" id="exampleInputPassword"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck"> <label class="form-check-label" for="exampleCheck">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button></form>

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 ( <> <div>Counter: {value}</div> <button onClick={() => setValue(value + 1)}>Increment</button> <button onClick={() => setValue(value - 1)}>Decrement</button> </> )}

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。它提供的功能可以在开发过程中利用所有类的灵活性来最小化用于生产的文件大小。

<ul class="space-y-4"> <li> <div class="w-64 p-4 bg-green-500">Some Text</div> </li></ul>

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 ( <div style={{ color: `purple` }}> <h1>Hello Gatsby!</h1> <p>What a world.</p> </div> );}

22、Luxon

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

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

23、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允许开发人员创建组件并在你的网页中使用它们。

<script> import Nested from './Nested.svelte';</script>
<style> p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; }</style>
<p>These styles...</p><Nested/>

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前端开发

31个很棒的JavaScript库

31个很棒的JavaScript库
web前端开发
一个专业而懂你的前端学习平台,分享你需要的编程开发与职场技能知识,我们坚持,每天学习一点点,每天进步一点点,人生进步一大步!关注我们,与我们一起学习进步,通过学习遇见更好的自己。
115篇原创内容
Official Account


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《31个很棒的JavaScript库》的版权归原作者「web前端开发」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注web前端开发微信公众号

web前端开发微信公众号:web_qdkf

web前端开发

手机扫描上方二维码即可关注web前端开发微信公众号

web前端开发最新文章

精品公众号随机推荐