es6入门基础总结

最近在学习javascript es6，也在看javascript es6标准入门，所以结合了这本书的内容写了一个读书笔记，希望对入门学习ES6的同学有点帮助。

 

 

 

运行环境

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');

 

 

原文来自：简书／tinlee