开源日报 每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文，坚持阅读《开源日报》，保持每日学习的好习惯。
今日推荐开源项目：《之前 timeago.js》
今日推荐英文原文：《JavaScript Tooling to the Rescue》

---

今日推荐开源项目：《之前 timeago.js》传送门：项目链接
推荐理由：这个 JS 库项目可以用于解决一个常见的问题：计算出某个过去的时间是在多久以前。这个项目不仅支持多种语言，而且除了默认的数据处理方式外，它也提供了让开发者自定义输出语言及格式的功能，可以轻松适应需要特殊语言风格的页面。

---

今日推荐英文原文：《JavaScript Tooling to the Rescue》作者：Juan Cruz Martinez
原文链接：https://medium.com/better-programming/javascript-tooling-to-the-rescue-2279742a8d1e
推荐理由：介绍 JS 中常用的几个工具

JavaScript Tooling to the Rescue

The benefits of Webpack, Babel, ESLint, and Prettier

Today there are a number of development tools available for JavaScript developers to make our job easier. These tools let us stop worrying about the mundane tasks related to application development and focus on the really important part, coding.

In this article, I am presenting a few of the most popular JavaScript tools among developers: Webpack, Babel, ESLint, and Prettier. If you haven’t used even one of them in your projects, trust me, you are missing out. Definitely give them a try on your next project.

Webpack

Webpack is a popular module bundler among JavaScript developers. It takes the large collection of JavaScript modules in your application as input and bundles them into one or several JS files that you can easily include in an HTML document.

A modern-day web application contains a considerably high number of JS files because of our tendency to use more and more dynamic features in the application. While the added features are great for the users, managing these modules along with other third-party dependencies used in the application without additional support could become quite a headache for developers.

For example, you’ll have to manually control the order in which each script is executed on the browser. Loading many files could also affect the performance of your application.

With the use of Webpack, you can stop worrying about these issues. Webpack easily and efficiently takes care of this business for you. It analyzes the JS modules of the application starting from an entry point, and constructs a dependency graph. With the help of loaders and plugins, it then handles tasks like dealing with dependencies, deciding load priorities, and resolving paths.

It’s not just for JavaScript. You can also use Webpack’s css-loader to manage the CSS files.

Webpack allows you to define split points in the code so that the output is bundled to several JS files instead of a single long file. It gives you the freedom to load parts of code only when they are needed.

This on-demand, lazy loading could be used efficiently to increase the performance of your application. You load the new code blocks only when the user has done something to require their functionality.

Especially if you are working with frameworks like React, the functions provided by Webpack — splitting and bundling code, dealing with dependency modules — will save you a lot of the hassle of managing them by yourself.

Babel

Babel is the most popular transpiler for JavaScript. It converts ES6 JavaScript code into ES5 JavaScript so that the code can run in even old browser versions.

Transpilers are tools that take the code written in one language as input and convert it to another language. In Babel’s case, it mainly takes ES6 code and outputs ES5 code.

Take the following code snippet written using newly introduced classes in ES6.

class Person {

  constructor(name){
    this.name = name;
  }
}
let person = new Person("Mark");

Babel will convert it into ES5 like this.

"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");

If that’s all Babel does, why should you use Babel in your project? Though developers embraced new ES6 features introduced to JavaScript, some browsers are yet to catch up with ES6 support.

If the users of your web application are using one of these browsers, or simply using older browser versions, they won’t be able to take advantage of all the great features you have added to the application. To make sure your app is accessible to everyone, Babel steps in and transpiles your code to ES5, which is supported by all the browsers.

Should you stop using Babel after all the browsers start supporting ES6? The answer is no. Even though the focus is currently on ES6, ECMA releases new JavaScript updates yearly. It’ll always take browsers some time to catch up with the newest standards.

But with the support of Babel, which adopts the newest standards much sooner, you won’t have to worry about transitioning to use new JavaScript features when developing your applications.

If you are a React developer who wants to use ES6 features or JSX in your code, letting Babel help you with transpiling the code to ES5 is the wise choice to make. Also, you can use Babel with Angular to write ES6 code.

In addition to ES6, Babel can transpile TypeScript to ES5 as well.

ESLint

ESLint is the default linter of most JavaScript developers. It helps you write cleaner code and adhere to the coding conventions you follow.

The task of a linter is to analyze your code and flag programming and style errors in it. With ESLint, you have complete control over which errors should be flagged and what their error level is. You can define the error levels of a rule as error, warning, or disabled.

ESLint is quite useful to spot errors like an undeclared variable assignment and issues related to variable scope.

You can also use rules to enforce certain coding conventions in your code. For example, you can define rules to disallow the use of await inside loops or disallow the use of console.

If the project you are involved in follows a specific style guide and coding convention, you can define ESLint rules to help you stay consistent with them. If the style guide you follow has a limit on continuous empty lines, you can specify this in the rules. Then, whenever you mistakenly leave too many empty lines, ESLint shows an error in your code.

Prettier

Prettier is a code formatter. You can use it to automatically format your code without having to manually check for style errors.

Though it comes with a set of rules for its preferred style, you can set up your own rules to reflect the style guide you follow. Then all you have to do is save the source file for Prettier to format your code to suit the defined rules.

Similar to ESLint, Prettier helps you write cleaner code that conforms to a style guide of your choice. The difference between ESLint and Prettier when it comes to enforcing style is that ESLint only shows you errors on what you are doing wrong, but Prettier does the formatting by itself.

But it’s important to understand that they are not interchangeable. ESLint offers more use cases than checking style errors.

Conclusion

The JavaScript ecosystem relies on tools that help developers to resolve problems and build amazing apps. These tools provide support for clean code, compatibility issues, and performance.

It is thanks to these tools that frameworks like React are possible and that JavaScript can be present in much more than just the web.

It is also true that some of these tools are here just to fix the “mess” that JavaScript legacy left us.

Thanks for reading!

---

下载开源日报APP：https://opensourcedaily.org/2579/
加入我们：https://opensourcedaily.org/about/join/
关注我们：https://opensourcedaily.org/about/love/