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/
网友评论