2019年最佳JavaScript框架，库和工具-js教程-PHP中文网

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

JavaScript框架、库和工具的数量似乎已经超过了开发人员的数量。2018年底，GitHub上的快速搜索显示了230万个JavaScript项目。npm已成为全球最大的模块系统，在npmjs.com上拥有70万个可用软件包，每月下载量达数十亿次。

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

本文旨在解释最流行的客户端JavaScript框架、库和工具的基本知识和基本区别。它们是否适合您是另一个问题。选择一个并坚持一段时间。请注意，无论您选择什么，您最喜欢的选项都将被更“好”的东西所取代！

li.toc-h3 { margin-left: 20px; } li.toc-h4 { margin-left: 40px; } 关键要点

由于其高效的虚拟DOM和基于组件的架构，React仍然是构建用户界面（特别是单页应用程序）的首选。
Vue.js因其简单性和灵活性而受到好评，使其成为寻求易于与其他库集成的渐进式框架的开发人员的绝佳选择。
Angular提供了一个全面的框架解决方案，尤其是在其最新版本（2 ）中，它得到了Google的大力支持，并专注于TypeScript，这吸引了熟悉静态类型语言的开发人员。
jQuery尽管炒作有所下降，但在许多项目中仍然具有相关性和广泛使用，因为它易于使用并且在各种Web平台上具有广泛的兼容性。
Webpack和ESLint被强调为现代JavaScript开发中必不可少的工具，分别用于模块捆绑和代码质量保证。
Sencha Ext JS被认为是一个强大的企业级框架，它提供了广泛的UI组件和工具，并具有强大的商业支持和培训选项。

目录
棘手的术语
库
框架
工具
不要给我贴标签！
JavaScript框架和库
jQuery
React
AngularJS 1.x
Angular 2 （现在是7.x）
Vue.js
Sencha Ext JS
Lodash和Underscore
Backbone.js
Ember.js
Knockout.js
值得关注的项目
工具：通用任务运行器
Webpack
Gulp.js
npm
Grunt
工具：模块捆绑器
Browserify
RequireJS
工具：代码风格检查
ESLint
JSHint
JSLint
工具：测试套件
Jest
Mocha
Jasmine
工具：其他工具
总结和建议
评论

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

JavaScript环境每天都在变化。这篇文章发布的那一刻就会过时！
我所说的“最佳”是指“最流行/使用/炒作的通用项目”。所有项目都有免费/开源选项，但列表中可能不包含您最喜欢的项目。
已停止的项目（例如YUI）未包含在内，即使它们在网络上的使用率仍然很高。
只参考客户端项目。有些可以在服务器端工作，但列表不包括纯服务器端框架，例如Express.js或Hapi。
有关每个项目的资料有意简短，以便提供进一步研究的概述。
每个项目都提供一个使用流行度指标，但统计数据众所周知难以整理，而且可能具有误导性。
我有偏见。你也有偏见。其他人也有偏见！我没有尝试过这里的每个工具，并将声明我最喜欢的工具，但您应该根据您的需求做出自己的评估。
我和SitePoint都不对您做出的任何灾难性决定负责！

棘手的术语

术语“框架”、“库”和“工具”在不同的时间对不同的人可能有不同的含义，具体取决于上下文。此处使用的通用定义：

库

库是有组织的有用功能集合。典型的库可能包括处理字符串、日期、HTML DOM元素、事件、cookie、动画、网络请求等的函数。每个函数都会向调用应用程序返回值，您可以根据自己的选择实现这些值。可以把它想象成一系列汽车组件：您可以随意使用任何组件来帮助构建一辆能正常行驶的汽车，但您必须自己构建发动机。

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

库可以将开发时间缩短20%，因为您不必担心更精细的细节。缺点：

库中的错误可能难以查找和修复
开发团队无法保证会快速发布补丁
补丁可能会更改API并导致代码发生重大更改。

框架

框架是应用程序的骨架。它要求您以特定方式处理软件设计，并在某些点插入您自己的逻辑。通常会为您提供事件、存储和数据绑定等功能。使用汽车的类比，框架提供了一个工作的底盘、车身和发动机。您可以添加、删除或调整某些组件，前提是车辆仍然可以运行。

框架通常比库提供更高层次的抽象，并且可以帮助您快速构建项目的最初80%。缺点：

如果您的应用程序超出了框架的范围，那么最后的20%可能会很困难——如果不是不可能的话
框架更新或迁移可能很困难
核心框架代码和概念很少能很好地适应时代。开发人员总是会发现一种更好的方法来做同样的事情。

工具

工具可以辅助开发，但不是项目不可或缺的一部分。工具包括构建系统、编译器、转译器、代码压缩器、图像压缩器、部署机制等等。

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

不要给我贴标签！

库、框架和工具之间的区别很少明确。框架可能包含库。库可以实现类似框架的方法。工具对于两者都可能至关重要。我已经尝试对每个项目进行标记，但范围可能会有所不同。

如果这听起来太复杂，您可以考虑编写原生JavaScript。这很好，但是您最终会编写自己的库和/或框架代码，这些代码必须维护。JavaScript本身是对浏览器和操作系统抽象之上的抽象！

JavaScript框架和库

按使用/流行度/炒作的近似顺序排列的项目……

jQuery

jQuery 描述 type 库 website jquery.com repository github.com/jquery/jquery GitHub stars 50,000 当前版本 3.3.1 开发者 jQuery团队发布日期 2006年8月典型大小 30kb min 典型用途通用用途使用率所有网站的73.5% jQuery仍然是有史以来使用最广泛的JavaScript库，并与WordPress、ASP.NET和其他一些框架一起分发。它通过将CSS选择器引入DOM节点检索以及链接来应用事件处理程序、动画和Ajax调用，从而彻底改变了客户端开发。

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

优点：

分发大小小
学习曲线平缓，大量在线帮助
简洁的语法
易于扩展

缺点：

为原生API增加了速度开销
现在浏览器兼容性有所提高，因此不太重要了
使用率趋于平稳
行业对不必要使用的某些抵制。

React

React 描述 type 库 website facebook.github.io/react/ repository github.com/facebook/react GitHub stars 115,000 当前版本 16.6.3 开发者 Facebook和贡献者发布日期 2013年3月典型大小 21kb min 典型用途单页应用程序使用率低可能是过去几年中讨论最多的库，React声称是一个用于构建用户界面的JavaScript库。它专注于模型-视图-控制器（MVC）开发中的“视图”部分，并且可以轻松创建保留状态的UI组件。它是首批实现虚拟DOM的库之一；内存中的结构计算差异并有效地更新页面。

React的使用率在统计数据中似乎很低，这可能是因为它用于应用程序而不是网站。近70%的开发人员声称他们有一些使用该库的经验。

优点：

小巧、高效、快速且灵活
简单的组件模型
良好的文档和在线资源
服务器端渲染是可能的
仍然很流行并且发展迅速
许多工作都为React开发人员做广告

缺点：

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

AngularJS 1.x

AngularJS 描述 type 框架 website angularjs.org repository github.com/angular/angular.js GitHub stars 60,000 当前版本 1.7.5 开发者 Google 发布日期 2010年10月典型大小 144kb 典型用途单页应用程序使用率低 Angular是此列表中出现的第一个框架——或MVC应用程序框架。最流行的版本仍然是1.x版本，它通过双向数据绑定扩展了HTML，同时将DOM操作与应用程序逻辑分离。

尽管发布了2.0版（现在是4.0版！），但Angular 1.x仍在开发中。困惑？见下文……

优点：

几家大型公司采用的一种流行框架
创建现代Web应用程序的单一解决方案
是“标准”MEAN堆栈（MongoDB、Express.JS、AngularJS、NodeJS）的一部分，因此有许多文章和教程可用

缺点：

比其他替代方案的学习曲线更陡峭
代码库庞大
无法升级到Angular 2.x
尽管是Google项目，但Google似乎没有使用它？

Angular 2 （现在是7.x）

Angular 描述 type 框架 website angular.io repository github.com/angular/angular GitHub stars 43,000 当前版本 7.1 开发者 Google 发布日期 2016年9月典型大小 450kb min 典型用途单页应用程序使用率低 Angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用TypeScript（编译为JavaScript）创建的模块化组件模型。为了增加混淆，4.0版于2017年3月发布（跳过了v3以避免语义版本问题）。

Angular 2 与v1完全不同。两者都不兼容——也许Google应该为该项目起一个不同的名字？！

优点：

创建现代Web应用程序的单一解决方案
仍然是MEAN堆栈的一部分，尽管可用的Angular 2 教程较少
对于熟悉静态类型语言（如C#和Java）的人来说，TypeScript提供了一些优势。

缺点：

比其他替代方案的学习曲线更陡峭
代码库庞大
无法从Angular 1.x升级
与1.x相比，Angular 2.x的采用率相对较低
尽管是Google项目，但Google似乎没有使用它？

Vue.js

Vue.js 描述 type 框架 website vuejs.org repository github.com/vuejs/vue GitHub stars 120,000 当前版本 2.5.17 开发者 Evan You 发布日期 2014年2月典型大小 19kb min 典型用途组件和单页应用程序使用率低 Vue.js是一个轻量级的渐进式框架，用于构建用户界面。核心提供了类似React的虚拟DOM驱动的视图层，可以与其他库集成，但它也能够驱动单页应用程序。该框架由Evan You创建，他之前曾在AngularJS工作，但希望提取他喜欢的部分。

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

优点：

快速采用和日益普及
易于上手，开发人员满意度高
轻量级、依赖性小、性能好

缺点：

可能被React所掩盖
对单个开发人员的更新有所依赖
资源少于替代方案

Sencha Ext JS

Ext JS 描述 type 框架和组件库 website sencha.com/products/extjs/ 当前版本 6.6.0 开发者 Sencha 发布日期 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和Underscore

Lodash 描述 type 库 website lodash.com/ repository github.com/lodash/lodash/ GitHub stars 35,000 当前版本 4.17.11 开发者 John-David Dalton 发布日期 2012年4月典型大小 4kb – 24kb min 典型用途通用用途使用率低 Underscore 描述 type 库 website underscorejs.org/ repository github.com/jashkenas/underscore GitHub stars 24,000 当前版本 1.8.3 开发者 Jeremy Ashkenas 发布日期 2009年10月典型大小 6kb min 典型用途通用用途使用率低本节将Lodash和Underscore组合在一起，因为它们提供了数百个功能性JavaScript实用程序，以补充本机字符串、数字、数组和其他原始对象方法。存在一些重叠，因此您不太可能在一个项目中同时需要这两个库。

客户端使用率较低，但任一库都可以用于服务器端Node.js应用程序。

优点：

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

缺点：

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

Backbone.js

Backbone.js 描述 type 框架 website backbonejs.org repository github.com/jashkenas/backbone/ GitHub stars 37,000 当前版本 1.3.3 开发者 Jeremy Ashkenas 发布日期 2010年10月典型大小 8kb min 典型用途单页应用程序使用率低 Backbone.js是最早提供服务器端框架中常见的MVC结构的客户端选项之一。它唯一的依赖项是Underscore.js，该库由同一位开发人员创建。

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

优点：

小巧、轻量级且不太复杂
不向HTML添加逻辑
优秀的文档
已被许多应用程序采用，包括Trello、WordPress.com、LinkedIn和Groupon

缺点：

比AngularJS等替代方案的抽象级别更低（但这可以被认为是一个优势）
需要其他组件来实现诸如数据绑定之类的功能
最近的框架已经远离MVC架构

Ember.js

Ember.js 描述 type 框架 website emberjs.com repository github.com/emberjs/ember.js GitHub stars 20,000 当前版本 3.6.0 开发者 Ember团队发布日期 2011年12月典型大小 95kb min 典型用途单页应用程序使用率低 Ember.js是基于模型-视图-视图模型（MVVM）模式的较大武断框架之一。它在一个包中实现了模板、数据绑定和库。对于那些有Ruby on Rails经验的人来说，约定优于配置的概念会立即熟悉。

优点：

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

缺点：

分发文件较大
与其他正在转向更小组件结构的框架相比，它被认为是整体式的
学习曲线陡峭——这是Ember的方式，或者根本没有方式

Knockout.js

Knockout.js 描述 type 框架 website knockoutjs.com repository github.com/knockout/knockout GitHub stars 9,000 当前版本 3.5.0 开发者 Steve Sanderson 发布日期 2010年7月典型大小 59kb min 典型用途单页应用程序使用率低 Knockout.js是较旧的MVVM框架之一，它使用观察者来确保UI与底层数据保持同步。它具有模板和依赖项跟踪功能。

优点：

小巧轻便，没有依赖项
优秀的浏览器支持，可追溯到IE6
优秀的文档

缺点：

大型项目可能会变得复杂
开发速度减慢
使用率似乎正在下降

值得关注的项目

渴望了解更多？以下项目不太流行，但值得考虑：

Polymer——一个启用HTML5 Web组件跨浏览器支持的库
Meteor——一个用于Web应用程序的全栈平台。
Aurelia——一个轻量级、跨平台的框架
Svelte——一个相当新的项目，它将框架源代码转换为类似原生的JavaScript
Conditioner.js——一个新的库，它根据状态自动加载和卸载模块。

工具：通用任务运行器

构建工具自动化各种Web开发任务，例如预处理、编译、模块捆绑、图像优化、代码压缩、代码风格检查和运行测试。任务通常在一个可执行包中一起管理。最流行的选项：

Webpack

Webpack 描述 website webpack.js.org repository github.com/webpack/webpack GitHub stars 45,000 当前版本 4.25.1 每周下载量 400万 Webpack支持所有流行的模块选项，并且已成为React开发的代名词。尽管声称是一个模块捆绑器，但Webpack可以用作通用任务运行器。基于JavaScript对象的配置可能有点笨拙。生成器可用，但一些Webpack用户已迁移到Parcel，以获得更简单的配置和更快的编译时间。

Gulp.js

Gulp.js 描述 website gulpjs.com repository github.com/gulpjs/gulp GitHub stars 30,000 当前版本 4.0.0（3.9.1仍在活跃）每周下载量 750,000 虽然它不是第一个任务运行器，但Gulp很快就成为最流行的任务运行器之一，也是我个人最喜欢的。Gulp使用易于阅读的JavaScript代码，该代码将源文件加载到流中，然后将数据通过各种插件传递，然后再将其输出到构建文件夹。它简单、快速且有趣，但开发人员已迁移到Webpack。

npm

npm 描述 website npmjs.com repository github.com/npm/npm GitHub stars 17,000 当前版本 6.4.1 每周下载量 100万 npm是Node.js包管理器，但其脚本工具可用于通用任务运行。对于依赖项较少的简单项目，这是一个有吸引力的选择。但是，更复杂的任务很快就会变得不切实际。

Grunt

Grunt 描述 website gruntjs.com repository github.com/gruntjs/grunt GitHub stars 17,000 当前版本 1.0.3 每周下载量 425,000 Grunt是最早实现大规模采用的JavaScript任务运行器之一，但其速度和复杂的JSON配置导致了Gulp的兴起。最糟糕的问题已得到解决，Grunt仍然是一个流行的选择。

工具：模块捆绑器

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

Browserify

Browserify 描述 website browserify.org repository github.com/browserify/browserify GitHub stars 12,000 当前版本 16.2.3 每周下载量 480,000 Browserify支持Node.js使用的CommonJS模块，将所有模块编译成单个浏览器兼容文件。

RequireJS

RequireJS 描述 website requirejs.org repository github.com/requirejs/r.js GitHub stars 2,500 当前版本 2.3.6 每周下载量 230,000 RequireJS最初是一个浏览器内模块加载器，尽管它也可以在Node.js中使用。它支持AMD语法。

工具：代码风格检查

代码风格检查分析您的代码是否存在潜在错误或与语法标准的偏差。您将永远不会错过右括号或未声明的变量！

ESLint

ESLint 描述 website eslint.org repository github.com/eslint/eslint GitHub stars 12,000 当前版本 5.9.0 每周下载量 400万 ESLint是最流行的代码风格检查工具，大多数IDE、编辑器、捆绑器和任务运行器都支持它。每个规则都是一个插件，因此可以根据您的喜好进行配置。

JSHint

JSHint 描述 website jshint.com repository github.com/jshint/jshint GitHub stars 8,000 当前版本 2.9.6 每周下载量 390,000 一个灵活的JavaScript代码风格检查器，它不如ESLint那么可配置，但在真正的错误和死板的语法要求之间取得了良好的平衡。

JSLint

JSLint 描述 website jslint.com repository github.com/reid/node-jslint GitHub stars 8,000 当前版本 0.12.0 每周下载量 11,500 最早的代码风格检查器之一，它实现了一套严格的默认规则。开发速度已减慢，对于某些开发人员来说，它可能有点不妥协。

工具：测试套件

测试驱动开发要求您在开始编写代码之前编写代码来测试您的代码。欢迎您编写代码来测试您的测试代码！

有很多选项，包括Ava、Tape和Jasmine，但目前三个最流行的选项是……

Jest

Jest 描述 website //m.sbmmt.com/link/50be28d343081a44df25869ab1e4502f repository github.com/kof/node-qunit GitHub stars 21,000 当前版本 23.6.0 每周下载量 200万来自Facebook的测试框架，由于其与React和Webpack的紧密联系而越来越受欢迎。

Mocha

Mocha 描述 website mochajs.org repository github.com/mochajs/mocha GitHub stars 16,500 当前版本 5.2.0 每周下载量 180万 Mocha可以在Node.js和浏览器中运行测试。它支持异步测试，并且通常与Chai配对使用，以便能够以可读的样式表达测试代码。多年来，它一直是最流行的选择。

Jasmine

Jasmine 描述 website jasmine.github.io repository github.com/jasmine/jasmine-npm GitHub stars 300 当前版本 3.3.0 每周下载量 750,000 Jasmine是一个行为驱动测试套件，它可以自动化测试您在浏览器中的UI和交互。

工具：其他工具

尽管我尽了最大努力，但我承认并非每个人都喜欢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后面，其他库也在朝着类似的技术方向发展。这是一个安全的职业选择，但您也应该考虑Vue.js或与React兼容但更小的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库、框架和工具的优势？当然，我做到了！欢迎评论……

关于顶级JavaScript框架、库和工具的常见问题

Angular和React的主要区别是什么？

Angular和React都是流行的JavaScript框架，但它们有一些关键区别。由Google开发的Angular是一个成熟的MVC框架，它提供了一套强大的功能来构建复杂的应用程序。它使用双向数据绑定和真实DOM。另一方面，由Facebook开发的React是一个用于构建用户界面的库。它使用单向数据绑定和虚拟DOM，这使其在渲染大型列表和数据集时更快、更高效。