一、很多同學疑問既然es6已經出來的了，為很莫寫完es6語法還要把他轉換成es5，這不是脫褲子放屁嗎？
ECMAScript 6(ES6)的發展速度非常之快，但現代瀏覽器對ES6新特性支持度不高，所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實現。
Babel是一個廣泛使用的轉碼器，babel可以將ES6代碼完美地轉換為ES5代碼，所以我們不用等到瀏覽器的支持就可以在項目中使用ES6的特性。
二、新建工程初始化項目
1、新建工程文件夾這里起名叫做es6,然后在里面創建兩個文件夾分別為src 、dist如下圖：(src為待轉換es6 js存放目錄，dist為編譯完成后的es5 js存放目錄)
2、在src目錄下新建一個js文件（這里起名叫做index.js），里面輸入es6的代碼：
3. 初始化項目
1）打開終端命令提示符 進入工程目錄（這里也就是es6文件夾）輸入如下命令初始化項目：（這里用的npm,國內用戶建議用cnpm不懂得可以移步至淘寶鏡像使用）命令執行完成后會在根目錄生成package.json文件。
npm init
2）打開我們可以看到里面的內容（可以根據自己的需要進行修改，比如我們修改name的值。）
三、全局安裝babel工具
1）在終端中輸入以下命令,
npm install -g babel-cli
2）雖然已經安裝了babel-cli，只是這樣還不能成功進行轉換，我們還需要安裝轉換包才能成功轉換。
npm install --save-dev babel-preset-es2015 babel-cli
3）安裝完成后，我們可以看一下我們的package.json文件，已經多了devDependencies選項。
四、新建.babelrc
在項目根目錄新建(.babelrc)文件輸入如圖所示代碼：
五、現在你可以盡情轉換了
終端輸入如下命令：（babel 待轉換路徑/ --out-dir 轉換后路徑/）
我們這里是從src轉換到dist目錄下
babel src --out-dir dist
現在我們dist目錄下面就生成了編譯后的js我們打開看一下(大功告成)
是不是每次這樣輸入一大串命令感覺很麻煩？
通過修改package.json里面的別名來實現編譯 修改（“build”:“babel src --out-dir dist”）
原文連接:https://www.jianshu.com/p/8a8f7b0f887a
以后你只需要如下命令就可以編譯了（是不是感覺很簡單呢）
npm run build