2019年最佳JavaScript框架,库和工具

JavaScript框架，库和工具似乎比他们的开发人员多出很多。在2018年底，对GitHub的快速搜索显示了 230 万个JavaScript项目。 npm 已经成为世界上最大的模块系统，在 npmjs.com 上有70万个可用包，每个月下载数十亿。

本文将努力解释最流行的用户端 JavaScript 框架、库和工具之间的基本内容和差异。他们对你来说能否是 “最好的” 选择是另一个问题。选择少量东西，坚持一段时间。你需要知道的是：你最喜欢的选项终将被“更好”的东西取代，无论你选择什么！

在阅读本文之前请接受以下术语和情况…！

JavaScript 生态社区每天都会发生变化。这篇文章可能在发布时就已经过时了！

我说的 “最好的” 指的是 “最受欢迎的通用项目” 。所有都是免费 / 开源 的，但你肯能不认同这个列表。

中止的项目，如 YUI 不包括在本列表内，即便它们现在可能仍然有很高的使用量。

仅引用用户端项目。有些可以在服务器端工作，但该列表不包括纯粹的基于服务器的框架，如?Express.js?或者?Hapi?。

关于每一个项目的信息都是有意为之提供一个概述以便进行进一步的研究。

每个项目都提供了使用流行指标，但统计数据难以整理，可能会造成误导。

我有偏见，你有偏见，每个人都有偏见！我没有在这里尝试过每一个工具，所以不会说明我最喜欢哪个，但你应该根据你的要求自行评估。

我和该网站都不对你做出的任何选择使用的决定负责！

辣手的术语

术语“framework(框架)”，“library(库)”和“tool(工具)” 可以根据情境，在不同时期，对不同的人，意味着不同的东西。这里使用的一般定义如下：

Libraries(库)

库是有用功能的有组织的集合。一个库的典型功能包括解决字符串、日期、HTML DOM元素、事件、Cookie、动画、网络请求等等。每个函数都将值返回给调用应用程序，该应用程序可以在您选择的情况下实现。你可以把它想象成汽车零件的选择：你可以自由地使用任何零件来建造一辆能跑的车，但是你必需自己造一个引擎。

库通常是提供一个更高的笼统层，平滑的实现细节和矛盾。例如，Ajax通常依赖于?XMLHttpRequest API，但这需要几行代码，并且在不同的浏览器之间存在细微的差异。但是库可以提供一个更简单的?ajax()?函数，让程序员更专注于高层次的业务逻辑。

一个库可以将开发时间缩短20%，由于您不必担心细节问题。但是它也不是没有缺点的：

库内的错误可能难以定位和修复

开发团队不能保证快速发布补丁

修补程序可能会更改API，并对您的代码进行重大更改。

Frameworks(框架)

框架是一个应用程序的骨架。它要求您以一种特定的方式来解决软件设计，，并在某些点插入您自己的逻辑。通常为您提供诸如事件、存储和数据绑定之类的功能。使用汽车类比，那么框架提供了一辆车的底盘，车身和发动机。 为了让车辆始终保持运行状态，你可以增加、删除或者修改某些组件。

框架通常比库提供更高的笼统层，并且可以帮助您快速构建项目的 80%。但它的缺点是：

假如应用程序超出了框架的范围，那么剩下的20%可能会很难完成;

框架升级可能很困难 ;

框架核心代码和概念很少升级，但是同样的事情，程序员往往都会在短时间内发现一个更好的处理方式;

Tools(工具)

工具备助于开发，但不是项目的一个组成部分。工具包括系统构建、编译器、转译器、代码压缩、图像压缩、部署机制等等。

工具应该提供一个更容易的开发过程。 例如，许多程序员喜欢用?Sass?编译成CSS，由于它提供了代码分离，嵌套，渲染时变量，循环和函数。 浏览器不理解 Sass / SCSS 语法，因而在测试和部署之前，必需使用适当的工具将代码编译为 CSS。

不要去标记项目类型

库，框架和工具之间的区别很少。框架可以包括一个库。库可以实施相似框架的方法。对于前面二者来说，工具又是必不可少的。

我试图标记每个提到的项目，看看他们属于库，框架还是工具，但尺度不同，标记的类型也可能会有所不同。

假如这听起来太复杂，可以考虑编写原生 JavaScript。没关系，但是您将不可避免地编写自己的库 和/或者 框架代码。JavaScript 本身就是一种浏览器和操作系统笼统塔的笼统！

JavaScript 框架和库

项目根据流行度排序…

jQuery

jQuery 依然是最常用的 JavaScript 库，WordPress，ASP.NET和其余几个框架的创立和分发都依赖于它。它彻底改变了用户端的开发，将 CSS 选择器引入到 DOM 节点检索加链接来应用事件解决程序、动画和Ajax调用。

尽管 jQuery 最近几年失宠，但对于需要一些 JavaScript 功能的项目来说，它依然是一个可行的选择。

优点：

分布规模小

学习曲线平缓，在线帮助多

语法简洁

容易延伸

缺点：

添加了本机API的速度开销

浏览器兼容性的改善降低了它的性能

用法扁平

有些开发人员抵制使用

React

React 也许是过去一年里最受关注的库了吧。React 是一个用于构建客户界面的 JavaScript 库，它专注于 MVC 模式(Model-View-Controller) 的 “View” 部分，并且可以轻松创立保留状态的 UI 组件。 它是实现虚拟 DOM 的第一个库， 内存结构计算差异，有效地升级页面。

从统计数据中看，反应的使用似乎很低，可能是由于它更多的在应用程序中使用，而不是网站上使用。70%的程序员表示他们正在使用该库。

优点：

小巧，高效，快捷灵活

简单的组件模型

良好的文档和在线资源

适用于服务器端渲染

处于高速发展期

缺点：

需要学习新的概念和语法

构建工具必不可少

要求其余库或者框架提供 Model 和 Control

与修改 DOM 的代码和其余库不兼容

AngularJS 1.x

在这个列表中，Angular是第一个框架（或者MVC应用程序框架）。最流行的版本是 1.x 版本，它使用双向数据绑定扩展 HTML ，同时将 DOM 操作与应用程序逻辑分离 。

虽然版本2（现在是版本7！）已经发布，Angular 1.x仍在开发中。 见下文…

优点：

众多大公司采用

以单一的处理方案来生产现代 Web 应用程序

“标准” MEAN 堆栈(MongoDB，Express.JS，AngularJS，NodeJS) 的一部分，有众多文档和教程可用来参考

缺点：

学习曲线更加陡峭

代码库很大

不能更新到Angular 2.x

Angular 2.x (现在是 7.x)

Angular 2.0 于 2016 年 9 月发布。这是一次完全的重写，它引入了基于模块化组件的模型，使用 TypeScript（被编译为JavaScript ）创立。让人困惑的是，版本 4.0 于 2017 年 3 月发布（ v3 被跳过以避免语义版本的问题）。

Angular 2+ 与 v1 截然不同。与其余也不兼容 – 也许 Google 应该给该项目另外起一个名字。

优点：

单一的处理方案来生产现代Web应用程序;

虽然?Angular 2+ 教程?较少，但它仍是 MEAN 堆栈的一部分

对于熟习静态类型语言(如 C# 和 Java )的人员，TypeScript 提供了少量优势

缺点：

更陡峭的学习曲线

代码库很大

不能从 Angular 1.x 更新

与 1.x 相比，Angular 2.x 的使用率相对较低

虽然是Google的项目，但 Google 似乎并没有使用它?

Vue.js

Vue.js 是一个用于构建客户界面的轻量级渐进式框架。core(核心) 提供了一个相似于 React 的虚拟 DOM 视图层，它可以与其余库集成，但它也能支持单页应用程序。该框架由以前在 AngularJS 工作过的 Evan You 创立，所以该框架提取了 AngularJS 中作者喜欢的部分。

Vue.js 使用 HTML 模板语法将 DOM 绑定到实例数据。模型是在更改数据时升级视图的纯 JavaScript 对象。附加工具提供了脚手架，路由，状态管理，动画等功能。

优点：

易于上手，普及度高

起点简单，但完成满意度高

依赖性小，性能好

缺点：

是一个新项目，所以风险可能会很大

依赖开发人员来升级

相对同类框架，资源较少;（注：在国内似乎不存在这个缺点）

Sencha Ext JS

Ext JS是从YUI-Ext演化而来的，它是这个列表中历史最悠久的一个。虽然Ext JS以其广泛的可配置、可访问、跨浏览器的UI组件和数据可视化工具而闻名，但它也提供了构建完整应用程序的框架。或者者，您可以使用React或者Angular的组件库。

Ext JS是这里提供商业培训和支持的唯一框架。 Sencha团队还可以帮助您查看代码，自动化测试以及迁移到其余平台。

优点：

各种可用组件

包含创立Web和移动应用程序所需的所有内容

脚本定制，设计工具和快速原型

提供用于可视化构建和样式化Web应用程序的工具

商业支持和优秀的文档

适用于小型应用程序的30天免费试用版和社区版（每年收入低于10,000美元）

缺点：

与React和Angular之外的框架集成可能是不切实际的 – 请参阅Ext JS 7的路线图计划

深度自己设置UI更改可能很困难

Lodash 和 Underscore

本节将 Lodash 和 Underscore 放在一起，由于它们提供了数百个功能性的 JavaScript 实用程序来补充原生字符串，数字，数组和其余原始对象的方法。二者有少量功能性的重叠，所以你不太可能在一个项目中同事需要这两个库。

它在用户端使用率似乎很低，但是可以在服务器端的 Node.js 应用程序中使用这两个库。

优点：

小而简单

拥有优质文档，易于学习

与大多数库和框架兼容

不扩展内置对象

可以在用户端或者服务器上使用

缺点：

有些方法只适用于ES2015及更高版本的 JavaScript

Backbone.js

Backbone.js 是提供常见的服务器端框架MVC结构最早的用户端选项之一，它唯一的依赖是由同一开发人员创立的 Underscore.js 。

Backbone.js 宣称是一个库，由于它可以与其余项目集成，但我认为大多数程序员都认为它是一个框架。

优点：

体积小，重量轻，复杂度低

不增加HTML的逻辑

文档丰富

采用了许多应用，包括 Trello ，WordPress.com ，LinkedIn 和 Groupon

缺点：

与 AngularJS 等相比，笼统度较低

需要额外的组件来实现数据绑定等功能

新的框架基本已经不再采用 MVC 架构

Ember.js

Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。 它在单个包中实现模板化，数据绑定和库。假如 Ruby on Rails体验的客户，能够迅速熟习其配置概念。

优点：

为用户端应用程序提供单一处理方案

程序员可以快速开发—其使用 jQuery

良好的向后兼容性和更新选项

采用了现代 Web 开发标准

缺点：

大分配 large distributable

与其余正在向较小组件结构移动的框架相比，被认为是单一的

陡峭的学习曲线

Knockout.js

较早的MVVM框架之一，Knockout.js 使用观察者来确保 UI 与底层数据保持同步。它具备模板和依赖关系跟踪。

优点：

小而轻便，无依赖

支持回溯到IE6

优质文档

缺点：

较大的项目可能变得复杂

发展速度已经放缓

使用情况正在下降

值得注意的项目

假如你希望理解更多项目？以下项目不太受欢迎，但值得考虑：

Polymer?– 一个可以跨浏览器支持HTML5 Web组件的库。

Meteor?– 一个用于 Web 应用程序的全栈平台。

Aurelia?– 一个相对较新，轻量级的跨平台框架。

Svelte?– 一个非常新的项目，它将框架源代码转换为干净的 JavaScript。

Conditioner.js?– 一个基于状态无限加载和卸载模块的库。

Tools(工具)：通用的任务执行工具

构建工具可自动执行各种 Web 开发任务，例如预解决，编译，优化图像，压缩代码，代码检查，运行测试等。所有的任务都可以在一个可执行包中管理，最受欢迎的选择包括：

Webpack

Webpack 支持所有流行的模块选项，并成为 React 开发的代名词。虽然他宣称自己是一个模块打包工具，但是 Webpack 可以作为一个通用的任务执行工具使用。基于JavaScript对象的配置可能有点笨拙。生成器是可用的，但是少量Webpack客户为了更容易的配置和改进的编译时间已经迁移到Parcel?。

Gulp.js

Gulp 尽管它不是第一个任务执行工具，但它很快就成为了最受欢迎的工具，也是我个人最喜欢的任务执行器。Gulp 使用易读的 JavaScript 代码，它将源文件加载到一个流中，并通过各种插件将数据输出到构建文件夹中。这是一种简单、快速和有趣的方式，所以我把 Gulp.js 放在其余工具选项之前。

npm

npm 是 Node.js 包管理器，但是它的 scripts 功能可以用于通用的任务执行。对于那些没有多少依赖性的简单项目来说，这是一个很不错的选择。然而，对于复杂的任务来说，它可能就有些力不从心。

Grunt

Grunt 是第一个实现批量执行的 JavaScript 任务执行器，但速度和复杂的JSON配置导致了 Gulp 的崛起。现在，最糟糕的问题已经处理，Grunt 依然是一个不错的选择。

Tools(工具)：模块打包工具

管理多个 JavaScript 文件是一件繁琐的事情。在默认情况下，浏览器文件未被编译，因而依赖关系必需以适当的顺序加载或者连接。

尽管有很多选项，如?ES6 Modules?和?CommonJS?，但浏览器支持是有限的，因而模块打包工具变得至关重要。

Browserify

Browserify 支持 Node.js 使用的 CommonJS 模块，将所有模块编译成单个浏览器兼容的文件。

RequireJS

RequireJS 是一个浏览器中的模块加载器，它也可以在Node.js中使用。

Tools(工具)：代码检查工具(Linting)

注：很多编辑器，IDE都集成了这类相关的工具，或者许对你来说这些工具挺陌生，但是其实你一直在使用。

“Linting” 是分析你的代码中潜在错误 或者 偏离语法标准的隐患。有了这种工具，你永远不会遗漏一个结束括号 或者 未公告一个变量！

ESLint

ESLint 是一种插件式的代码检查工具，每个规则都是一个插件，因而可以根据你的喜好进行配置。

JSHint

一个灵活的 JavaScript 代码检查工具，它能在真正的错误 和 看似错误的语法需求之间找到一个平衡点。JSHint是我个人最喜欢的。

Tools(工具)：测试套件

测试驱动开发(Test-Driven-Development) 需要求你在开始编写代码之前，首先编写测试代码来测试你的代码。也欢迎你编写代码来测试你的测试代码！

代码测试的工具备很多，如?Ava?，Tape?和?Jest，但最流行的三个选项是：

Mocha

Mocha 是一个 JavaScript 测试框架，可以在 Node.js 或者 浏览器 中运行测试。js或者浏览器。它支持异步测试，经常与?Chai?搭配，以使测试代码以一种可读的方式表达。

Jasmine

Jasmine 是一个行为驱动的测试套件，可以在浏览器中自动测试你的UI和交互。

QUnit

毫无疑问，QUnit是一个单元测试框架，它可以在传递特定参数时检查函数结果。它还将报告测试覆盖率，以确保您没有遗漏特定的代码分支。

Tools(工具)：其余测试工具

虽然我尽了最大的努力，但我也不是每个人都喜欢 JavaScript ！诸如?TypeScript?，LiveScript?和?CoffeeScript?等编译器可以使你的开发生活更加愉快。或者者，考虑一下?Babel?转译工具，它可以将现代的、简洁的?ES2015?源代码转译为跨浏览器兼容的 ES5 代码。

有几十种?JavaScript 驱动的 HTML 模板引擎，包括?Mustache?，Handlebars?，Pug (Jade)?和?EJS?。但就我而言，更喜欢保留 JavaScript 语法(如?EJS?和?doT?)的轻量级选项。

最后，当你可以自动化生成文档时，为什么要自己编写呢？与ES2015兼容的文档生成器包括?ESDoc?，?JSDoc?，YUIdoc?，?documentation.js?和?Transcription?。

总结与建议

假如你想跟上在技术的潮流，那么?React?以及和其相关的技术发展方向值得关注。假如你想要为Web应用程序选择一个安全、通用的选项，那么你可以考虑?Vue.js?。

尽管整体框架现在不再那么受欢迎，但是假如你是要做严格的大型项目结构，AngularJS?会是一个不错的选择。尽管，现在大多数人还在使用 1.0 版本，但是可能不是长久之计。从长远来看，学习一下 TypeScript ，选择 4.0 版本会更加安全。

不要贬损?jQuery?。它尽管已经不怎样流行了，在技术媒体上也很少提及，但它还在积极的开发维护，而且完全能够胜任网站和应用程序的开发。jQuery 学习曲线平缓，并且全世界的许多开发人员都可以很好的了解。

假如你敢于冒险，喜欢尝鲜，Svelte?是一个有趣的 用户端/服务器 选项它在构建时预先渲染 JavaScript，并可能改变我们开发的方式。

工具的选择会因项目而异。大多数使用的是?Gulp?，但是?WebPack?越来越受欢迎。你可以用?ESLint?和?Mocha?进行测试，但是有很多其余的选择。

也就是说，每个项目、团队和技能都是不同的。你的评估时间有限，所以你很容易使用你所知道的东西。这篇文章将会接受评论和建议，但是当你有一把锤子的时候，一切看起来都像钉子。

最后，不要不记得库、框架和工具是可选的！在过去的十年中，JavaScript 的开发已经发生了革命性的变化; 我们已经从几个简陋的辅助库选择的时代进入到了一个压倒性的选择的时代。所以很容易陷入日益复杂的圈套，或者者每隔几个月就切换到最新最热框架。对于小型的或者简单的任务考虑使用轻量级的 JavaScript 库或者框架。在为其余项目选择框架时，现有的知识不会变成无价之宝。

我目前是在职前台开发，假如你现在也想学习前台开发技术，在入门学习前台的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前台学习交流裙：前面：603 中间：985 最后：993。里面聚集了少量正在自学前台的初学者，裙文件里面也有我做前台技术这段时间整理的少量前台学习手册，前台面试题，前台开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

我能否错过了你最喜欢的JavaScript库、框架或者工具？我当然有！欢迎评论…

原文链接：https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/