javascript框架库_2019年使用的最佳JavaScript框架，库和工具

javascript框架库

似乎有比开发人员更多JavaScript框架，库和工具。在2018年底，在GitHub上的快速搜索显示230万个JavaScript项目。 npm已成为全球最大的模块系统，在npmjs.com上有700,000个可用软件包，每月都有数十亿的下载量。

2018.12.06：文章已更新以反映JavaScript生态系统的当前状态。今年的更新由Sencha赞助。感谢您对使SitePoint成为可能的合作伙伴的支持！

本文致力于解释最流行的客户端JavaScript框架，库和工具之间的基础知识和基本差异。它们对您来说是否“最佳”是另一个问题。选择一些并坚持一段时间。请注意，无论您选择什么，您最喜欢的选项都会被“更好”的东西所取代！

li.toc-h3 {margin-left: 20px;}li.toc-h4 {margin-left: 40px;}

目录
棘手的术语
图书馆
构架
工具类
不要给我贴标签！
JavaScript框架和库
jQuery的
React
AngularJS 1.x
Angular 2+（现在为7.x）
Vue.js
Sencha Ext JS
Lodash和下划线
Backbone.js
Ember.js
Knockout.js
值得一提
工具：通用任务运行器
Webpack
Gulp.js
npm
咕unt声
工具：模块捆绑器
浏览器
需求JS
工具：棉绒
ESLint
捷迅
杰林特
工具：测试套件
笑话
摩卡咖啡
茉莉花
工具：杂项
总结与建议
注释

在阅读本文之前，请接受以下条款和条件！…

JavaScript格局每天都会变化。该文章自发布之日起就过时了！
“最好”是指“最流行/使用/大肆宣传的通用项目” 。全部都有免费/开源选项，但列表可能不包括您的收藏夹。
即使已中断的项目（例如YUI）在网络上仍具有很高的使用率，也不会包括在内。
仅引用客户端项目。有些可以在服务器端工作，但是列表不包括基于纯服务器的框架，例如Express.js或Hapi 。
有关每个项目的信息特意简短，以提供进一步研究的概述。
每个项目都提供了使用流行度指标，但是众所周知，统计数据很难整理并且可能会产生误导。
我有偏见。你有偏见。其他所有人都有偏见！我没有在这里尝试所有工具，但会声明我的最爱，但是您应该根据自己的要求进行评估。
我或SitePoint对您所做的任何灾难性决定概不负责！

棘手的术语

根据上下文，术语“框架”，“库”和“工具”在不同的时间对不同的人意味着不同的事物。此处使用的一般定义：

图书馆

库是有用功能的有组织的集合。典型的库可能包含处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等的函数。每个函数都将值返回到调用应用程序，可以根据需要选择实现该功能。可以将其看作是汽车部件的选择：您可以随意使用任何部件来构造可行驶的车辆，但必须自己制造发动机。

库通常提供更高级别的抽象，可以平滑实现细节和不一致之处。例如，可以使用XMLHttpRequest API实现Ajax，但这需要几行代码，并且各浏览器之间存在细微的差异。库可以提供更简单的ajax()函数，因此您可以自由地专注于更高级别的业务逻辑。

库可以将开发时间减少20％，因为您不必担心更好的细节。缺点：

库中的错误可能很难定位和修复
无法保证开发团队会Swift发布补丁
补丁可能会更改API并导致代码发生重大更改。

构架

框架是应用程序框架。它要求您以特定的方式进行软件设计，并在某些点插入自己的逻辑。通常为您提供事件，存储和数据绑定等功能。使用汽车的类比，框架提供了工作底盘，车身和发动机。您可以添加，删除或修补某些组件，以使车辆保持运行状态。

框架通常提供比库更高的抽象级别，并且可以帮助您快速构建项目的前80％。缺点：

如果您的应用程序超出了框架的范围，则最后20％可能会很艰难
框架更新或迁移可能很困难– 即便不是不可能
核心框架的代码和概念很少会老化。开发人员总是会发现一种更好的方法来做同样的事情。

工具类

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

工具应提供更轻松的开发过程。例如，与CSS相比，许多编码器更喜欢Sass ，因为它提供了代码分离，嵌套，渲染时变量，循环和函数。浏览器不了解Sass / SCSS语法，因此在测试和部署之前，必须使用适当的工具将代码编译为CSS。

不要给我贴标签！

库，框架和工具之间的区别很少清楚。一个框架可以包括一个库。库可以实现类似框架的方法。工具可能是必不可少的。我尝试标记每个项目，但范围可能会有所不同。

如果这听起来太复杂，则可以考虑对原始JavaScript进行编码。很好，但是您将不可避免地编写必须维护的自己的库和/或框架代码。 JavaScript本身是浏览器和操作系统抽象塔上的抽象！

JavaScript框架和库

按使用/受欢迎程度/炒作的大致顺序进行项目…

jQuery的

jQuery的	描述
类型	图书馆
网站	jquery.com
资料库	github.com/jquery/jquery
GitHub明星	50,000+
当前版本	3.3.1
开发商	jQuery团队
发射日期	2006年8月
典型尺寸	30kb分钟
典型用途	一般用途
用法	所有网站的73.5％

jQuery仍然是有史以来使用最广泛JavaScript库，并与WordPress，ASP.NET和其他几个框架一起分发。通过将CSS选择器引入DOM节点检索以及应用事件处理程序，动画和Ajax调用的链接，它彻底改变了客户端开发。

近年来，jQuery已不受开发人员青睐，但使用率仍然很高。对于需要大量JavaScript功能的项目，它仍然是可行的选择。

优点：

发行规模小
学习曲线浅，可观的在线帮助
简洁的语法
易于扩展

缺点：

增加了本机API的速度开销
现在浏览器兼容性已提高，因此不再那么重要
用法已平整
一些行业对不必要使用的强烈反对。

React

React	描述
类型	图书馆
网站	facebook.github.io/react/
资料库	github.com/facebook/react
GitHub明星	115,000+
当前版本	16.6.3
开发商	Facebook和贡献者
发射日期	2013年3月
典型尺寸	21kb分钟
典型用途	单页应用
用法	低

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

React可能是最近几年最受关注的库，它声称是用于构建用户界面JavaScript库。它着重于模型-视图-控制器（MVC）开发的“视图”部分，并易于创建保留状态的UI组件。它是最早实现虚拟DOM的库之一。内存结构可计算差异并有效地更新页面。

在统计数据中，React的使用率似乎较低，可能是因为它用于应用程序而非网站。几乎70％的开发人员声称有使用该库的经验。

优点：

小型，高效，快速和灵活
简单组件模型
良好的文档和在线资源
服务器端渲染是可能的
仍然很受欢迎并且发展Swift
为React开发人员招聘大量工作

缺点：

需要学习的新概念和语法
构建工具必不可少
可能需要其他库或框架来提供模型和控制器方面
可能与修改DOM的代码和其他库不兼容

AngularJS 1.x

AngularJS	描述
类型	构架
网站	angularjs.org
资料库	github.com/angular/angular.js
GitHub明星	60,000+
当前版本	1.7.5
开发商	谷歌
发射日期	2010年10月
典型尺寸	144kb
典型用途	单页应用
用法	低

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

尽管发布了第2版（现在是第4版！），但Angular 1.x仍在开发中。见下文…

优点：

一些大公司采用的流行框架
生成现代Web应用程序的单一解决方案
“标准” MEAN堆栈（MongoDB，Express.JS，AngularJS，NodeJS）的一部分，因此提供了许多文章和教程

缺点：

比某些替代品更陡峭的学习曲线
大型代码库
不可能升级到Angular 2.x
尽管是Google项目，但Google似乎没有使用它？

Angular 2+（现在为7.x）

角度的	描述
类型	构架
网站	角度
资料库	github.com/angular/angular
GitHub明星	43,000+
当前版本	7.1
开发商	谷歌
发射日期	2016年9月
典型尺寸	450kb分钟
典型用途	单页应用
用法	低

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

角度2+与v1根本不同。两者都不兼容- 也许Google应该给该项目取一个不同的名字？

优点：

生成现代Web应用程序的单一解决方案
仍然是MEAN堆栈的一部分，尽管可用的Angular 2+教程较少
TypeScript为熟悉C＃和Java等静态类型语言的用户提供了一些优势。

缺点：

比某些替代品更陡峭的学习曲线
大型代码库
无法从Angular 1.x升级
与1.x相比，Angular 2.x的摄取量相对较低
尽管是Google项目，但Google似乎没有使用它？

Vue.js

Vue.js	描述
类型	构架
网站	vuejs.org
资料库	github.com/vuejs/vue
GitHub明星	120,000+
当前版本	2.5.17
开发商	埃文·尤
发射日期	2014年2月
典型尺寸	19kb分钟
典型用途	组件和单页应用程序
用法	低

Vue.js是用于构建用户界面的轻量级渐进框架。该内核提供了一个类似于React的虚拟DOM驱动的视图层，该视图层可以与其他库集成，但也能够为单页应用程序提供支持。该框架是由Evan You创建的，他曾使用过AngularJS，但想提取他喜欢的部分。

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

优点：

快速采用并日益普及
易于入门，开发人员满意度很高
重量轻，依赖性小，性能好

缺点：

可以被React所掩盖
依靠单个开发人员进行更新
资源少于替代方案

Sencha Ext JS

扩展JS	描述
类型	框架和组件库
网站	sencha.com/products/extjs/
当前版本	6.6.0
开发商	煎茶
发射日期	2007年12月
典型尺寸	取决于要求：85 – 500kb
典型用途	组件和单页应用程序
用法	低

Ext JS是从YUI-Ext演变而来的，并且是此列表中使用时间最长的历史之一。尽管以其广泛的可配置，可访问的跨浏览器UI组件和数据可视化工具而闻名，但Ext JS还提供了用于构建完整应用程序的框架。另外，您可以将组件库与React或Angular一起使用。

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

优点：

广泛的可用组件
包含创建Web和移动应用程序所需的一切
脚本定制，设计工具和快速原型
提供用于可视化地构建和样式化Web应用程序的工具
商业支持和出色的文档
30天免费试用版和社区版，适用于小型应用程序（每年收入低于10,000美元）

缺点：

到目前为止，与React和Angular以外的框架进行集成可能尚不切实际-请参阅Ext JS 7的路线图计划
深入的自定义UI更改可能很困难

Lodash和下划线

Lodash	描述
类型	图书馆
网站	lodash.com/
资料库	github.com/lodash/lodash/
GitHub明星	35,000+
当前版本	4.17.11
开发商	约翰·戴维·道尔顿
发射日期	2012年4月
典型尺寸	4kb – 24kb分钟
典型用途	一般用途
用法	低

下划线	描述
类型	图书馆
网站	underscorejs.org/
资料库	github.com/jashkenas/underscore
GitHub明星	24,000+
当前版本	1.8.3
开发商	杰里米·阿什肯纳斯（Jeremy Ashkenas）
发射日期	2009年10月
典型尺寸	6kb分钟
典型用途	一般用途
用法	低

Lodash和Underscore在本节中进行了组合，因为它们提供了数百个功能性JavaScript实用程序来补充本机字符串，数字，数组和其他原始对象方法。有一些重叠，因此您不太可能在单个项目中同时需要两个库。

客户端使用率很低，但是服务器端Node.js应用程序都可以采用这两个库。

优点：

小而简单
良好的文档易于学习
与大多数库和框架兼容
不扩展内置对象
可以在客户端或服务器上使用

缺点：

ES2015和更高版本JavaScript中提供了一些方法。

Backbone.js

Backbone.js	描述
类型	构架
网站	骨架js.org
资料库	github.com/jashkenas/backbone/
GitHub明星	37,000+
当前版本	1.3.3
开发商	杰里米·阿什肯纳斯（Jeremy Ashkenas）
发射日期	2010年10月
典型尺寸	8kb分钟
典型用途	单页应用
用法	低

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

Backbone.js声称是一个库，因为它可以与其他项目集成。我怀疑大多数开发人员都认为它是一个框架，尽管没有其他人那么自以为是。

优点：

体积小，重量轻且不那么复杂
不会向HTML添加逻辑
出色的文档
被许多应用程序采用，包括Trello，WordPress.com，LinkedIn和Groupon

缺点：

比诸如AngularJS之类的替代品更低的抽象级别（尽管可以认为是一种好处）
需要其他组件来实现功能，例如数据绑定
最近的框架已经脱离了MVC架构

Ember.js

Ember.js	描述
类型	构架
网站	emberjs.com
资料库	github.com/emberjs/ember.js
GitHub明星	20,000+
当前版本	3.6.0
开发商	灰烬团队
发射日期	2011年12月
典型尺寸	95kb分钟
典型用途	单页应用
用法	低

Ember.js是基于Model-View-ViewModel（MVVM）模式的较大型框架之一。它在单个程序包中实现模板，数据绑定和库。具有Ruby on Rails经验的人会立即熟悉约定配置的概念。

优点：

为客户端应用程序提供单一解决方案
开发人员可以立即提高生产力-它使用jQuery
良好的向后兼容性和升级选项
采用了现代Web开发标准

缺点：

大量可分配
与其他朝着更小组件结构的框架相比，被认为是整体的
陡峭的学习曲线–这是Ember方法还是没有方法

Knockout.js

Knockout.js	描述
类型	构架
网站	kickoutjs.com
资料库	github.com/knockout/knockout
GitHub明星	9,000+
当前版本	3.5.0
开发商	史蒂夫·桑德森
发射日期	2010年7月
典型尺寸	59kb分钟
典型用途	单页应用
用法	低

Knockout.js是较早的MVVM框架之一，它使用观察器来确保UI与基础数据保持同步。它具有模板和依赖性跟踪功能。

优点：

轻巧无依赖性
出色的浏览器支持可以追溯到IE6
好的文档

缺点：

较大的项目可能会变得复杂
发展放缓
用法似乎正在减少

值得一提

渴望更多？以下项目不太受欢迎，但值得
考虑：

Polymer –一个库，可为HTML5 Web组件提供跨浏览器支持
Meteor – Web应用程序的完整堆栈平台。
Aurelia –轻量级的跨平台框架
Svelte –一个相当新的项目，它将框架源代码转换为类似香草JavaScript
Conditioner.js –一个新的库，可以根据状态自动加载和卸载模块。

工具：通用任务运行器

构建工具可自动执行各种Web开发任务，例如预处理，编译，模块捆绑，图像优化，代码最小化，整理和运行测试。任务通常在单个可执行程序包中一起管理。最受欢迎的选项：

Webpack

Webpack	描述
网站	webpack.js.org
资料库	github.com/webpack/webpack
GitHub明星	45,000+
当前版本	4.25.1
每周下载	400万

Webpack支持所有流行的模块选项，并已成为React开发的代名词。尽管自称是模块捆绑器，但Webpack可以用作通用任务运行程序。基于JavaScript对象的配置可能有点尴尬。可以使用生成器，但是一些Webpack用户已经迁移到Parcel ，以简化配置并缩短编译时间。

Gulp.js

Gulp.js	描述
网站	gulpjs.com
资料库	github.com/gulpjs/gulp
GitHub明星	30,000+
当前版本	4.0.0（3.9.1仍处于活动状态）
每周下载	750,000+

尽管Gulp不是第一个任务执行者，但他很快成为最受欢迎的人之一，并且是我个人的最爱。 Gulp使用易于阅读JavaScript代码将源文件加载到流中，并在将各种数据输出到构建文件夹之前通过各种插件通过管道传输数据。它简单，快速且有趣，但是开发人员已迁移到Webpack。

npm

npm	描述
网站	npmjs.com
资料库	github.com/npm/npm
GitHub明星	17,000+
当前版本	6.4.1
每周下载	百万

npm是Node.js包管理器，但其脚本工具可用于运行通用任务。对于没有依赖性的简单项目，这是一个有吸引力的选择。但是，更复杂的任务可能很快变得不切实际。

咕unt声

咕unt声	描述
网站	gruntjs.com
资料库	github.com/gruntjs/grunt
GitHub明星	17,000+
当前版本	1.0.3
每周下载	425,000

Grunt是最早获得大规模采用JavaScript任务执行者之一，但是速度和复杂的JSON配置导致Gulp的兴起。最糟糕的问题已经解决，Grunt仍然是受欢迎的选择。

工具：模块捆绑器

管理多个JavaScript文件可能会变得很繁琐。除非您可以本地采用相对较新的ES6模块导入语法，否则必须以适当的顺序加载或连接浏览器中JavaScript依赖项。如果您需要支持旧版浏览器（2018年之前发布的任何版本），则可以使用模块捆绑器，但是随着时间的流逝，使用这些工具的需求将会减少。

浏览器

浏览器	描述
网站	browserify.org
资料库	github.com/browserify/browserify
GitHub明星	12,000+
当前版本	16.2.3
每周下载	480,000

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

需求JS

需求JS	描述
网站	requirejs.org
资料库	github.com/requirejs/r.js
GitHub明星	2,500+
当前版本	2.3.6
每周下载	230,000

RequireJS从浏览器内部模块加载器开始，尽管它也可以在Node.js中使用。它支持AMD语法。

工具：棉绒

Linting分析您的代码中是否存在潜在的错误或与语法标准的偏离。您再也不会错过右括号或未声明的变量了！

ESLint

ESLint	描述
网站	eslint.org
资料库	github.com/eslint/eslint
GitHub明星	12,000+
当前版本	5.9.0
每周下载	400万

ESLint是大多数IDE，编辑器，捆绑器和任务运行器支持的最流行的整理工具。每个规则都是一个插件，因此您可以根据自己的喜好对其进行配置。

捷迅

捷迅	描述
网站	jshint.com
资料库	github.com/jshint/jshint
GitHub明星	8,000+
当前版本	2.9.6
每周下载	390,000

灵活JavaScript语言，比ESLint的可配置性差，但在真正的错误和学究的语法要求之间取得了很好的平衡。

杰林特

杰林特	描述
网站	jslint.com
资料库	github.com/reid/node-jslint
GitHub明星	8,000+
当前版本	0.12.0
每周下载	11,500

第一个Linter中的一个，它实现了一组严格的默认规则。开发速度放慢了，对于某些开发人员来说可能毫不妥协。

工具：测试套件

测试驱动开发要求您在开始编写代码之前先编写代码以对其进行测试。也欢迎您编写代码来测试您的测试代码！

有很多选项，包括Ava ， Tape和Jasmine，但是目前三个最受欢迎的选项是…

笑话

笑话	描述
网站	https://jestjs.io/
资料库	github.com/kof/node-qunit
GitHub明星	21,000+
当前版本	23.6.0
每周下载	200万

来自Facebook的测试框架，由于其与React和Webpack的紧密联系而日益流行。

摩卡咖啡

摩卡咖啡	描述
网站	mochajs.org
资料库	github.com/mochajs/mocha
GitHub明星	16,500+
当前版本	5.2.0
每周下载	180万

Mocha可以在Node.js和浏览器中运行测试。它支持异步测试，并且通常与Chai配对使用，以使测试代码能够以可读的方式表示。这是多年来最受欢迎的选项。

茉莉花

茉莉花	描述
网站	jasmine.github.io
资料库	github.com/jasmine/jasmine-npm
GitHub明星	300+
当前版本	3.3.0
每周下载	750,000

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

工具：杂项

尽管我尽了最大的努力，但我接受的并不是每个人都喜欢JavaScript！诸如TypeScript ， LiveScript和CoffeeScript之类的编译器可以使您的开发生活更加愉快。或者，考虑将Babel转换为简洁的现代ES2015源代码，使其成为跨浏览器兼容的ES5代码。

有数十种基于JavaScriptHTML模板引擎，包括Mustache ， Handlebars ， Pug（Jade）和EJS 。我更喜欢保留JavaScript语法（例如EJS和doT）的轻量级选项。

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

总结与建议

如果您遵循人群的智慧， React目前正处于势头之下，其他库也在朝着相似的技术方向发展。这是一个安全的职业选择，但您还应该考虑使用Vue.js或React-compatible-but-smaller Preact 。

整体框架已不再受欢迎，但是，如果您需要用于大型项目的严格结构， AngularJS仍然是受欢迎的选择。大多数开发人员都坚持使用1.0版，但这可能是不必要的选择。从长远来看，版本2+可能是一个更安全的选择，但是您将需要学习TypeScript。

Sencha的Ext JS是企业（小型企业到企业）寻求包含框架以及预先构建的集成组件和工具（包括获得商业支持）的选择的绝佳选择。 Ext JS还轻松地将其强大的组件库与React和Angular集成在一起，以供寻求实现预构建组件而不是自己构建组件的开发人员使用。

不要打折jQuery 。它不是新潮，并且在技术媒体中很少提及，但是它是经过积极开发的，并且对于网站和应用程序具有强大的功能。 jQuery的学习曲线很浅，并且被全世界许多开发人员所理解。

如果您喜欢冒险，可以使用Svelte和Rawact等新的编译器选项将框架代码转换为原始 JavaScript。删除了框架依赖关系，代码显着减小，并且运行速度更快。

工具的选择不太重要，并且可能因项目而异。大多数WebPack ， Gulp或npm脚本。使用ESLint和Jest进行测试不会出错，但是可以尝试许多替代方法。

也就是说，每个项目，团队和技能都不同。您进行评估的时间有限，因此很容易使用您所知道的信息。本文将收到建议使用FrameworkX的评论，但是当您用锤子敲打时，一切看起来都像钉子。

最后，永远不要忘记，库，框架和工具是可选的！ 在过去的十年中，JavaScript开发发生了翻天覆地的变化。我们已经从一些基本的帮助程序库变成了压倒性的选择。很容易陷入不断增加的陷阱，或者每隔几个月就会切换到最新的热门框架。始终考虑使用原始JavaScript，尤其是对于较小的个人用户。您获得的知识不会过时，并且在评估其他项目的框架时将变得无价。

我是否错过，不满意或称赞您最喜欢JavaScript库，框架和工具的好处？我当然有！ 欢迎评论...

翻译自: https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/

javascript框架库