JavaScript开发工具大全

article/2025/10/12 2:28:28

译文:https://blog.fundebug.com/2017/06/19/javascript-tool-list/

原文:https://da-14.com/blog/ultimate-list-javascript-tools

\简介

2017年1月,Stack Overflow年度开发者调研一共访问了64000个程序员,发现JavaScript已经连续5年成为最流行的编程语言。



这篇博客将介绍一些常用的JavaScript开发工具:

  • 构建&自动化
  • IDE&编辑器
  • 文档
  • 测试
  • 调试
  • 安全
  • 代码优化&分析
  • 包管理

构建 & 自动化

  • Webpack对JavaScript应用依赖的所有模块进行静态分析,生成依赖图,然后将它们打包成数个静态文件。
  • Grunt以将重复耗时的任务自动化。Grunt的生态系统非常大,有超过6010个插件。
  • Gulp发布于Grunt之后,采用了完全不同的方式,使用JavaScript函数定义任务。它有超过2770个插件,并且提供了更好的控制。
  • Browserify使得开发者可以在浏览器使用CommonJS模块。开发者像在node环境一样,通过require('modules')来组织模块之间的引用和依赖,Browserify将这些依赖打包成浏览器可以直接引用的JS文件。
  • Brunch非常简单,速度很快。Brunch的配置文件非常简单,入门文档非常详细。Brunch会自动生成Source Map,方便了开发者Debug。
  • Yeoman可以用于任何编程语言(JavaScript, Python, C#, Java, etc.)。它是前端开发的脚手架,有6213个插件。

IDE & 编辑器

  • WebStorm是一款强大的JavaScript IDE。它支持多种框架和CSS语言,包括前端,后端,移动端以及桌面应用。WebStorm可以无缝整合第三方工具,例如构建构建、语法检查构建linter等等。它提供了代码补全,实时错误监测,导航,内置控制台,各种插件等一系统功能。
  • Atom是GitHub团队开发的。开发者可以很容易地对Atom进行自定义。Atom自带了一个包管理工具,代码补全,文件系统浏览器,支持多个平台以及其他有用的功能。
  • Visual Studio Code是微软开发的IDE,支持TypeScript。它提供了代码补全,语法高亮,支持Git命令等等。另外,它还有非常多的插件。
  • Brackets是一个轻量级的开源编辑器。它专注于可视化工具,可以帮助开发者开发Web应用。Brackets支持实时预览以及行内编辑。

文档

  • Swagger提供了一系列规则用于描述API。使用Swagger,可以创建清晰的文档,并且自动化API相关的操作(例如功能测试)。
  • JSDoc可以根据javascript文件中注释信息,生成JavaScript应用程序或库、模块的API文档。JSDoc可以用于管理大型项目。
  • jGrouseDoc 是一个开源工具,可根据JavaScript注释生成类似Jaavdoc 的源码文档。它不仅可以为变量和函数生成文档,还可以为模块等其他元素生成文档。
  • YUIDoc基于Nodejs,可以将文档中的注释生成API文档。它使用类似于Javadoc与Doxygen的语法,并且支持实时预览,支持各种语言,并且支持标记语言。
  • Docco 是免费的文档工具,由Literate CoffeeScript编写。它将代码中的注释生成HTML文档。Docco并不限于JavaScript,同时支持Python, Ruby, Clojure等语言。

测试

  • Jasmine 是一个行为驱动开发(BDD)框架,用于测试JavaScript代码。它不依赖任何第三方模块,也不需要DOM。它的语法非常简单易懂,使得编写测试变得很简单。另外,它也可以用于测试Node.js,Python以及Ruby。
  • Mocha是一个功能测试框架,用于测试Node.js以及浏览器端JavaScript。作为开发者首选的测试框架,它可以自由的编写测试组,提供详细的测试报告,同时让异步测试非常简单。Mocha通常与断言库Chai来验证测试结果。
  • PhantomJS用于前端单元测试。由于PhantomJS是一个无界面的Webkit浏览器引擎,与直接使用浏览器测试相比,使用PhantomJS脚本可以运行得更快。它支持各种网页标准,例如JSON, Canvas, DOM操作, SVG以及CSS选择器。
  • Protractor是一个端到端测试框架,用于测试Angular应用。它是基于WebDriverJS构建的,它可以通过浏览器事件或者原生事件,从而模拟真实用户,来测试应用。

调试

  • JavaScript Debugger由Mozilla Developer Network (MDN)开发,可以独立用于调试Node.js代码,或者用于其他浏览器。Firefox提供了本地和远程调试功能,并且,Firefox安卓端也用于调试运行在安卓应用。
  • Chrome Dev Tools提供了一系列工具,可以用于调试JavaScript代码,编辑CSS,以及测试应用性能。
  • ng-inspector是Firefox,Chrome和Safari浏览器插件,可以帮助开发者开发、理解以及调试AngularJS应用。它提供了实时更新,DOM高亮等功能。
  • Augury是一个Chrome插件,可以用于调试Angular 2应用。它让开发者可以直接查看应用结构,操作特征以及状态变化。

安全

  • Snyk是一个付费服务,用于发现、修复和预防JavaScript,Node.js和Ruby应用的已知漏洞。Snyk拥有自己的漏洞库,以及NSP和NIST NVD的漏洞数据。它允许开发者使用它们的补丁和更新来修复这些安全漏洞。
  • Node Security Project提供了工具用于扫描依赖来监测漏洞。NSP使用自己的漏洞数据,以及来自NIST NVD的漏洞数据。NSP支持集成GitHub和CI软件,实时监测和报警,并且可以提供如何修复Node.js应用漏洞的建议。
  • RetireJS是一个开源的依赖监测工具。它包含了多个组件,包括命令行工具,Grunt插件,Firefox和Chrome插件,Burp和OWASP ZAP插件。Retirejs从NIST NVD,漏洞追踪系统,博客和邮件列表等手机漏洞数据。
  • Gemnasium是一个付费工具,不过有免费方案。它支持各种技术,比如Ruby, PHP, Bower, Python和npm。Gemnasium提供很多非常有用的特性,比如自动更新,实时报警以及Slack集成等。
  • OSSIndex支持多个生态系统(Java, JavaScript和.NET/C#),以及多个平台,例如NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal和MSI。它从NVD以及其他来源收集漏洞数据。

代码优化 & 分析

  • JSLint是一个Web服务,用于验证JavaScript的代码质量。当它诊断到一个问题时,它会返回问题的大致位置和出错信息。JSLint可以分析一些编码规范以及语法错误。
  • JSHint可以发现JavaScript中的错误以及一些潜在的问题。JSHint是一个静态代码分析工具,旨在帮助开发者编写大型的程序。它可以诊断语法错误、隐形类型转换等问题,但是它并不能确定你的应用是否正确、性能是否足够好、以及是否会发生内存泄漏。 JSHint是JSLint的一个fork。
  • ESLint是一个开源诊断工具,用于JSX和JavaScript应用。它可以帮助开发者发现可疑的或者不符合特定编程规范的代码。它帮助开发者在没有执行代码之前发现JS代码中问题,节省了不少时间。ESLint由Node.js编写,可以使用NPM安装。
  • Flow是JavaScript代码静态类型检测器,由Facebook开发。Flow可以在编码时检查到类型错误并做出提示。

包管理

  • Bower是一个用于管理前端依赖的包管理器,Twitter创建。它提供了大量可供使用的依赖包,帮助JavaScript开发者更方便地管理前端依赖的JS库。
  • NPMnode package manager的缩写,事实上NPM包可以用于前后端。它是JavaScript包管理系统,也是世界上最大的依赖库,有超过475,000个模块。
  • Yarn是Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。与NPM相比,它解决了安全、性能以及一致性问题。
  • Duo吸取了Component, Browserify和Go的经验,致力于简化大型Web应用的构建过程。

欢迎加入我们Fundebug的全栈BUG监控交流群: 622902485


http://chatgpt.dhexx.cn/article/JvCbpG1x.shtml

相关文章

前端(HTML css JS)开发工具及常用插件推荐

前端编程工具有很多,例如Visual Studio Code(简称VS code),hbuilder,sublime text3,notepad,webstorm等等,今天给大家推荐的是VS code VS code是一个完全免费的软件,页面…

十款最新的JavaScript开发工具

JavaScript 自推出后就大受开发者的青睐,基于 JavaScript 的开发工具不计其数,开发者们可以灵活选择,轻松构建应用。本文分享了十款最新的 JavaScript 开发工具,喜欢的话就赶紧 mark! 1. Kreate 这款工具有助于对 jQu…

9个最好用的JavaScript开发工具和代码编辑器

Web设计和开发是现今越来越流行的职业方向之一。工欲善其事,必先利其器,如果你想在这个领域出类拔萃,那么你就必须具备一些优秀的技能,例如能操作不同的平台、IDE和其他各种各样的工具。 谈到平台和IDE,现在已经不是以…

js基础篇-开发工具

一. Javascript的开发工具主要包括浏览器和代码编辑器 浏览器:用于执行,调试js代码。 代码编辑器:用于编写代码。 1. 常见的浏览器 开发商浏览器特点MicrosoftInternet Explorerwindows操作系统的内置浏览器,用户数量较多Micros…

推荐15款很棒的 JavaScript 开发工具

在开发中,借助得力的工具可以事半功倍。今天这篇文章与大家分享最近发现的一些有用的 JavaScript 和 jQuery 的开发工具,库和插件。希望这些工具在你你即将到来的项目中能用得上。 01、TestSwarm: Continious & Distributed JS Testing 地址&#xf…

分享 27 个面向开发人员的最佳 Vue.js 开发工具

英文 | https://javascript.plainenglish.io/best-27-vuejs-development-tools-for-developers-bd972bb5f573 01、BootstrapVue 地址:https://bootstrap-vue.org/ 一个用于 Vue.js 构建引导接口的开源库。 02、Vuex 地址:https://vuex.vuejs.org/ Vue.js…

JS 开发工具库

JS 开发工具库 前言一、开发环境准备1、安装 Node2、创建项目 二、工具函数的封装1、Ajax 的封装2、datePicker3、文件导出功能的实现3-1 导出 Word 三、项目打包1、打包前准备1.1 初始化项目1.2 下载依赖1.3 配置 Webpack1.4 配置打包命令1.5 项目打包1.6 测试 2、暴露工具函数…

JavaScript 开发者的 5 款必备工具

工欲善其事,必先利其器,一款优秀的开发工具能够极大提高程序开发效率与体验。在Web前端开发中,常用的开发工具有Visual Studio Code、Sublime Text、HBuilder等,下面我们就来介绍这些开发工具的特点。 1.Visual Studio Code Vis…

学javascript需要用到哪些开发工具?分享这几款

学习web前端技术,辅助工具是在学习过程中必须要用到的,包括后面的工作中,辅助工具可以更快的提高我们的工作效率,下面小编就为大家整理了学javascript需要用到的开发工具。 学javascript有哪些开发工具: 1.HBuilder …

SQLLDR 简介

1. SQLLDR导入 1.1 简介 SQL*LOADER是ORACLE的数据加载工具,通常用来将操作系统文件(数据)迁移到ORACLE数据库中。SQL*LOADER是大型数据仓库选择使用的加载方法,因为它提供了最快速的途径(DIRECT,PARALLEL&…

uchar 和 uchar3的疑惑

一直没有注意过,之前写代码都是用别的库,一直会遇到uchar或者uchar3,以为它在stl中的内置的类型,后面发现不是,其实它是别的库私下定义的(类似int3),详见opencv。 uchar它们在其中已…

安装另外一个版本keil5之后,出现许许多多的uchar未定义

新换了一台电脑。 结果就出现了很多很多问题,就是uchar突然不行。 一直在写宏定义, #define uchar unsigned char #define uint unsigned int #define ulong unsigned long 不成功,反倒错误越来越多,说是宏定义与之前的冲突。 后…

数据库之char vchar nchar nvchar的区别

首先介绍一下定长或变长 所谓定长就是长度固定的,当输入的数据长度没有达到指定的长度时将自动以英文空格在其后面填充,使长度达到相应的长度;有var前缀的,表示是实际存储空间是变长的,比如varchar,nvarchar变长字符数…

数据库中char varchar nchar nvarchar的区别

数据库中char varchar nchar nvarchar的区别 我们在进行数据库的设计的时候,很多情况下表中的字段都是用的是字符串类型的数据,其中就有四种选择char varchar nchar nvarchar,我们该如何进行? 四种类型的详细说明 char&#xff1…

【OpenCV】中saturate_castuchar的含义和用法是什么?

saturate_cast<uchar>主要是为了防止颜色溢出操作 原理大致如下 if(data<0) data0; elseif(data>255) data255;比如我们对像素进行线性操作。 <1> 不使用saturate_cast<uchar> //三个for循环&#xff0c;执行运算 g_dstImage(i,j) a*g_srcImage(i,j…

用cout输出uchar(unsigned char)变量时,没有输出结果怎么办?

在OpenCV中uchar实际上就是unsigned char&#xff0c;其定义如下&#xff1a; typedef unsigned char uchar;在图像处理中&#xff0c;我们经常用unsigned char代表我们的灰度值&#xff0c;因为灰度值的范围刚好是0~255嘛。 于是&#xff0c;习惯性地用久之后我们就容易真把…

opencv中 .at<uchar>()和.ptr<uchar>()使用方法的区别

opencv中 .at<uchar>&#xff08;&#xff09;和.ptr&#xff1c;uchar&#xff1e;&#xff08;&#xff09;使用方法的区别在opencv中&#xff0c;.at<uchar>&#xff08;&#xff09;和.ptr<uchar>&#xff08;&#xff09;都是获取像素值的函数&#xff…

char/uchar类型越限总结

我们在文章一和文章二中分析了char和uchar的取值范围和越限的情况。 总结&#xff1a; 1、char/uchar本质是保存的整型数&#xff0c;一个字节的整型数&#xff1b;//所谓的字符型&#xff0c;其实是将整型作为ascii码转换成的字符。 2、uchar的取值范围 十进制&#xff1a…

【机器学习】高斯混合模型详解

目录 1 引言2 高斯混合模型2.1 高斯分布2.2 高斯混合模型 3 高斯混合模型的求解4 参考文献 1 引言 高斯混合模型&#xff08;Gaussian Mixture Model, GMM&#xff09;是单一高斯概率密度函数的延伸&#xff0c;GMM能够平滑地近似任意形状的密度分布。学习高斯混合模型主要是因…