《es6标准入门》读书笔记－第一章 ECMAScript 6简介

以下内容使用的书籍为《es6标准入门－第2版》，阮一峰著，如有需要请购买正版
本文仅为个人读书笔记，如有不详之处请查阅原文

运行环境

node环境的检查

• 查看node对es6的支持状况

$ node --v8-option | grep harmory

• 阮一峰自写插件 @github

$ npm install -g es-checker
$  es-checker

babel转码器

babel安装

$ npm install --glabel bael-cli
$ npm install --save babel-preset-2015

在当前目录新建.babelrc文件

// .babelrc
{
    preset:[2015]
}

babel功能

babel-node 可直接运行es6代码

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

babel-node 可直接运行脚本
@(es6.js)

cosnole.log([1,2,3].map(x=>x*x))
  [1,4,9]

$ babel-node es6.js

babel命令可以将es6文件转为es5文件此处不是babel-node

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

输出参数
- -o 输出至某文件

$ baebl es6.js -o  es5.js

• -d 转换整个目录

$ baebl -d es6 es5

• -s 输出source-map

$ baebl -d es6 es5 -s

浏览器环境

babel6开始不再提供浏览器版本，而使用构建工具构建
可以使用以下方法安装5.x版本

$ node install label-core@5

并于页面中使用

 <script src="node_module/babel-core/browser.js"></script>
 <script type="text/babel">
 //enter your code
 </script>

此种做法会对浏览器性能产生影响，在script标签中需要注明 text/babel

配合Browserify可以生成浏览器能够直接加载的脚本
- 首先安装babelify

$ npm isntall --save-dev babelify babel-preset-2015 

• 然后用命令行转至es6脚本

$ browsweify script.js -o bundle.js  \ -t [ babelify --presets[ es2005 react]

上面代码将script.js 转为bundle.js,浏览器可直接加载bundle.js
建立package.json，可不必输入参数

 {
    "browserify":{
        "transform":[["babelify",{"presets":["es2015"]}]]       
    }
}

node.js环境

如果需要在node中将es6转为es5，需要安装如下：

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

在当前目录新建.babelrc文件

// .babelrc
{
    preset:[2015]
}

在脚本文件的最后调用babel-core的transform方法

var es5Code='let x=n=>n+1';
var es6Code=rquire('babel-core').transform(es5Code,{preset:['es2015']});
//"user strict";\n\nvar x=function(n){\n return n+1;\n}

设置钩子做法，这将会对所有后面引入的js,es6,es,jsx文件进行转码加载

rquire('babel-core/register');

注意:babel默认不会转换Iterator,Generator,Set,Map,Proxy,Reflext,Symbol,Promise等全局对象以及一些定义在全局对象上的方法，需要安装babel-polyfill模块来进行扩展

$ npm install --save babel-polyfill

然后在所有脚本顶部引入

rquire('babel-polyfill');

在线转换

babel提供了一个@REPL在线编辑器

Traceur转码器

Google公司的在线转码器@Traceur
具体步骤略，有兴趣的可以去看看原书