拯救JavaScript的工具

今天，有许多开发工具可供Javascript开发者使用，以使我们的工作更容易。这些工具让我们不再担心与应用开发有关的世俗任务，而专注于真正重要的部分，即编码。

在这篇文章中，我将介绍几个在开发者中最受欢迎的Javascript工具。Webpack、Babel、ESLint和Prettier。如果你还没有在你的项目中使用它们中的任何一个，相信我，你会错过的。所以，一定要在你的下一个项目中试试它们。

脚本

Webpack是一个在Javascript开发者中很受欢迎的模块捆绑器。它将你的应用程序中的大量Javascript模块作为输入，并将它们捆绑成一个或几个JS文件，你可以很容易地将其包含在一个HTML文档中。

由于我们倾向于在应用程序中使用越来越多的动态功能，现代的网络应用包含相当多的JS文件。虽然增加的功能对用户来说是很好的，但如果没有额外的支持，管理这些模块以及应用程序中使用的其他第三方依赖，对开发者来说可能会变得相当头痛。

例如，你将不得不手动控制每个脚本在浏览器上的执行顺序。加载许多文件也可能影响你的应用程序的性能。

通过使用Webpack，你可以不再担心这些问题。Webpack，轻松有效地替你处理了这个事务。它分析应用程序的JS模块，从一个入口点开始，并构建一个依赖图。在加载器和插件的帮助下，它再处理诸如处理依赖关系、决定加载优先级和解决路径的任务。

不仅是Javascript，你还可以使用Webpack的css-loader来管理CSS文件。

Webpack允许你在代码中定义分割点，使输出被捆绑到几个JS文件中，而不是一个长文件。它让你可以自由地只在需要时加载部分代码。

这种按需的、懒惰的加载可以被有效地用来提高你的应用程序的性能。只有当用户做了一些需要其功能的事情时，你才会加载新的代码块。

特别是，如果你正在使用像React这样的框架，Webpack提供的功能，拆分和捆绑代码，处理依赖模块，将为你节省很多自己管理的麻烦。

Babel

Babel是最流行的Javascript转码器。它将ES6 Javascript代码转换为ES5 Javascript，这样代码甚至可以在旧的浏览器版本中运行。

转码器是一种工具，它将以一种语言编写的代码作为输入，并将其转换成另一种语言。在Babel的例子中，它主要是接收ES6代码并输出ES5代码。

以下面这个使用ES6中新引入的类编写的代码片段为例:

class Person {
  
  constructor(name){
    this.name = name;
  }
}

let person = new Person("Mark");

Babel会像这样把它转换为ES5:

"use strict";

function _instanceof(left, right) { 
   if (right != null && typeof Symbol !== "undefined" &&      right[Symbol.hasInstance]) { 
       return !!right[Symbol.hasInstance](left); 
   } else { 
        return left instanceof right; 
   } 
}

function _classCallCheck(instance, Constructor) { 
    if (!_instanceof(instance, Constructor)) { 
        throw new TypeError("Cannot call a class as a function"); 
    } 
}

var Person = function Person(name) {
  _classCallCheck(this, Person);

  this.name = name;
};

var person = new Person("Mark");

如果这就是Babel的全部功能，那么你为什么要在你的项目中使用Babel呢？尽管开发者大步流星地接受了Javascript中引入的ES6新特性，但一些浏览器还没有赶上对ES6的支持。

如果您的网络应用程序的用户使用的是这些浏览器之一，或者仅仅是旧的浏览器版本，他们将无法利用您添加到应用程序的所有伟大功能。为了确保你的应用程序能被所有人使用，Babel会介入并将你的代码转为所有浏览器都支持的ES5。

在所有的浏览器开始支持ES6之后，您是否应该停止使用Babel？答案是，不。尽管目前的重点是ES6，但ECMA每年都会发布新的Javascript更新。浏览器总是需要一些时间来追赶最新的标准。

但在Babel的支持下，它更早地采用了最新的标准，你不必担心在开发应用程序时过渡到使用新的Javascript功能。

如果你是一个React开发者，想在代码中使用ES6特性或JJSX，让Babel帮助你将代码转译为ES5是明智的选择。另外，你也可以将Babel与Angular一起使用，编写ES6代码。

除了ES6，Babel也可以将Typescript转译为ES5。

脚本

ESLint是大多数Javascript开发者的默认linter。它可以帮助你写出更干净的代码，并遵守你所遵循的编码惯例。

linter的任务是分析你的代码，并标记其中的编程和风格错误。使用ESLint，你可以完全控制哪些错误应该被标记，以及它们的错误级别是什么。你可以将一个规则的错误级别定义为错误、警告或禁用。

ESLint对于发现未声明的变量赋值和与变量范围有关的问题等错误相当有用。

你也可以使用规则来强制执行你的代码中的某些编码惯例。例如，你可以定义规则，不允许在循环内使用await或不允许使用console。

如果你参与的项目遵循一个特定的风格指南和编码惯例，你可以定义ESLint规则来帮助你与他们保持一致。如果你遵循的风格指南对连续空行有限制，你可以在规则中指定这一点。然后，每当你错误地留下太多的空行，ESLint就会在你的代码中显示一个错误。

脚本

Prettier是一个代码格式化器。你可以用它来自动格式化你的代码，而不需要手动检查样式错误。

在设计上，Prettier在涉及到编码风格时非常有主见。采用Prettier的主要原因之一是停止所有正在进行的关于代码风格的争论，因为这是它的使命之一，所以只有少数几个选项可供选择。关于这一点，更多的是在Prettier的意见哲学页上

与ESLint类似，Prettier帮助你写出更干净的代码，并确认为一个风格指南。当涉及到执行样式时，ESLint和Prettier的区别在于，ESLint只向你显示你做错了什么的错误，但Prettier自己做格式化。

但重要的是要明白，它们是不能互换的。ESLint提供了比检查样式错误更多的用例。

总结

JavaScript生态系统依赖于帮助开发者解决问题和建立令人惊叹的应用程序的工具。这些工具提供了对清洁代码、兼容性问题和性能的支持。

正是由于这些工具，像React这样的框架才成为可能，而且JavaScript可以出现在更多的地方，而不仅仅是网络。

同样，这些工具中的一些在这里只是为了修复JavaScript遗产留给我们的 "混乱"。

谢谢你的阅读!

JavaScript工具化的救援

拯救JavaScript的工具

脚本

Babel

脚本

脚本

总结