【ECMAScript6标准入门】Babel之HelloWorld

ES6语法可以让开发人员使用面向对象的方式写代码，但是不是所有浏览器都支持ES6语法。所以需要将ES6语法的js文件转换成大部分浏览器都可以运行的ES5语法。

这时候就要用到Babel

对应的网站是: https://babeljs.io/     中文: http://babeljs.cn/

1.安装nodejs

2.安装npm

3.安装babel（我是macos系统，sudo表示添加权限）

#打开命令行#Babel提供babel-cli工具，用于命令行转码。它的安装命令如下sudo npm install --global babel-cli#ES2015转码规则sudo npm install --save-dev babel-preset-es2015#react转码规则sudo npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个sudo npm install --save-dev babel-preset-stage-2

windows:

#1.设置taobao服务，因为npm被墙npm config set registry https://registry.npm.taobao.org#2.配置后可通过下面方式来验证是否成功 npm config get registry#3.通过cnpm使用npm install -g cnpm --registry=https://registry.npm.taobao.org#使用 cnpm install express#4.安装babelnpm install --global babel-clinpm install --save-dev babel-preset-es2015  npm install --save-dev babel-preset-reactnpm install --save-dev babel-preset-stage-2

4.创建一个ES6语法的JS文件(可以用class和extends是不是很爽)

script.js:

class Animal {    constructor(){        this.type = 'animal'    }    says(say){        console.log(this.type + ' says ' + say)    }}let animal = new Animal()animal.says('hello') //animal says helloclass Cat extends Animal {    constructor(){        super()        this.type = 'cat'    }}let cat = new Cat()cat.says('hello') //cat says hello

5.使用命令行生成新的文件：

babel script.js --presets es2015 -o script_es2015.js或者babel script.js --presets es2015,react,stage-2 -o script_es2015.js查看结果：node script_es2015.js

效果图：

记录内容来自《ES6标准入门》第三版  阮一峰 

部分内容来自网络