ES6-BABEL

在這個wen前端高速發(fā)展的今天，JavaScript已經(jīng)步入ES6階段，作為一名開發(fā)人員，必須與時俱進，進軍ES6。

使用ES6必備條件如下

• NodeJs
• NPM^[1]

在使用Babel之前 ， 我們要先檢測一下當(dāng)前node對es6的支持情況， 我們使用先es-checker， 命令行下執(zhí)行：

npm -g install es-checker

es-checker安裝完畢以后， 命令行執(zhí)行：es-checker ， 如下圖， 我的node環(huán)境版本是v6.10.1， 支持90%哦 ：

node對es6的支持率

babel的安裝

• 首先新建一個工作目錄， 然后創(chuàng)建一個package.json的文件

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

• 在工作目錄下執(zhí)行命令安裝babel-cli：
  npm --save-dev install babel-cli

• 再安裝一個全局的babel-cli：
  npm -g install babel-cli

• 在工作目錄創(chuàng)建一個名字為.babelrc的文件^[2]， 文件內(nèi)容入如下

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

• 在工作目錄下安裝babel-preset-es2015
  npm install --save-dev babel-preset-es2015

到目前為止babel安裝完畢!

babel的使用

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

監(jiān)聽es6-js這個文件夾下的所有js文件，將它輸出到src文件夾下的index.js文件中

1. 基本上使用了nodejs的完整安裝包，npm會默認(rèn)安裝到電腦環(huán)境中。 ?

2. 要注意window系統(tǒng)下創(chuàng)建這種文件系統(tǒng)會提示你：“必須鍵入文件名” ， 你可以找別的方式去創(chuàng)建， 我是在開發(fā)工具webstorm的工程目錄中把這個文件創(chuàng)建出來的 ?