开启你的ES6之旅

ES6-BABEL

在这个wen前端高速发展的今天，JavaScript已经步入ES6阶段，作为一名开发人员，必须与时俱进，进军ES6。

使用ES6必备条件如下

• NodeJs
• NPM^[1]

在使用Babel之前 ， 我们要先检测一下当前node对es6的支持情况， 我们使用先es-checker， 命令行下执行：

npm -g install es-checker

es-checker安装完毕以后， 命令行执行：es-checker ， 如下图， 我的node环境版本是v6.10.1， 支持90%哦 ：

node对es6的支持率

babel的安装

• 首先新建一个工作目录， 然后创建一个package.json的文件

{
  "name": "ES6-demo",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

• 在工作目录下执行命令安装babel-cli：
  npm --save-dev install babel-cli

• 再安装一个全局的babel-cli：
  npm -g install babel-cli

• 在工作目录创建一个名字为.babelrc的文件^[2]， 文件内容入如下

 {
    "presets": [
      "es2015"
    ],
    "plugins": []
  }

• 在工作目录下安装babel-preset-es2015
  npm install --save-dev babel-preset-es2015

到目前为止babel安装完毕!

babel的使用

babel es6-js --watch --out-file src/index.js

监听es6-js这个文件夹下的所有js文件，将它输出到src文件夹下的index.js文件中

---

1. 基本上使用了nodejs的完整安装包，npm会默认安装到电脑环境中。 ↩

2. 要注意window系统下创建这种文件系统会提示你：“必须键入文件名” ， 你可以找别的方式去创建， 我是在开发工具webstorm的工程目录中把这个文件创建出来的 ↩