ES6标准入门 第一章:简介

时间:2024-07-13 18:36:15
  • 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 babel-core@5

      运行以上命令可在当前目录的 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代码后 插入到网页中运行。