今日推薦開源項目：《之前 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");
"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 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://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/
