ES6—Introduction

Table of contents

I. Overview

2. Extension: Babel Transcoder

3. Expansion: compile and package

---

I. Overview

concept

        The full name of ES6 is ECMAScript 6.0, which is the next-generation standard of Javascript language and was officially released in June 2015.

        Note that ES6 is both a historical term and a general term. It means the next-generation Javascript standard after version 5.1, covering ES6, ES7, ES8, etc.

        Reference: Introduction to ECMAScript 6 - Getting Started with ECMAScript 6 (ruanyifeng.com)

What is ECMA

        The Chinese name of ECMA is the European Computer Manufacturers Association. The purpose of this organization is to evaluate, develop and approve telecommunications and computer standards. It was renamed Ecma International in 1994.

What is the relationship between ECMAScript and JavaScript

        ECMAScript is the standard of JavaScript, and JavaScript is a specific implementation of ECMAScript.

2. Extension: Babel Transcoder

What is Babel

        Babel is a Javascript compiler, also known as an ES6 transcoder, that converts ES6 code into ES5 code for execution in older browsers. 

// 转码前
let arr = [1, 2, 3];
arr.map((item) => {
  return item * 2;
});

// 转码后
var arr = [1, 2, 3];
arr.map(function (item) {
  return item * 2;
});

Initialize the project

        As shown in the following command, initialize the project, where -yes can be simplified to -y, which means that the step of pressing Enter is omitted when initializing the project, and the default package.json file is directly generated.

> npm init -yes

Babel compiles ES6 examples

        As shown in the following command, install three dependent packages, namely @babel/cli, @babel/core, @babel/preset-env. Among them, @babel/cli is Babel's command line tool, @babel/core is Babel's core code base, and @babel/preset-env is Babel's preset rule set, which can convert the latest ECMAScript features into ES5 syntax.

> cnpm install -D @babel/core @babel/cli @babel/preset-env

         After the dependencies are installed, execute the following command to complete ES6 code compilation. The -d command is used to specify the output directory of the compiled file, and --presets is used to specify the transcoding rules. Note that if Babel is installed locally, you need to use npx to execute the Babel command. If it is installed globally, remove npx and use babel directly.

> npx babel src/js -d dist/js --presets=@babel/preset-env

3. Expansion: compile and package

overview

        The require keyword can be recognized in the node.js environment, but not in the browser environment. At this point, you can use browserify or webpack to compile and package the target file, and convert it into code that can be recognized by the browser.

        The browserify tool is used here. browserify is a module packaging tool, which is easier to use than webpack.

install browserify

        As shown in the following command, install the browserify dependency package.

> cnpm install -D browserify

        As shown in the following command, package the specified directory. Among them, dist/js/app.js is the target file, and -o is used to set the output directory.

> npx browserify dist/js/app.js -o dist/bundle.js