一缸濒、很多同學疑問既然es6已經(jīng)出來的了捉邢，為很莫寫完es6語法還要把他轉(zhuǎn)換成es5渠牲，這不是脫褲子放屁嗎频祝？
????????ECMAScript 6(ES6)的發(fā)展速度非常之快泌参，但現(xiàn)代瀏覽器對ES6新特性支持度不高，所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實現(xiàn)常空。
? ??????Babel是一個廣泛使用的轉(zhuǎn)碼器沽一，babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以我們不用等到瀏覽器的支持就可以在項目中使用ES6的特性漓糙。
二铣缠、新建工程初始化項目
1、新建工程文件夾這里起名叫做es6,然后在里面創(chuàng)建兩個文件夾分別為src 昆禽、dist如下圖：(src為待轉(zhuǎn)換es6 js存放目錄蝗蛙，dist為編譯完成后的es5 js存放目錄)
2、在src目錄下新建一個js文件（這里起名叫做index.js）醉鳖，里面輸入es6的代碼：
3. 初始化項目
1）打開終端命令提示符 進入工程目錄（這里也就是es6文件夾）輸入如下命令初始化項目：（這里用的npm,國內(nèi)用戶建議用cnpm不懂得可以移步至淘寶鏡像使用）命令執(zhí)行完成后會在根目錄生成package.json文件捡硅。
npm? init?
2）打開我們可以看到里面的內(nèi)容（可以根據(jù)自己的需要進行修改，比如我們修改name的值盗棵。）
三壮韭、全局安裝babel工具
1）在終端中輸入以下命令,
npm install -g babel-cli
2）雖然已經(jīng)安裝了babel-cli北发，只是這樣還不能成功進行轉(zhuǎn)換，我們還需要安裝轉(zhuǎn)換包才能成功轉(zhuǎn)換喷屋。
npm install --save-dev babel-preset-es2015 babel-cli
3）安裝完成后琳拨，我們可以看一下我們的package.json文件，已經(jīng)多了devDependencies選項屯曹。
四狱庇、新建.babelrc
在項目根目錄新建(.babelrc)文件輸入如圖所示代碼：
五、現(xiàn)在你可以盡情轉(zhuǎn)換了
????終端輸入如下命令：（babel??待轉(zhuǎn)換路徑/ --out-dir 轉(zhuǎn)換后路徑/）
? ? 我們這里是從src轉(zhuǎn)換到dist目錄下
babel src --out-dir dist
現(xiàn)在我們dist目錄下面就生成了編譯后的js我們打開看一下(大功告成)
是不是每次這樣輸入一大串命令感覺很麻煩恶耽？
通過修改package.json里面的別名來實現(xiàn)編譯? 修改（“build”:“babel src --out-dir dist”）
以后你只需要如下命令就可以編譯了（是不是感覺很簡單呢）
npm run build
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如果你覺得此文章對你有幫助密任，多多評論點贊
