Polyfills

The JavaScript language is steadily evolving. Periodically, new proposals for languages appear, which are analyzed and discussed and, if deemed worthy, added to the tc39.github. IO/ecMA262 / list, which is then added to the specification.

The team behind the JavaScript engine has their own ideas about what to implement first. They may decide to implement the recommendations in the draft and postpone what is already in the specification because they are not interesting or difficult to implement.

Therefore, it is not uncommon for a JavaScript engine to implement only part of the standard.

A good page to view the current support status of language features is kangax.github. IO /compat-tabl… (It’s big, and we still have a lot to learn).

Babel

When we use some modern features of the language, some engines may not support such code. As mentioned above, not all features are implemented everywhere.

This is what Babel came to save.

Babel is a transpiler. It converts modern JavaScript code into its old standard form.

Babel actually consists of two parts:

  1. First, transpiler programs for rewriting code. Developers run it on their own computers. It rewrites the code to the previous language standards. The code is then uploaded to a user-facing web site. Modern project-building systems like WebPack provide a way to automatically run transpiler every time code changes, so it’s easy to integrate into the development process.

  2. Second, polyfill.

    New language features may include new built-in functions and syntax constructs. Transpiler rewrites code to transform syntactic structures into older ones. But for new built-in functions, we need to implement them. JavaScript is a highly dynamic language. Scripts can add/modify any function to make their behavior conform to modern standards.

    Scripts that update/add new functions are called “polyfill”. It “fills in” the gaps and adds missing implementations.

    Two interesting polyfills are:

    • Core JS supports a lot, allowing you to include only the functionality you need.
    • Polyfill. IO provides polyfill services for scripts, depending on the function and the user’s browser.

So transpiler and polyfill are necessary if we are to use modern language features.

Examples from tutorials

Most examples are runnable, such as:

alert('Press the "Play" button in the upper-right corner to run');
Copy the code

Modern JS examples that only work if your browser supports it.

Google Chrome is usually the fastest to update its support for new language features and does a good job of running cutting-edge demos without any transpiler, as are other modern browsers.

This article was first published on the wechat public account “Technology Talk”, welcome to wechat search attention, subscribe to more exciting content.

Modern JavaScript Tutorials: Open source modern JavaScript tutorials from beginner to advanced quality. React provides a JavaScript tutorial for MDN learners.

Read for free online: zh.javascript.info

Scan the QR code below and follow the wechat public account “Technology Chat” to subscribe for more exciting content.