This is the 4th day of my participation in the August More Text Challenge

ECMAScript version history

  1. HTML

    HTML1, HTML2, HTML3, 1991-1997 by the IETF organization

    IETF: The Internet Engineering Task Force

  2. HTML3.2

    Published in January 1997, it is now part of W3C (World Wide Web Consortium)

  3. JavaScript

    In 1995, Netscape launched LiveScript, a joint release of JavaScript to ride the Java fever

    In 1996, JavaScript1.0 and 1.1 were released

    1997 – Microsoft JScript released (completely copied from JavaScript)

    1996 ECMAScript1.0 release (based on JavaScript1.0)

    In June 1996, ECMAScript2.0 was released

    ECMAScript3.0 was released in December 1999

    In 2000, the ECMAScript4.0 draft was not adopted, the adjustment was too large

    In 2007, ECMAScript4.0 was ready for release, but still not approved

    2008.7, ECMAScript3.1 was launched on the basis of 3.0, renamed ECMAScript5

    On December 2009, 4.0 was divided into three parts, one part was officially released as ES5, and the other two parts javascript. Next and javascript. Next

    2011.6, ECMAScript5.1 was released and became an ISO standard

    March 2013, javascript. Next draft frozen

    June 2013, javascript. Next draft released

    June 2015, ECMAScript6 was officially released

  4. ECMAScript

    ECMA, the European Computer Manufacturing Association, developed the scripting language specification ECMA-262, and scripting languages that comply with the specification become ECMAScript

    Ecmascript2015/2016/2017 belong to ES6 and are updated every year

Babel builds the environment

Babel is introduced

  1. Babel is used to translate ES6 code into ES5 code that the browser can execute
  2. Reference website: Babel Chinese

Install the configuration

  1. First hand the project over to NPM to manage dependencies using NPM init (generate package.json file)

  2. Install the Babel translation rule set and scaffolding

    npm i -D babel-preset-env
npm i -D babel-cli
Copy the code

  3. The project root directory creates the.babelrc file specifying the rule set

    {
  "presets": ["babel-preset-env"]}Copy the code

  4. Add commands to the scripts property of package.json

    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."babel-build": "babel app.js"
  }
Copy the code

  5. Ec6 syntax is used in app.js in the root directory

    const fnc = () = > {
    console.log('ES6 arrow function')
}

fnc();
Copy the code

  6. Bundle.js is generated in the root directory after NPM run babel-build

    'use strict';

var fnc = function fnc() {
    console.log('ES6 arrow function');
};

fnc();
Copy the code

  7. In the same way, the Babel SRC -d lib command can be used to translate all SRC js files into the lib folder

    "scripts": {
    "babel-build-src": "babel src -d lib"
  }
Copy the code

  8. Use babel-node to execute the code

    "scripts": {
    "babel-node": "babel-node ./src/app.js"
  }
Copy the code

    NPM run babel-node app.js

Use in the browser

  1. Use Babel-standalone to translate the ES6 syntax in a browser

  2. Using CDN introduction, the ES6 code script tag is specified as text/ Babel

    <div id="js-box"></div>
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel">
    const getMsg = () = > {
        return 'Message'
    }
    document.getElementById('js-box').innerHTML = getMsg()
</script>
Copy the code

Use the ES6 API

  1. Babel only translates ES6 syntax by default and does not include new apis for ES6

    Global objects such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise, and some methods defined on global objects (Object.assign…

  2. Support for new apis is provided using babel-plyfill

    npm install --S babel-polyfill
Copy the code

    The introduction of Babel – plyfill

    require("babel-polyfill")
/ / or
import "babel-polyfill"
Copy the code