Introduction to ECMAScript 6 tutorials

ES6: Full name ECMAScript 6.0

ECMAScript is the international standard for JavaScript languages, and JavaScript is the implementation of ECMAScript.

ES6 has become the most substantial upgrade JS history, with features ranging from popular syntax sugars such as arrow functions and simple string interpolation to brain-burning new concepts such as proxies and generators;

Babel transcoder

Babel a widely ES6 转码器 that converts ES6 code into ES5 code for execution in older browsers. T his means that you can write programs in ES6 without worrying about whether your existing environment is supported. Here's an example.

// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
  return item + 1;
});

The original code above uses the arrow function, which Babel converts to a normal function and can be executed in a JavaScript environment that does not support the arrow function.

The following command installs Babel in the project directory.

$ npm install --save-dev @babel/core

profile.babelrc

Babel profile is .babelrc is stored at the root of the project. The first step in using Babel is to configure the file.

This file is used to set transcoding rules and plug-ins in the following basic format.

{
  "presets": [],
  "plugins": []
}

The presets field sets transcoding rules and officially provides the following rule set that you can install as needed.

//最新转码规则
$ npm install --save-dev @babel/preset-env
//react 转码规则
$ npm install --save-dev @babel/preset-react

Then, add these rules to .babelrc.

 {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

Note that all Babel tools and modules below must be written in .babelrc first.

Command line transcoding

Babel provides command-@babel/cli for command-line transcoding. Its installation commands are as follows.

$ npm install --save-dev @babel/cli

The basic usage is as follows.

//转码结果输出到标准输出
$ npx babel example.js
//转码结果写入一个文件
// --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
//或者
$ npx babel example.js -o compiled.js
//整个目录转码
//--out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
// 或者
$ npx babel src -d lib
//-s 参数生成source map文件
$ npx babel src -d lib -s

babel-node

@babel/node babel-node providing an ES6-supported REPL environment. I t supports all the features of Node's REPL environment and runs the ES6 code directly. First, install the module.

$ npm install --save-dev @babel/node

Then, perform babel-node and enter the REPL environment.

$ npx babel-node
> (x => x * 2)(1)
2

The babel-node command can run the ES6 script directly. Put the above code into the script file es6.js and run it directly.

// es6.js 的代码
//console.log((x => x * 2)(1));
$ npx babel-node es6.js
2

@babel/register module

@babel/register module require the require command and adds a hook to it. After that, whenever a file with .js, .jsx, .es, and .es6 suffixes is loaded with require, it is transcoded with Babel.

$ npm install --save-dev @babel/register

When using, you must first load @babel/register.

// index.js
require('@babel/register');
require('./es6.js');

Then, there is no need to manually transcode .js the index code.

$ node index.js
2

It is important to note that @babel/register will only require loaded by the require command, not the current file. In addition, because it is transcoding in real time, it is only suitable for use in development environments.

polyfill

Babel converts only new JavaScript syntax by default, not new API such as global objects such as Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, Promise, and methods defined on global objects, such as Object.assign.

For example, ES6 added the Array.from method to the Array object. B abel doesn't transcode this method. If you want this method to run, you can use core-js and regenerator-runtime, which provide transcoding of the generator function, to provide a gasket for the current environment.

The installation commands are as follows.

$ npm install --save-dev core-js regenerator-runtime

Then, at the head of the script, add the following two lines of code.

import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime);

Babel has a large number of APIs that do not transcode by default, and a detailed list can be used to view the definitions and files of the babel-plugin-transform-runtime module .js files.

The browser environment

Babel can also be used in browser environments @babel the browser version provided by the 2000/standalone module to insert it into a web page.

<script src="https://unpkg.com/@babel/standalone/babel.min.js" rel="external nofollow" ></script>
<script type="text/babel">
// Your ES6 code
</script>

Note that web pages convert ES6 code to ES5 in real time, which can have an impact on performance. The production environment needs to load scripts that have been transcoded.

Babel provides an REPL online compiler that converts ES6 into ES5 online. The converted code can be inserted directly into the web page as ES5 code.

Source: ECMAScript 6 Getting Started Tutorial at Yan Yifeng https://es6.ruanyifeng.com/

Introduction to ECMAScript 6 tutorials

Table of contents