工具

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

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

1 通用的任务执行工具

构建工具可自动执行各种 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 仍然是一个不错的选择。

2 模块打包工具

Browserify

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

RequireJS

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

3 代码检查工具(Linting)

ESLint

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

JSHint

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

4 测试套件

测试驱动开发(Test-Driven-Development) 需要求你在开始编写代码之前，首先编写测试代码来测试你的代码。也欢迎你编写代码来测试你的测试代码！
代码测试的工具有很多，如 Ava ，Tape 和 Jest，但最流行的三个选项是：

Mocha

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

Jasmine

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

QUnit

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