先簡單說一下Babel吧

Babel是一個ES6轉碼器，可以將ES6程式碼轉為ES5程式碼

此篇教程是在學習阮老師的《ES6標準入門》時，不是特別懂npm的學習總結

比較適合沒有用過npm的同學吧。

在阮老師的教程上具體補充，通過以下幾個步驟，即可在專案中直接安裝Babel轉碼器，一行命令即可進行ES6轉碼

第一步：建立package.json

package.json 檔案是一個描述檔案，主要有以下3個作用：

1.描述專案依賴了哪些包

2.可以使用“語義化版本規則”指明專案依賴包的版本，表明接受更新的程度

3.與其他開發者分享

另外，package.json中，至少要有兩部分內容

"name"與"version"

這裡只是簡單介紹，有興趣繼續深入的話看看文尾的連結吧

現在我們來建立一個package.json

1.開啟cmd進入專案檔案，輸入"npm init" `專案下安裝package.json

執行命令後會讓你配置各個部分

name與version處直接回車的話就預設按檔名和1.0.0的版本號配置咯，其他配置可以直接回車到最後

完成後，資料夾中就會出現一個package.json

第二步：建立Babel的配置檔案.babelrc

.babelrc檔案用於設定轉碼規則和外掛，基本規則：

{

    "presets":[ ],

    "plugins":[ ]

}

因為window下不可以直接建立空檔名的檔案，所以我們用另存為的方式建立這個配置檔案

新建文字輸入配置：

然後另存為（注意儲存型別改為所有檔案）

“新建文字文件.txt"也就可以刪掉啦，後面配置時用NotePad開啟就好

第三步：安裝規則集，設定.babelrc

上一步已經建立好.babelrc了，接下來我們安裝規則集

preset欄位設定轉碼規則，官方給了我們多個規則集，以下是安裝命令

//最新轉碼規則

npm install --save-dev babel-preset-latest



//react 轉碼規則

npm install --save-dev babel-preset-react



//不同階段語法提案的轉碼規則（4選1）

npm install --save-dev babel-preset-stage-0

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3
 

輸入

npm install --save-dev babel-preset-latest

npm install --save-dev babel-preset-react

在4選1中選npm install --save-dev babel-preset-stage-2

。。。。安裝中。。。。。

安裝完成！

安裝完成後我們可以在package.json中安裝的包

現在讓我們來設定.babelrc吧，如下圖

第四步：專案中安裝babel-cli,再改寫package.json

安裝babel-cli前，我們先建立一個存放js的資料夾吧，放等會用來轉換的js指令碼，我把它命名為jsFolder

現在，輸入npm install --save-dev babel-cli安裝babel-cli

然後改寫package.json：在scripts中加入

    "build": "babel src -d lib"



src：放置原js的資料夾路徑

lib：放置轉換後js的檔案路徑（沒有的話會自動建立）

按照建立的jsFolder，我們這樣子寫

ok！儲存退出，現在我們可以一個命令轉換了

開始測試！

先在jsFolder中建立一個ES6程式碼，我們用阮老師的例子

然後cmd中輸入npm run build

到lib中看看

嗯，然後就轉換完成了，就算jsFolder中有多個js命令，或者專案扔給其他夥伴，直接一個命令就可以完成轉換啦

參考資料：

      《ES6標準入門（第3版）》