ES6标准入门 第一章：简介

Posted 2020-10-25 见证LBJ

• ECMAScript 6 是javascript 语言的下一代标准；发布于2015年，又称为ECMAScript 2015。

• ECMAScript 方言还有 JScript 和 ActionScript。

• ECMAScript 与 JavaScript 的关系：前者是后者的规范，后者是前者的一种实现。  

• 一个完整的JavaScript实现 包含 ECMAScript 、DOM、 BOM 三部分。

• babel 转码器：
  • Babel 是一个广为使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行；

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

     

  1. 命令行环境
     Babel 的命令行版本通过下面的命令安装：
     

     $ npm install --global babel-cli
     $ npm install --save babel-preset-es2015
     // 然后在当前目录下新建配置文件 .babelrc  并写入以下代码
     {
         "presets": [‘es2015‘]          
     }

     Babel 自带一个babel-node 命令， 提供支持ES6 的 REPL 环境。它支持Node.js 的REPL环境的所有功能，而且可以直接运行ES6代码：

     $ babel-node
     console.log([1,2,3].map(x => x * x))   //[1 , 4, 9]

     babel-node 命令也可以直接运行 ES6脚本：（假设将上述代码写入es6.js中）

     $ babel-node es6.js     // [1, 4, 9]

     babel 命令可以将 ES6代码 转换为 ES5 代码：

     $ babel es6.js
     
     "use strict";
     
     console.log( [1,2,3].map( function (x) {
         return x * x;
     }) )

            -o参数（或--out-file）可将转换后的代码从标准输出 重定向至文件

     $ babel es6.js -o es5.js
     #或者
     $ babel es6.js --out-file es5.js

           -d参数 用于转换整个目录 （-d后面跟的是输出目录）

     $ babel -d build-dir source-dir

           -s参数 用于生成source map 文件

     $ babel -d build-dir source-dir -s

       

  2. 浏览器环境
     babel 也可以用于浏览器。 但是Babel6.0开始不再直接提供浏览器版本，而是要用构建工具构建出来；或者通过安装5.x 版本的babel-core模块获取。

     $ npm install [email protected]

      运行以上命令可在当前目录的 node_modules/babel-core/ 子目录下找到babel的浏览器版本browser.js(未精简) 和 browser.min.js(已精简)
      然后插入以下代码到网页中：

     <script src="node-modules/babel-core/browser.js"></script>
     <script type="text/babel">
             // 书写es6 代码
     </script>

      

     注意： 这种写法实时的将es6 转换为 es5，对网页性能有影响。 生产环境下需要加载已转码的脚本。
     
     
  3. Node.js 环境
     (1)先安装babel-core 和 babel-preset-2015 
     

     $ npm install --save-dev babel-core babel-preset-2015

     (2)然后在项目根目录下新建 .babelrc 文件

     {
          "presets":["es2015"]      
     }

     (3)最后在脚本中调用babel-core的 transform 方法

     var es5Code = ‘let x = n => n + 1‘;
     var es6Code = require(‘babel-core‘)
                            .transform(es5Code, {presets: [‘es2015‘]})
                            .code;
     //‘ "use strict"; \n\n var x = function x(n) {\n return n+1; \n}; ‘

      

     方法二：
     Node 脚本还有一种特殊的babel用法，即把babel加载为require 命令的一个钩子
     执行完（1）（2）之后，在应用的入口脚本( entry script )头部加入下面语句:
     

     require("babel-core/register");

     有了上面这个语句，后面所有通过require命令加载的后缀名为 .es6  .es  .jsx  .js  的脚本都会先通过babel转码再加载；
     
     
  4. 在线转换
     Babel提供了一个REPL在线编译器， 将ES6代码转换为es5代码后 插入到网页中运行。