一、很多同學(xué)疑問既然es6已經(jīng)出來的了，為很莫寫完es6語法還要把他轉(zhuǎn)換成es5，這不是脫褲子放屁嗎？

????????ECMAScript 6(ES6)的發(fā)展速度非常之快，但現(xiàn)代瀏覽器對(duì)ES6新特性支持度不高，所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實(shí)現(xiàn)。

? ??????Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以我們不用等到瀏覽器的支持就可以在項(xiàng)目中使用ES6的特性。

二、新建工程初始化項(xiàng)目

1、新建工程文件夾這里起名叫做es6,然后在里面創(chuàng)建兩個(gè)文件夾分別為src 、dist如下圖：(src為待轉(zhuǎn)換es6 js存放目錄，dist為編譯完成后的es5 js存放目錄)

2、在src目錄下新建一個(gè)js文件（這里起名叫做index.js），里面輸入es6的代碼：

3. 初始化項(xiàng)目

1）打開終端命令提示符 進(jìn)入工程目錄（這里也就是es6文件夾）輸入如下命令初始化項(xiàng)目：（這里用的npm,國內(nèi)用戶建議用cnpm不懂得可以移步至淘寶鏡像使用）命令執(zhí)行完成后會(huì)在根目錄生成package.json文件。

npm? init?

2）打開我們可以看到里面的內(nèi)容（可以根據(jù)自己的需要進(jìn)行修改，比如我們修改name的值。）

三、全局安裝babel工具

1）在終端中輸入以下命令,

npm install -g babel-cli

2）雖然已經(jīng)安裝了babel-cli，只是這樣還不能成功進(jìn)行轉(zhuǎn)換，我們還需要安裝轉(zhuǎn)換包才能成功轉(zhuǎn)換。

npm install --save-dev babel-preset-es2015 babel-cli

3）安裝完成后，我們可以看一下我們的package.json文件，已經(jīng)多了devDependencies選項(xiàng)。

四、新建.babelrc

在項(xiàng)目根目錄新建(.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里面的別名來實(shí)現(xiàn)編譯? 修改（“build”:“babel src --out-dir dist”）

以后你只需要如下命令就可以編譯了（是不是感覺很簡單呢）

npm run build

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如果你覺得此文章對(duì)你有幫助，多多評(píng)論點(diǎn)贊